整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
一个html的基本结构如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>
第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。
HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
文档示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文档类型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
文档示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文档类型 </title> </head> <body> </body> </html>
两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
通过
、
、
、
、
,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：
，再其次是
，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
html段落标签
标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 </p> <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 页可以从一个网页链接跳转到另外一个网页。</p> </body> </html>
html换行标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行，代码如下：
<p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。 </p>
html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> <p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
<!-- “<” 和 “>” 的字符实体为 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html块标签
1、
标签 块元素，表示一块内容，没有具体的语义。
2、 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
1、 标签 行内元素，表示语气中的强调词
2、 标签 行内元素，表示专业词汇
3、 标签 行内元素，表示文档中的关键字或者产品名
4、 标签 行内元素，表示非常重要的内容
语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
html图像标签
标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
标签可以在网页上定义一个链接地址，它的常用属性有：
href属性 定义跳转的地址
title属性 定义鼠标悬停时弹出的提示文字框
target属性 定义链接窗口打开的位置
target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
target="_blank" 新页面会在新开的一个浏览器窗口打开
oundation 可以很简单的创建一个提醒框：
提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert:
实例
<div data-alert class="alert-box">
This is a default alert box.
</div>
<div data-alert class="alert-box secondary">
This is a secondary alert box.
</div>
<div data-alert class="alert-box success">
<strong>Success!</strong> This alert box indicates a successful or positive action.
</div>
<div data-alert class="alert-box info">
<strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div data-alert class="alert-box warning">
<strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
<div data-alert class="alert-box alert">
<strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
</div>
圆角提醒框
.radius 和 .round 类用于为提醒框添加圆角：
实例
<div data-alert class="alert-box success radius">
<strong>Success!</strong> Alert box with a radius.
</div>
<div data-alert class="alert-box info round">
<strong>Info!</strong> Alert box that is rounded.
</div>
关闭提醒框
要关闭提醒框，可以在连接或按钮元素上添加 class="close" 类，并初始化 Foundation JS:
实例
<div data-alert class="alert-box">
This is a default alert box with closing functionality.
<a href="#" class="close">×</a>
</div>
<script>
// Initialize Foundation JS For Functionality
$(document).ready(function() {
$(document).foundation();
})
</script>
提醒框的宽度为容器的 100%。
× (×) 是一个 HTML 字符实体表示一个关闭按钮的图标，而不是字母 "x"。
围：十进制 8448-8527，十六进制 2100-214F。
如果您想要在 HTML 中显示这些字符，您可以使用下表中的 HTML 实体。
如果字符没有 HTML 实体，您可以使用十进制或十六进制引用。
实例
<p>我将显示 ™<p>
<p>我将显示 ™<p>
<p>我将显示 ™<p>
结果如下：
我将显示 ™
我将显示 ™
我将显示 ™
并非下表中的所有实体都能在所有的浏览器中正确地显示。
目前，IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器。
| 字符 | 十进制 | 十六进制 | 实体 | 名称 |
|---|---|---|---|---|
| ℀ | 8448 | 2100 | ACCOUNT OF | |
| ℁ | 8449 | 2101 | ADDRESSED TO THE SUBJECT | |
| ℂ | 8450 | 2102 | 双重大写 C（DOUBLE-STRUCK CAPITAL C） | |
| ℃ | 8451 | 2103 | 摄氏度（DEGREE CELSIUS） | |
| ℄ | 8452 | 2104 | 中心线符号（CENTRE LINE SYMBOL） | |
| ℅ | 8453 | 2105 | CARE OF | |
| ℆ | 8454 | 2106 | CADA UNA | |
| ℇ | 8455 | 2107 | 欧拉常数（EULER CONSTANT） | |
| ℈ | 8456 | 2108 | SCRUPLE | |
| ℉ | 8457 | 2109 | 华氏度（DEGREE FAHRENHEIT） | |
| ℊ | 8458 | 210A | 脚本小写 G（SCRIPT SMALL G） | |
| ℋ | 8459 | 210B | 脚本大写 H（SCRIPT CAPITAL H） | |
| ℌ | 8460 | 210C | 黑体字大写 H（BLACK-LETTER CAPITAL H） | |
| ℍ | 8461 | 210D | 双重大写 H（DOUBLE-STRUCK CAPITAL H） | |
| ℎ | 8462 | 210E | 普朗克常数（PLANCK CONSTANT） | |
| ℏ | 8463 | 210F | 约化普朗克常数（PLANCK CONSTANT OVER TWO PI） | |
| ℐ | 8464 | 2110 | 脚本大写 I（SCRIPT CAPITAL I） | |
| ℑ | 8465 | 2111 | ℑ | 黑体字大写 I（BLACK-LETTER CAPITAL I） |
| ℒ | 8466 | 2112 | 脚本大写 L（SCRIPT CAPITAL L） | |
| ℓ | 8467 | 2113 | 脚本小写 L（SCRIPT SMALL L） | |
| ℔ | 8468 | 2114 | L B 加横杠符号（L B BAR SYMBOL） | |
| ℕ | 8469 | 2115 | 双重大写 N（DOUBLE-STRUCK CAPITAL N） | |
| № | 8470 | 2116 | NUMERO 符号（NUMERO SIGN） | |
| ℗ | 8471 | 2117 | 录音版权（SOUND RECORDING COPYRIGHT） | |
| ℘ | 8472 | 2118 | ℘ | 脚本大写 P（SCRIPT CAPITAL P） |
| ℙ | 8473 | 2119 | 双重大写 P（DOUBLE-STRUCK CAPITAL P） | |
| ℚ | 8474 | 211A | 双重大写 Q（DOUBLE-STRUCK CAPITAL Q） | |
| ℛ | 8475 | 211B | 脚本大写 R（SCRIPT CAPITAL R） | |
| ℜ | 8476 | 211C | ℜ | 黑体字大写 R（BLACK-LETTER CAPITAL R） |
| ℝ | 8477 | 211D | 双重大写 R（DOUBLE-STRUCK CAPITAL R） | |
| ℞ | 8478 | 211E | PRESCRIPTION TAKE | |
| ℟ | 8479 | 211F | 响应（RESPONSE） | |
| ℠ | 8480 | 2120 | 服务标记（SERVICE MARK） | |
| ℡ | 8481 | 2121 | 电话标志（TELEPHONE SIGN） | |
| ™ | 8482 | 2122 | ™ | 商标符号（TRADE MARK SIGN） |
| ℣ | 8483 | 2123 | VERSICLE | |
| ℤ | 8484 | 2124 | 双重大写 Z（DOUBLE-STRUCK CAPITAL Z） | |
| ℥ | 8485 | 2125 | 盎司符号（OUNCE SIGN） | |
| Ω | 8486 | 2126 | 欧姆符号（OHM SIGN） | |
| ℧ | 8487 | 2127 | 倒置的欧姆符号（INVERTED OHM SIGN） | |
| ℨ | 8488 | 2128 | 黑体字大写 Z（BLACK-LETTER CAPITAL Z） | |
| ℩ | 8489 | 2129 | 反转倒置的希腊小写字母 IOTA（TURNED GREEK SMALL LETTER IOTA） | |
| K | 8490 | 212A | 开尔文符号（KELVIN SIGN） | |
| Å | 8491 | 212B | 埃符号（ANGSTROM SIGN） | |
| ℬ | 8492 | 212C | 脚本大写 B（SCRIPT CAPITAL B） | |
| ℭ | 8493 | 212D | 黑体字大写 C（BLACK-LETTER CAPITAL C） | |
| ℮ | 8494 | 212E | 估算符号（ESTIMATED SYMBOL） | |
| ℯ | 8495 | 212F | 脚本小写 E（SCRIPT SMALL E） | |
| ℰ | 8496 | 2130 | 脚本大写 E（SCRIPT CAPITAL E） | |
| ℱ | 8497 | 2131 | 脚本大写 F（SCRIPT CAPITAL F） | |
| Ⅎ | 8498 | 2132 | 反转倒置的大写 F（TURNED CAPITAL F） | |
| ℳ | 8499 | 2133 | 脚本大写 M（SCRIPT CAPITAL M） | |
| ℴ | 8500 | 2134 | 脚本小写 O（SCRIPT SMALL O） | |
| ℵ | 8501 | 2135 | ℵ | 阿勒夫符号（ALEF SYMBOL） |
| ℶ | 8502 | 2136 | 平衡发射极晶体管符号（BET SYMBOL） | |
| ℷ | 8503 | 2137 | GIMEL 符号（GIMEL SYMBOL） | |
| ℸ | 8504 | 2138 | 德莱符号（DALET SYMBOL） | |
| ℹ | 8505 | 2139 | 信息源（INFORMATION SOURCE） | |
| ℺ | 8506 | 213A | 旋转的大写 Q（ROTATED CAPITAL Q） | |
| ℻ | 8507 | 213B | 传真符号（FACSIMILE SIGN） | |
| ℼ | 8508 | 213C | 双重小写 PI（DOUBLE-STRUCK SMALL PI） | |
| ℽ | 8509 | 213D | 双重小写 GAMMA（DOUBLE-STRUCK SMALL GAMMA） | |
| ℾ | 8510 | 213E | 双重大写 GAMMA（DOUBLE-STRUCK CAPITAL GAMMA） | |
| ℿ | 8511 | 213F | 双重大写 PI（DOUBLE-STRUCK CAPITAL PI） | |
| ⅀ | 8512 | 2140 | 双重 N 元的总和（DOUBLE-STRUCK N-ARY SUMMATION） | |
| ⅁ | 8513 | 2141 | 反转倒置的无衬线的大写 G（反转倒置的无衬线的大写（TURNED SANS-SERIF CAPITAL G） | |
| ⅂ | 8514 | 2142 | 反转倒置的无衬线的大写 L（TURNED SANS-SERIF CAPITAL L） | |
| ⅃ | 8515 | 2143 | 反转的无衬线的大写 L（REVERSED SANS-SERIF CAPITAL L） | |
| ⅄ | 8516 | 2144 | 反转倒置的无衬线的大写 Y（TURNED SANS-SERIF CAPITAL Y） | |
| ⅅ | 8517 | 2145 | 双重的斜体大写 D（DOUBLE-STRUCK ITALIC CAPITAL D） | |
| ⅆ | 8518 | 2146 | 双重的斜体小写 D（DOUBLE-STRUCK ITALIC SMALL D） | |
| ⅇ | 8519 | 2147 | 双重的斜体小写 E（DOUBLE-STRUCK ITALIC SMALL E） | |
| ⅈ | 8520 | 2148 | 双重的斜体小写 I（DOUBLE-STRUCK ITALIC SMALL I） | |
| ⅉ | 8521 | 2149 | 双重的斜体小写 J（DOUBLE-STRUCK ITALIC SMALL J） | |
| ⅊ | 8522 | 214A | 地界线（PROPERTY LINE） | |
| ⅋ | 8523 | 214B | 反转倒置的符号（TURNED AMPERSAND） | |
| ⅌ | 8524 | 214C | PER 符号（PER SIGN） | |
| ⅍ | 8525 | 214D | AKTIESELSKAB | |
| ⅎ | 8526 | 214E | 反转倒置的小写 F（TURNED SMALL F） | |
| ⅏ | 8527 | 214F | 撒玛利亚源符号（SYMBOL FOR SAMARITAN SOURCE） |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
