HTML基本语法及常用标签
0序言：
html文件可使用任意编辑其，最终把文件后缀名改为.html即可(txt等。推荐notepad++)，文末有文中所用所有html示例文件的下载地址。
文章目录（快速链接）：
一、HTML文档结构
- html文档框架及解释
<!doctype html> //指定文档类型 <html> //html开始标签 <head> //头开始标签 </head> //头结束、、 <body> //身体开始标签 </body> //身体结束、、 </html> //html结束标签
- 基本框架运行效果（空白页）
- html文档的注释
- 在上述中以 // 为html注释是不可运行的，在html中有其独特的注释方式：
<!-- 我是一个注释 --> <!doctype html> <html> <head> </head> <body> </body> </html>
- 在上述中以 // 为html注释是不可运行的，在html中有其独特的注释方式：
二、HTML语法
html的标签是定义好的标记，用来控制页面显示的内容（文字、列表、图像等），通过定义标签的属性可以定义网页的内容样式。
标签分为单标签和成对标签
-
- 单标签
<!--这是个换行标签--> <br>
- 成对标签
<!--字体标签--> <font size = "5" color = "red" face = "楷体">红色字体</font>
- 单标签
三、HTML常用标签实例
- meta标签（单标签）
- meta标签属于head标签的子标签，有http-equiv（用于指定协议头类型） 和 content（用于指定头类型的值） 两大部分
- content的值有多个时用；隔开（如refresh类型content的值）
- http-equiv类型总结:
- content-type: 用于定义用户的浏览器或相关设备以何种方式加载数据(指定网页的编码方式)。
<!doctype html> <html> <head> <!--meta作用：指定text/html（普通网页打开资源），编码方式为UTF-8--> <meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8"/> </head> <body> </body> </html>
- content-language:用于指定页面的编码方式，此值也可包含在content-type协议头中（如上定义了UTF-8）：
<!--meta作用：指定编码方式为UTF-8--> <meta http-equiv = "Content-language" content = "charset = UTF-8"/>
- refresh：用于指定页面的刷新或转跳的间隔时间和转跳的资源。
<!--meta作用：3s后跳转到我的github上里面有本文所用到的所有html文件--> <meta http-equiv = "refresh" content = "3; url = https://github.com/Sunrisepeak/webLearning/tree/master/HTML"/> <!--meta作用：每3s刷新页面一次--> <meta http-equiv = "refresh" content = "3"/>
- expires：用于指定缓存过期时间。缓存一旦过i就，当有客户请求页面时，必须从服务器上重新下载。
- pragma与no-cache：
<!--表示禁止浏览器从本地计算机的缓存中访问页面内容，这样将无法实现脱机访问--> <meta http-equiv = "pragma" content = "no-cache"/>
- set-cookie:
<!--设置cookie,浏览器访问某个页面时会将cookie保存在缓存中，在下次访问可以从缓存中读取，以提高速度。必须用GMT格式指定cookie过期时间--> <meta http-equiv = "set-cookie" content = "cookievalue = xxx; expires = Mon,12 May 2001 00:20:00 GMT"/>
- content-type: 用于定义用户的浏览器或相关设备以何种方式加载数据(指定网页的编码方式)。
-
- name类型：
- keywords：为搜索引擎提供关键字列表。
<meta name = "keywords" content = "key1,key2,key3....."/>
- description：为搜索引擎提供网页的主要内容的描述。
<meta name = "description" content = "网页描述信息"/>
- author：标明网页的制作者。
- robots：用于提示那些页面需要索引，那些页面不需要索引。
<!-- content的值： all 文件将被检索，且页面上的链接可以被查询 none 文件将不被检索，且页面上的链接不可以被查询 index 文件将被检索 follow 页面上的链接可以被查询 noindex 文件将不被检索，但页面上的链接可以被查询 nofollow 文件将被检索，但页面上的链接不可以被查询 -->
- keywords：为搜索引擎提供关键字列表。
- name类型：
2.title标签:<title></title>
-
- title.html
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>快看标题栏</title> </head> <body> </body> </html>
- title.html
3.文本标签
-
- 字体标签实例<font></font>,(成对标签 可定义color 、 size 、face属性)
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv = "content-language" conetnt = "charset=UTF-8"> <title>font 标签的使用示例</title>
</head> <body> <font size = "+5" color = "blue" face = "楷体">这是蓝色五号楷体</font> <br/> <font size = "4" color = "#FF0000" face = "隶属">这是红色四号隶属</font> </body> </html>
- 字体标签实例<font></font>,(成对标签 可定义color 、 size 、face属性)
-
- 标题标签实例:<hx></hx>,标题属于块级元素，浏览器会自动在标题前后加上空行。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题标签的使用的实例</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>
- 换行标签：<br/>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>换行标签的使用</title> </head> <body> <!--单标签只起换行作用，没有相互关系--> 春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少 </body> </html>
- 段落标签：<p align = "x"></> , x =(center,left,right)--------------也可单独使用O
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>段落标签使用实例</title> </head> <body> <!--成对标签，align属性的值为居中（center）--> <p align = "center">春晓</p> <p align = "center"> 春眠不觉晓<br/>处处闻啼鸟<br/>夜来风雨声<br/>花落知多少 </p> <p align = "right"> 我是单独使用的例子 </body> </html>
- 特殊字符：----------------https://blog.csdn.net/pierre_/article/details/51306393
- 标题标签实例:<hx></hx>,标题属于块级元素，浏览器会自动在标题前后加上空行。
4.列表标签：分有序列表和无序列表两类，通常结合使用。
-
- 无序列表：使用<ul>定义，列表项使用<li>定义，列表项的内容位于一对<li>标签之内。<li>标签有属性type(disc 默认值；为实心圆；circle为空心圆；square为实心方块)
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>无序列表的使用实例</title> </head> <body> 常见的体育运动有：<br/> <ul> <!--默认--> <li>篮球</li> <!--实心圆--> <li type = "disc">P球</li> <li type = "circle">pingPang球</li> <!--实心方块--> <li type = "square">zHu球</li> </body> </html>
- 有序列表：<ol> 其有type属性可指定有序列表的项目符号类型。
type属性各值的含义 type值 说明 a 按小写字母有序排列 A 按大写字母有序排列 i 按小写罗马数字有序排列 I 按大写罗马数字有序排列 1 默认值，数字有序列表 - 实例：
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>有序列表的使用实例</title> </head> <body> <ol> <li>春思</li> <li>望岳 <ol type = "i"> <li>岱宗夫如何，齐鲁青为了。</li> <li>造化钟声秀，阴阳割分晓。</li> <li>荡胸生层云，决眦入归鸟。</li> <li>会当凌绝顶，一览众山小。</li> </ol> </li> <li>送别</li> <li>静夜思</li> </ol> </body> </html>
- 定义列表：<dl>标签通常与<dt>标签和<dd>标签配套使用。<dt>标签用于定义列表项，<dd>标签用于描述列表项。
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>定义列表的使用示例</title> </head> <body> <dl> <dt>HTML</dt> <dd>是一种设计静态网页的超文本标记语言</dd> <dt>JavaScript</dt> <dd>是一种客户端脚本语言</dd> <dt>Java</dt> <dd>是一种面向对象的，平台无关的高级程序语言</dd> </dl> </body> </html>
- 分隔线标签：<hr>可以在HTML页面中创建一条水平线，可以分隔文档（一般不推荐直接使用）。
<hr>标签的属性 属性 取值 说明 align center、left、right 设置hr元素的对齐方式 noshade noshade 设置hr元素为纯色，无阴影 size pixels hr元素的高度 width pixels、% hr元素的宽度
- 无序列表：使用<ul>定义，列表项使用<li>定义，列表项的内容位于一对<li>标签之内。<li>标签有属性type(disc 默认值；为实心圆；circle为空心圆；square为实心方块)
5.超链接标签☚
| _blank | 在新窗口中代开目标资源 |
| _self | 默认值，在当前的窗口或框架中打开目标资源 |
| _parent | 在父框架集中打开目标资源 |
| _top | 在整个窗口中打开目标资源 |
| framename | 在指定的框架中打开目标资源 |
-
- href.html
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" Content = "text/html;charset = UTF-8"/> <title>文本链接实例</title> </head> <body> 常用的门户网站有： <ul> <li><a href = "http://www.sina.com" >新浪</a></li> <li><a href = "http://www.baidu.com" >百度</a></li> <li><a href = "https://www.cnblogs.com/sunrisepeak/" >Blog</a></li> <li><a href = "https://github.com/Sunrisepeak/webLearning" target = "_blank">HTML源码</a></li> </ul> </body> </html>
- href.html
2.锚链接：通过定义锚点，在通过类似文本连接的方式到达指定位置（通常用于页面较长时返回 顶部 或 底部 或 指定位置）。
-
-
- 锚点格式：
<!--定义锚点，有一个name属性做标志--> <a name = "..."></a>
- 锚链接格式：
<!--用#后跟要跳转网页位置目标锚点的name属性值--> <a href = "#...">文本</a>
- anchor.html: 通过在网页中不同位置定义锚点，实现跳转。
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" Content = "text/html;charset = UTF-8"/> <title>锚链接实例</title> </head> <body> <a name = "head"></a> <!--这个font标签可有可无，此处为提示信息--> <font size = "+5" color = "ff8890">首页(我上面定义了一个锚点head)</font><hr> <!--用#后跟要跳转网页位置目标锚点的name属性值--> <a href = "#tail">至页尾</a> <h1>1111111111</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>1</h1> <h1>11111111111111</h1> <a name = "tail"></a> <a href = "#head">至页首</a> </body> </html>
- 锚点格式：
-
3.电子邮箱链接：也是使用<a>标签来实现，要发送电子邮件地址由mailto指定，表示要发送电子邮件的文本链接由<a>标签内的文字指定。
-
-
-
<a href = "mailto:yanfeng@163.com">给言峰发送邮件</a>
-
-
4.其他链接：
- 下载链接：指把超链接的href指定的目标资源不是上述资源，而是文件（图片、文本、视频等）。此时单击超链接，会出现保存或打开文件的窗口，可将资源下载到本地磁盘（href中的图片资源链接可用相对路径或绝对路径）
<a href = "图片名.jpg">下载</a>
- 下载链接：指把超链接的href指定的目标资源不是上述资源，而是文件（图片、文本、视频等）。此时单击超链接，会出现保存或打开文件的窗口，可将资源下载到本地磁盘（href中的图片资源链接可用相对路径或绝对路径）
2. 空链接：用于向页面上的对象或文本附加行为（当鼠标划过该链接时执行相应的操作，一般结合Javascript使用）。
-
-
- 实现1（如果用户单击了空链节，会重置到首页）：
<a href = "#">单击会自动重置到首页</a>
- 实现2（不会重置）：
<a href = "JavaScript:;">空链接</a
- 实现1（如果用户单击了空链节，会重置到首页）：
-
-
3. 脚本链接：直接将href属性设置为JavaScript脚本或者JavaScript函数，当单击超链接时，即执行相应的脚本或函数（一般用于执行计算、验证表单、或处理其他任务）。
-
-
-
-
-
- 实例（href属性为JavaScript函数）:
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>脚本链接使用实例</title> </head> <body> <a href = "javascript:alert('我是Javascript的警告框函数');">脚本链接</a> </body> </html>
- 实例（href属性为JavaScript函数）:
-
-
-
-
6.图像标签
-
- 图像标签可以在网页中链接图像，在网页中显示效果可由其标签属性进行定义。
- <img>格式：属性src和alt是必需的。src：指引用图像的URL(一般用相对路径)；alt：指图像的替代文本（当src错误，或网速太慢导致的图像加载失败时会显示替代文本）；height：指图像的高度；width：表示图像的宽度。
<img src = "..." alt = "..." height = "..." width = "..."/>
- <img>使用实例(图片资源)：
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "charset = UTF-8"/> <title>图片标签使用实例</title> </head> <body> <img src = "sunrise.png" alt = "图片加载失败" height = "200" width = "400"/> </body> </html>
全文html示例文件下载地址☛：点我