HTML
一、HTML5是什么
HTML5就是html语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。
注：.html文件可以双击直接在浏览器中打开，被浏览器解析被显示给用户查看
标记语言不同于我们熟知的编程语言，下面我们就一起来学习一下HTML5这门超文本标记语言。
二、HTMl5常用标签
2.1 转义字符
像后台开发语言的特殊字符\n一样，会被解析为换行，html5中也有很多特殊字符数字的组合，会被解析为特殊的含义
1. 空格： 2. 字符"：" 3. 字符&：& 4. 字符<：< 5. 字符>：>
2.2 指令
被<>包裹，以!开头的特殊符号，称之为指令。
1. 文档指令：<!DOCTYPE html>
-- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的
2. 注释指令：<!-- -->
-- <!-- 这里书写的就是html5语法下的注释，不会被浏览器解析展现给用户看 -->
2.3 标签
被<>包裹，以字母开头，可以结合数字、-连接符等合法字符的特殊字符，称之为标签
标签中不区分大小写，帮助我们来更好的显示页面内容，标签有系统标签与自定义标签两种，html5中建议使用系统标签，标签名都采用小写即可。
提倡规范命名的合法自定义标签 <num></num> <my-tag><my-tag> <student1></student1>
2.3.1 页面结构相关的系统标签
1. 页面根标签：<html></html> 2. 页面头标签：<head></head> 3. 页面体标签：<body></body> 4. 页面标题标签：<title></tile> 5. 元标签：<meta /> 6. 链接标签：<link /> 7. 样式标签：<style></style> 8. 脚本标签：<script></script>
2.3.2 简单的系统标签
1. 标题标签：<h1></h1> ... <h6></h6> 2. 段落标签：<p></p> 3. 换行标签：<br /> 4. 分割线标签：<hr /> 5. 行文本标签：<span></span> 6. 斜体标签：<i></i> 7. 加粗标签：<b></b> 8. 图片标签：<img /> 9. 超链接标签：<a></a> 7. "架构"标签：<div></div>
2.3.3 复杂的系统标签
1. 无需列表标签：<ul><li></li></ul> 2. 表格标签：<table><!-- 包含大量的表格子标签 --></table> 3. 表单标签：<form><!-- 包含大量的表单子标签 --></form>
2.4 案例一：
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>第一个html页面</title> <style></style> <script></script> </head> <body> </body> </html>
2.4.2 有注释版
<!--文档指令，建议出现在html文件的最上方，一个html文件只出现一次，html表示该文件采用html5语法进行编写--> <!doctype html> <!-- 页面根标签的开始标识，一个html文件只出现一次 --> <html> <!-- 页面头标签的开始标识，一个html文件只出现一次 --> <head> <!-- 规定文件编码的元标签，因为元标签只需要标注具体功能，不需要包裹内容，所以代表标签结束的/写在标签的最后即可(可以省略)， --> <meta charset='utf-8' /> <!-- 页面标题标签，用来显示页面标签标题，如登录百度页面，页面标签标题显示: 百度一下，你就知道 --> <title>第一个html页面</title> <!-- 用来存放出现在head中的CSS3样式代码的标签(CSS3部分详细介绍) --> <style></style> <!-- 用来存放出现在head中的JavaScript脚本代码的标签(JavaScript部分详细介绍) --> <script></script> <!-- 页面头标签的结束标识，与页面头标签的开始一同包裹应该出现在页面头标签中的内容 --> </head> <!-- 页面体标签的开始标识，一个html文件只出现一次 --> <body> <!-- 页面中所有显示给用户查看的内容：普通文本、图片、音频及视频等 --> <!-- 也会出现不显示给用户查看的内容：简单与复制的系统标签、脚本标签及影藏的内容等 --> <!-- 页面体标签的结束标识，与页面体标签的开始一同包裹页面主体部分所有显示给用户查看的内容(还包含其他不显示的内容) --> </body> <!-- 页面根标签的结束标识，页面的所有内容都应该出现在html标签内部（被html标签开始与结束包裹） --> </html><!-- 关键词元元标签，让该页面更容易被百度这样的搜索引擎通过关键词搜索到 --> <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语"> <!-- 网页描述元标签，也是辅助于让页面更容易被搜索引擎搜索到 --> <meta name="description" content="80字以内的一段话，介绍该网站"> <!-- 屏幕适配元标签，让该页面适配移动端屏幕尺寸 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 设置页面标签图片链接标签 --> <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
2.5.1 只用关注显示效果的简单系统标签
<!-- 简单的系统标签及控制的内容都应该出现在body标签中，以下写的内容都可以直接书写在body标签中，然后可以在浏览器中打开该html文件查看显示效果 --> <h1> 在页面上显示的大字加粗的一级标题标签 </h1> <h2> 在页面上显示的二级标题标签 </h2> <!-- 省略h3~h5的案例 --> <h6> 六级标题标签 </h6> <p> 一个页面显示的文本段落放在一个p标签中 </p> 直接写在页面中的手动敲的换行不会被浏览器解析为换行，换行符采用br标签 <br /><!-- 可以注释掉br标签查看上下两句话前后的显示效果 --> 用了br标签，浏览器就会解析出一个换行 <hr /> 在这行文本上下各书写一个hr标签，浏览器打开显示时，这行文本上下均有一个分割线 <hr /> <span>在页面中的显示文本除了可以写在标题标签(h1~h6)和段落标签(p)中，其他都建议写在span标签中</span> <span>不同于标题标签和段落标签的是两个span标签之间不会换行显示，而是在一行显示，一行显示不下时会自动换行(可以缩放浏览器宽度查看效果)</span> <span><i>斜体显示的文本，建议被span标签嵌套</i><b>加粗显示的文本，建议被span标签嵌套</b></span> 8. 图片标签：<img /> 9. 超链接标签：<a></a> 7. "架构"标签：<div></div>
2.5.2 功能是显示图片的简单系统标签
<!-- 加载显示网络图片 --> <img src="http://www.baidu.com/favicon.ico" /> <!-- 图片加载失败是，标签alt全局属性中的文本将显示出来作为图片资源加载失败的文本解释 --> <img src="http://www.baidu.com/favicon.ico_error" alt="百度图标" /> <!-- 通过相对路径加载本地图片，title中的文本会在鼠标先显示的图片上悬浮时，显示出来作为图片显示的文本解释 --> <img src="img/bd_logo.png" title="百度logo" />
2.5.3 功能是完成超链接的简单系统标签
<!-- 全局属性href中写超链接的目标地址，点击页面中显示的 前往百度，会在当前页面转跳到百度的首页 --> <a href="https://www.baidu.com">前往百度</a> <!-- 点击页面中显示的 "前往百度"，标签target全局属性中值为_blank时会新开一个标签页面转跳到百度的首页，默认值是_self，效果同第一种 --> <a href="https://www.baidu.com" target="_blank">前往百度</a> <!-- 锚点的使用，来完成一个浏览网页，返回网页顶部的案例 --> <!-- 种下锚点：该a标签不能在页面中显示文本，用全局属性name来种下一个叫top的锚点 --> <a name="top"></a> <!-- 许许多多页面中其他的显示内容，也可以用一堆br标签来让页面可以滚动起来 --> <!-- 返回锚点：href中用 #锚点名 来表示要前往的锚点，点击 "返回top" 会自动回到页面顶 --> <a href="#top">返回top</a>
2.5.4 功能是专门用来搭建页面架构的简单系统标签
1. div标签没有特殊的显示效果，也没有特殊的功能，所以是最常用的标签
2. 通过建立标签的嵌套关系专门用来为页面搭建架构，在有层次架构下，我们的页面才会分块分级的更好的展现给用户
3. 根据页面的设计稿能很好的构思页面架构，并用div很好的还原页面架构，就是我们学习html语言的重点
4. 还原页面架构后，具体用来显示图片、文本还是其他内容，我们就选取具体的标签来显示这些内容
<ul> <li>列表项</li> <!-- 多少列表项就可以出现多少个li标签 --> <li>列表项</li> </ul> <!-- 无需列表只需要掌握ul与li的嵌套关系，样式的调整会在CSS3详细介绍 -->
2.6.2 表格标签
<table border="1" cellspacing="0" cellpadding="10"> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td rowspan="2">单元格</td><!-- 合并2行单元格 --> <td colspan="2">单元格</td><!-- 合并2列单元格 --> <!-- <td>单元格</td> --><!-- 该列单元格被合并 --> <td>单元格</td> </tr> <tr> <!-- <td>单元格</td> --><!-- 该行单元格被合并 --> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> <!-- 标签部分： 1. table表格标签 2. caption表格标题标签 3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写 4. tr表格行标签 4. th表格标题单元格标签，td表格普通单元格标签 全局属性部分： 1. border表格的边框宽度 2. cellspacing单元格直接的间距 3. cellpadding单元格内部的间距 4. rowspan合并行单元格 5. colspan合列行单元格 -->
2.6.3 表单标签
<form actio="" method="" enctype=""> <label></label> <input type="text" name="user"> <input type="password" name="pwd"> <select name="list"> <option value="val1">列表项</option> <option value="val2">列表项</option> </select> <textarea></textarea> <button type="button">按钮</button> <input type="submit" value="提交"> </form> <!-- 标签部分： 1. from表单标签 2. 普通文本标签 3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签 4. select表单中的列表标签，option列表项标签 5. textarea文本域标签 6. button按钮标签 form全局属性 1. action：提交表单数据给后台的地址 2. method：提交数据的方式(get或post) 3. enctype：提交数据的编码格式 form子标签全局属性 1. type：标签的类型 2. name：将该标签提交给后台标识数据的key (不设置name的标签的内容无法提交给后台) 3. value：该标签提交给后台的数据或是该标签的显示内容 input标签tpye属性值与分类 1. text：普通文本输入框 2. password：密文文本输入框 3. radio：单选框，该类型input标签有个全局属性checked，属性值省略，代表单选框默认选中状态 4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby 5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台 6. submit：提交表单信息给后台，用value设置提交按钮的显示内容 button标签tpye属性值与分类 1. button：不同按钮，默认点击后无任何操作 2. reset：重置按钮，默认点击后会还原表单的所有操作 3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台 -->
2.7 常用标签常用点总结
a标签:链接标签 可以通过href跳转到指定的网址 锚点功能:回到顶部 <a href="" id="a1">top</a> <a href="#a1">bottom</a> ps：target属性用来控制是否在当前页面跳转 默认是_self当前页 也可以指定成_blank新建页面跳转 所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础 也就意味着同一份html中标签的id不能重复，不写id属性也是可以的 img标签 src图片路径:即可以是网络上的图片地址也可以是本地的图片地址 alt当图片加载失败之后自动展示的提示信息 title鼠标悬停在图片上时显示的文本 图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放 列表标签 ul:无序列表 ol：有序列表 dl：标题列表 表单标签 固定就以下面的格式书写 <table> <thead></thead> <tbody></tbody> </table> tr 一个tr表示一行 border调整列表的边框 cellspacing 调单元格与外边框之间的距离 cellpadding 调文本与单元格之间的距离 rowspan 垂直方向合并 colspan 水平方向合并 form表单 功能:获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端 form表单中只有input的type类型为submit才会触发提交信息的动作 如果不想通过input标签来触发提交动作 那么可以直接写一个<button>button按钮</button> input 通过控制type的类型从而实现不同的获取用户输入的标签样式 text 普通文本 password 密文 date 日历 radio 单选框 checkbox 多选框 file 获取文件 submit 触发提交数据的行为 button 普通的按钮 reset 重置form表单内容 select 选择框 默认是单选的 可以通过multiple参数将单选变为多选 一个option就是一个选项 textarea 获取用户大段文本值 form表单中几个重要的属性 action:用来控制数据到底提交给谁 写url来指定提交给谁 form表单默认是get请求 可以通过method属性修改提交方法 form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型 你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值 form表单发送文件 需要修改enctype属性的值 默认是urlencoded不支持传输文件 需要将其修改为multipart/form-data
<!DOCTYPE html> <!-- html 页面标签 lang='en' 告诉浏览器页面的语言--> <html lang="zh"> <head> <!-- 页面编码 --> <meta charset="UTF-8"> <!-- 页面标签标题--> <title>day50页面标签标题</title> <!-- 页面样式--> <style></style> <!-- 页面脚本--> <script></script> </head> <!-- body：体标签 - 页面内容、页面脚本 --> <body> <!-- 用于内容显示的标签全部书写在body中 --> <hr> <h1 >一级标题</h1> <!-- 一般一个页面只出现一次，代表该页面的主内容解释 --> <h6 >六级标题</h6> <!-- 段落：p --> <p>段落</p> <!-- 文本相关：一般会被p标签嵌套 --> <!--span标签，普通格式标签--> <span>span标签</span> <!--<br>： 换行标签--> <br> <b>加粗标签</b> <strong>以加粗方式强调的标签</strong> <br> <i>斜体标签</i> <em>以斜体方式强调的标签</em> <br> <sup>上角标</sup> <sub>下角标</sub> <!-- 超链接：a href="链接地址" target="_self"在当前窗口下打开 ,"_blank"在新窗口打开--> <a href="https://www.baidu.com" target="_self">前往百度</a> <a href="https://www.baidu.com" target="_blank">前往百度</a> <a href="预习/a.html" target="_blank">超链接到自定义界面</a> <!-- 图片标签： src:图片源 alt: 资源加载失败文本提示 title: 鼠标炫富的文本提示 src,alt,title 顺序可以随便--> <img title="新垣结衣" alt="新垣结衣" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1416784794,1465922537&fm=26&gp=0.jpg" > <!-- 组合标签--> <!-- 列表--> <!-- ul>li{列表项} * 3 : 快速生成3项列表(无序列表)--> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <!-- ul>li{列表项} * 3 : 快速生成3项列表(有序列表)--> <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol> <!-- 表格标签 --> <!-- border: 边框粗细 tr: 行 th: 标签单元格 td:内容单元格 cellpadding:单元格内部间距 cellspacing:单元格间的间距 --> <table border="2" width="500" height="300" cellpadding="10" cellspacing="10"> <thead> <tr style="height: 50px"> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <!-- colspan:合并列的2个单元格--> <!-- rowspan:合并行的2个单元格--> <td colspan="2">单元格</td> <td rowspan="2">单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr style="height: 10px"> <td >单元格</td> <td colspan="2">单元格</td> </tr> </tfoot> </table> <!-- 表单标签: 用于完成前后台数据交互--> <!-- form action: 提交后台的接口地址 method: 提交方式（get(速度快，不安全), post(速度慢，安全)）--> <form action="" method="get"> <input type="text" name="user" placeholder="默认显示文本占位符"> <input type="password" placeholder="密码"> <input type="color" placeholder="背景颜色"> <input type="number" placeholder="数字"> <input type="file"> <!-- 提交文件 --> <hr> <!--radio:单选框 checked:默认选项--> 男 <input type="radio" name="sex" checked> 女 <input type="radio" name="sex"> <!-- 复选框 --> <input type="checkbox" value="m" name="like" checked> <input type="checkbox" value="f" name="like" checked> 人妖 <input type="checkbox" value="mf" name="like"> <br> <br> <!-- 选择列表 muitiple: 可以多项操作--> <select name="subject" multiple> <option value="python">python</option> <option value="linux">linux</option> <option value="go">go</option> </select> <!-- textarea：文本域 就是画出一个框框，可以在里面填内容--> <textarea name="123" id="123" cols="30" rows="10"></textarea> <!-- button 按钮--> <button type="button">无用</button> <button type="reset">重置</button> <button type="submit">提交</button> </form> <!--页面脚本--> <script></script> </body> </html>
浙公网安备 33010602011771号