一路慢行的HTML5之旅！
一、HTML5的概念
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
二、HTML5文档的结构
HTML文档主要包括三大部分：文档声明部分、
头部部分、主体部分。DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我的第一个网页title>head><body>body>
html>
三、HTML5的基本标签
1、《head部分》：head中，主要放一些关于网页设置的相关语句。
1.1、meta标签
meta标签描述文档类型和编码、可以描述网页的关键字keywords和描述description。
meta标签常用属性：
1.1.1charset：设置文档的字符集编码格式
比如说Html5中设置字符集编码
>>>常见的几种字符集编码格式：
a.UTF-8 ：万国码，又称 Unicode8（此外还有Unicode16）。常用！
b.GB-2312 ：国标码。
c.GBK ：扩展的国标码。
1.1.2 http-equiv:将信息写给浏览器看，让浏览器按照这里面的要求执行，需要配合content属性使用。
（http-equiv属性只是表明需要设置那一部分，具体的设置内容，放到content属性中）。
可选属性值： Content-Type（文档类型） refresh（自动刷新）set-Cookie(设置浏览器cookie缓存) 。
1.1.3 name：使用方法同"http-equiv"将我们的信息写给搜索引擎看的。
常用且需要掌握的属性值：author（作者）keywords（关键字）description（网页描述）。
1.2、title标签
title：网页的标题，即网页的选项卡上的文字
1.3、link标签
link：链接网页与其他文件。
举个例子：
DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="author" content="http://www.xxxxx.com"/><meta name="keywords" content="HTML5,网页,web前端开发"/><meta name="description" content="这是我的第一个网页"/><title>我的第一个网页title><link rel="icon" href="ivicon.png">head><body>body>html> 其中，
1.name="keywords" 表示当前语句用于设置网页关键字 content="表示网页的关键字内容。多个关键字之间用英文逗号分隔"；
2.name="description" 设置网页描述： content="网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页的描述内容"；
3. ①链接网页小图标：选项卡上的小图片；②rel属性：选择icon，表示链接的文件，将作为网页的icon图标。③href属性：选择图片所在的路径地址。
2、主体部分：body中的内容，会显示在浏览器的展示区域。
2.1、标签分类
1、从功能上，HTML标签，分为“块级标签”和“行级标签”。
【块级标签和行级标签的区别】
① 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示；
② 块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开；
③ 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性；
2、从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)”
① 成对标签： 成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。 例如：
② 自闭合标签/空标签： 只有一个标签，用/表示标签的自动闭合（/可以省略）。例如：
2.2常用的块级标签
a. h标签：标题标签，默认加粗，h1最大，h6最小。
b. hr标签： 水平线标签。
c. p标签： 段落标签，表示网页中的一段文字。
d. br标签： 换行符号，在代码中敲回车，在网页中并没有作用。必须使用
断行
e. blockquote:引用标签。表示标签中的文字是引用自其他网站的内容。 浏览器默认显示效果：整段向后缩进；cite属性：表示引用内容的来源，常写引用的网址URL
f. pre标签：预格式标签。 与p标签不同的是，pre标签会保留代码中的空格和回车，在网页直接显示。
最常用的作用，是在网页中显示代码段，保留代码段格式。
举个例子：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>常见的块级标签title>head><body><h1>h1标题标签h1><h2>h2标题标签h2><h3>h3标题标签h3><h4>h4标题标签h4><h5>h5标题标签h5><h6>h6标题标签h6><hr/><p>这是段落标签，=w= <br />这里是一段文字p><blockquote cite="此处一般为网址">物竞天择，适者生存blockquote><pre>哈哈哈哈哈哈哈哈pre>body>
html> 2.3基于布局的块级标签
列表:无序列表、有序列表、定义列表（图文结合）。
a.有序列表
- （order list缩写）
- ... 列表项可以有n多个
- ...
- ...
b.无序列表
- (unorder list)
- ... n多个
- ...
- ...
c.定义描述列表
- 一般只有一项 （列表标题）（标题顶格显示）
- 可以有很多项 （列表描述项）（描述项相对标题缩进显示）
- 。。。。。
- 。。。。。
d.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。
图片
e.分区标签
可以包裹任何标签，也可以被包裹进任何标签。
举个例子：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基于布局的块级标签title>head><body><ol><li>这是第一项li><li>这是第二项li><li>这是第三项li>ol><ul><li>无序1li><li>无序2li><li>无序3li>ul><dl><dt>这是定义列表的标题dt> <dd>这是描述项1dd> <dd>这是描述项2dd><dd>这是描述项3dd>dl><figure><img src="../img/ivicon.png"/><figcaption>这是图片标题figcaption>figure><div style="width:100px ;height: 20px;background-color: blue;">这是一个divdiv>body>
html> 2.4、分级标签
行级标签主要有：
举个例子：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>常见的行级标签title>head><body><a name="top">a><span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字（作用：无实际意义，对于某些<span style="color: blueviolet;">特别的文字span>进行样式修改时用此标签包裹）span><br />这是一句话，<em>重点em>在这里<br />这是一句话，<i>重点i>在这里<br />这是一句话，<strong>重点strong>在这里<br />这是一句话，<b>重点b>在这里<br /><q cite="">知识短引用中的文字q><br/><small>这个<small>比上面的<small>小small>small>small><br/><big>这个<big>比上面的<big>大big>big>big><br /><img src="此处为网络地址"/><img src="此处为路径"/><img src="../img/ivicon.png"/><img src="ivicon.png" /><img src="练习用图/ivicon.png" /><a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="这里没显示"/>a><br /><img src="QQ图片20170223092045.jpg"/ align="center">12333333333<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><a href="#weixin" target="_self">这是一个超链接，去看微信的a><a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一，自身跳转的a><a href="mailto:xxxxxxx@qq.com">这里发邮件a><a href="tencen://message/?uin=xxxxxxx">这里发信息a><a href="ivicon.png" target="_blank">picturea>body>
html> 2.5 表格
2.5.1 表格的结构
表格元素：行 列 格
表格
表格的行
每行中的列
表格的表头
2.5.2 table的常见属性
1.border 边框，其增大时，只增加外围框线，单元格边框始终为1像素
2.cellspacing 单元格之间的间隙距离,当=0的时候，只会是单元格的
间隙等于0，但不会合并边框线，此时表格中线为两个像
素，若想使其合并，则★使用★
3.cellpadding 单元格里边的文字与边框线的距离(不常用)
4.width height 宽度和高度
5.align 表格的对齐方式
【left right center】
【注意事项：相当于让表格浮动，会影响其后的元素的原有排列方式】
6.bgcolor 单元格的背景色，等同于style="background-color:;"
7.background 单元格的背景图片,等同于style="background-image:;"
且背景图会覆盖背景色
8.bordercolor 边框的颜色
2.5.3 tr td（th）相关属性
1.width height 单元格的宽度和高度
2.bgcolor 单元格的背景颜色
3.align (left right center)单元格中的文字水平对齐方式(text-align 文本居中)
4.valign (top center bottom)单元格中的文字垂直对齐方式
5.nowrap 单元格中文字不换行
【注意】当表格属性与行列属性相冲突时，以行列属性为准
（近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式！
2.5.4 表格的跨行和跨列
跨行：colspan="n列" N行对应删除右边N-1行。
跨列：rowspan="n行" N列对应删除右边N-1列。
举个例子：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格title>head><body><table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red"><caption>我是表格的标题caption><tr><th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1th><th colspan="3">表头2th>tr><tr><td rowspan="2">1-1td><td>1-2td><td>1-3td><td>1-4td>tr><tr><td>2-2td><td>2-3td><td>2-4td>tr>table>body>
html> 2.6. 表单
2.7.1 表单 form
一般情况下与table一起使用，但两者互不影响；
2.7.2 form表单有两个重要的属性：
action：表示，将表单提交给哪个服务器地址；
method：表单提交数据的方式，可选值有 get 和 post 两种。
[get和post区别]
① get使用URL传递数据。所有内容在地址栏可见，不安全；
post的数据无法在地址栏看到，比较安全。
② get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，并且可以传递图片、视频等文件。
③ get的传输速度要比post快。
[get传递数据的URL格式]
http://原来的地址.html?name1=value1&name2=value2
比如：http://127.0.0.1:8020/0595.html?username=123
所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据不向后台传递。
2.7.3 input的常用属性：
① type ：表示当前输入框是何种类型的输入框；
② name ： 给输入框起别名。向后台传递时，使用name=value的形式传递
③ value： 当前input的默认值；
④ placeholder: 输入框的提示内容。当输入框有value时，提示内容消息。
⑤ hidden： 隐藏当前输入框。 可以写为hidden="hidden",也可以省略属性值，只写
隐藏的输入框内容，依然可以向后台传递数据
2.7.4 input的type类型：
① text： 普通的文本框；
② password： 密码框。 输入的内容 ，显示为小黑点。
③ radio： 单选按钮。 单选按钮的value不能省略，这个value需要传到后台；
单选按钮，凭借name是否相同，区分按钮是否为同一组。 同一组按钮只能选中一个，name必须相同。
checked="checked" 设置单选按钮，默认被选中。
④ checkbox： 多选按钮。 其他与单选按钮相同。
⑤ file: 文件上传框。
accept属性，可以限制只能上传何种类型的文件。 "*"表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
⑥ submit： 表单提交按钮。
⑦ reset ： 表单重置按钮。点击将表单恢复为初始状态。
⑧ image ： 图形提交按钮。src属性导入图片，与submit都具有提交表单的作用。
⑨ button： 显示为按钮形状，但是没有任何作用。
⑩ hidden： 隐藏的输入框。与普通输入框+hidden="hidden"的作用相同。
⑥ disabled： 禁用当前输入框。 可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。
⑦ checked="checked" 设置单选按钮/多选按钮，默认选中
2.7.5、 select 下拉选择区块
① select里面的每一项，用标签表示；
② name属性，需要写到select标签上；
③ option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是标签之间的文字。
④ option添加属性selected="selected"， 设置默认选中项。
⑤ select添加属性multiple="multiple"， 设置当前下拉控件可以多选
⑥ option添加属性title，表示鼠标指上后显示的文字。
⑦ select可以使用 标签对选项进行分组，用label属性显示分组名。
2.7.65、 textarea 文本域
① 文本域大小控制：
可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)
可以使用CSS样式style="width:100px; height:100px;"
② 设置文本域大小不能拖动：
style="resize: none;"
③ 设置文本域为只读模式，不能修改：
④ 文字超出区域处理：
使用style="overflow: xx;"可以设置文字超出区域的显示的方式：
>>> overflow: hidden; 超出区域的文字隐藏不显示；
>>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
>>> overflow: auto; 自动，默认效果。文字多显示滚动条，文字少，不显示滚动条。
>>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-y: scroll; overflow-x: hidden;
2.7.7、
【HTML5 智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定；
2、 H5给我们新增了许多input的新的type类型。
range color date email url
3、H5新增的input属性：
① form属性： 关联指定表单的id。
② Placeholder： 输入框的提示内容
③ required="required" 必填
④ autofocus="autofocus" 指定输入框，自动获得焦点
⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态，设置为off表示关闭，设置为on表示打开。
可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。
举个例子：
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title>head><body><h1>用户注册h1><form action="" method="get" id="form1"><table><tr><td>用户名td><td><input type="text" name="username" value="jianghao" disabled/><input type="text" name="username" value="jianghao" hidden/><input type="hidden" name="username" value="jianghao" />td>tr><tr><td>密码td><td><input type="password" name="password" placeholder="请输入密码"/>td>tr><tr><td>性别td><td><input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女" />女<input type="radio" name="sex" value="不明" checked="checked" />不明td>tr><tr><td>兴趣td><td><input type="checkbox" name="hobby" value="吃"/>吃<input type="checkbox" name="hobby" value="喝" />喝<input type="checkbox" name="hobby" value="玩" checked="checked" />玩<input type="checkbox" name="hobby" value="乐" checked="checked" />乐td>tr><tr><td>身份证td><td><input type="file" name="card" accept="image/*" multiple="multiple" />td>tr><tr><td>城市td><td><select name="city" ><optgroup label="沿海城市"><option value="123">青岛option><option selected="selected">烟台option>optgroup><optgroup label="内地城市"><option title="济南">济南option><option>临沂option>optgroup>select>td>tr><tr><td>阅读服务协议：td>tr><tr><td colspan="2"><textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll; overflow-x: hidden;" readonly="readonly">这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。textarea>td>tr><tr><td><input type="submit" value="注册" />td><td><input type="reset" value="重置" />td>tr><tr><td><input type="image" src="img/icon.png" />td><td><input type="button" value="一个并没有什么卵用的按钮" />td>tr>table>form><input type="text" name="test" form="form1" required="required" autofocus="autofocus" autocomplete="off" /><div style="height:400px; background-color: #ff8040;">div>body>html> 四、博主寄语
---书山有路勤为径，学海无涯苦作舟！---
这是博主第一次发表博客，紧张之余，也为自己能够独立完成一片关于HTML5的知识博客感到开心，文章错误之处，还请多多见谅，感谢您能够对博主提出宝贵意见，不胜感谢。最后，祝大家都能够找到对自己有帮助的文章，也祝大家每天都能提高自己，早日实现自己的梦想。
转载于:https://www.cnblogs.com/xyq1107/p/7294586.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！