本文介绍了HTML的基础知识，包括HTML文档结构、常用标签如段落、标题、图片、超链接、表格和表单元素。还探讨了HTML5的新特性，如新增元素和属性，如article、section、nav、aside、time等，以及新的输入类型和表单属性，如email、url、date、placeholder等。
一：工具准备
工具推荐使用vscode：
- 下载地址：
================官网地址 ================
================百度网盘 ================ - 使用默认的扩展程序下载，箱子下载所需要的开发工具
这里给出笔者订阅的扩展程序：
二：认识HTML
①HTML基本语法：
一个HTML文档由一系列元素组成。HTML元素指的是从开始标签到结束标签所有的代码
为了方便理解，将HTML标签语音大致分为基本标签、格式标签、文本标签、图像标签、表格标签和帧标签
一般标签的格式如下
<标签名 属性1=“值” 属性2=“值” 属性3=“值”>内容</标签名>
②HTML文档的基本结构
HTML文档的主要结构可划分为3个部分：网页区…、标头区…、内容区…。
1.用来表示HTML文档，用于识别HTML文档
2.这个里面构成了HTML的开头部分，可以用来写网页的标题，关键词以及内容描述，可以增加网页被显示出来的优先度，一般由专业人士书写
3.这里写入的是HTML文档的主体部分，包含众多的标签
③HTML常用标签
1. <p></p>段落标签，里面直接写入文字，每个段落会另起一行，要注意的地方有两点，一是它会只保留空格，连续的空格会被替换成一个空格，换行也是如此。第二点就是文本里不能写“<”或者“>”浏览器会误认为这个是表情，如果要写，必须用字符实体，下面给出了部分符号的实体名称。
2.<!-- -->注释标签，和其他语言的注释没有区别
3.<br /> 换行标签，类似于“\n”
4.<div></div>块，它的作用就是分块，每个块会另起一行，一对div标签中间可以放置文本、图片或其他元素，div通常作为样式的容器
5.<h1></h1> 标题标签，用于显示标题，有h1~h6的标签，超过h6都算是h6
6.<span></span> 区间，span标签的作用是划分区间，通常作为样式的容器，默认不会独立成行，多个区间会在一行上连续显示
7.列表，列表分为无序列表，有序列表和定义列表。
ul代表无需列表，它的作用是为每个列表项显示一个粗点
ol代表有序列表，它的作用是显示每个列表项的序号
用<ul></ul>或<ol></ol>定义的时候，列表中的项目用<li></li>标记
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>这是一个无序列表</li>
<li>下面是一个有序列表</li>
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
</ul>
</body>
</html>
效果：
<dl></dl> 代表定义列表。在<dl></dl> 标签里可以用<dt>表示项目<dd>表示描述
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<dl>
<dt>表示项目</dt>
<dd>表示描述</dd>
</dl>
</body>
</html>
效果：
8.<img></img>图片，图片标签属性src的值是图片路径，一般使用相对路径。一把能使用的格式有jpg、png、gif。其中png的图片能够有较好的效果，但是图片占用空间较大。这三种照片看情况选用
9.<a></a>超链接，点击链接可以调到预定的网站，文件或者图片，标签中间可以是图片文字或者页面元素。标签的属性href表示链接目的地包括相对的URL和绝对的URL。target属性的相关描述如下：
④：表格元素
表格是HTML的一项非常重要的功能，利用多种属性能够设计出多样的表格，使页面更加美观
<table></table>标签划分表格的边界。table标签含有四个属性
align:对齐方式，取值可以为left、center、right。
bgcolor：背景颜色，取值可以为16进制、rgb颜色或颜色名称
border：边框，默认为0，值增加可以增加边框厚度
width：宽度，可以用px或者%作为单位
<tr></tr>是行标签，一对行标签定义表格中的一行，<td></td>是单元格标签，一对单元格标签定义一个单元格，<th></th>是表头标签，一对标头标签替代<td></td>作为表头的单元格，表头默认的文本是加粗并居中对齐
在<td></td>和<th></th>标签里面有colspan跨列，rowspan跨行属性，具体用法如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2" width="100" height="200" align="center">A</td>
<td colspan="2" width="200" height="100" align="center">B</td>
</tr>
<tr>
<td width="100" height="100" align="center">E</td>
<td rowspan="2" width="100" height="200" align="center">C</td>
</tr>
<tr>
<td colspan="2" width="200" height="100" align="center">D</td>
</tr>
</table>
</body>
</html>
效果：
⑤：表单元素
<form></form>为表单标签，其他的表单元素应该放在这一对标签中间。
<input>为文本框标签，输入类型是由类型属性type定义的，其中name属性就是用来找到文本框里面的数据的
文本框：type="text"
<form>
姓名：<input type="text" /><br />
性别：<input type="text" />
</form>
密码框：type="password"
<form>
密码：<input type="password" />
</form>
单选按钮：type="radio"
<form>
性别：<input type="radio" />男<input type="radio" />女
</form>
复选框type="checkbox"
<table border="1">
<tr>
<td width="200" height="200">
<form>
请选择你喜欢的水果:<br /><br />
<input type="checkbox" name="favoritefruit" value="1"/>苹果<br /><br />
<input type="checkbox" name="favoritefruit" value="1"/>桔子<br /><br />
<input type="checkbox" name="favoritefruit" value="1"/>芒果<br /><br />
</form>
</td>
</tr>
</table>
下拉列表
下拉列表
<form>
<select>
<option value="0">==选择==</option>
<option value="1">专科</option>
<option value="1">本科</option>
<option value="1">硕士</option>
<option value="1">博士及以上</option>
</select>
</form>
分组下拉列表
<select>
<optgroup label="咖啡">
<option value="a">卡布奇诺</option>
<option value="b">摩卡</option>
</optgroup>
<optgroup label="茶">
<option value="c">红茶</option>\
<option value="d">绿茶</option>
</optgroup>
</select>
多选下拉列表
<select size="4" multiple="multiple">
<option value="1">果汁</option>
<option value="2">牛奶</option>
<option value="3">茶</option>
<option value="4">咖啡</option>
</select>
文本域，用于输入大量文本
<form>
备注：<textarea name="comment" rows="5" cols="30"></textarea>
</form>
按钮，按钮分为三种，提交、重置还有普通按钮
提交：
用户点击提交按钮时，表单的内容会被传送到另一个文件，表单的动作属性action定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="text" action="index2.html" method="get">
message:<input type="text" name="message"/>
<input type="submit" value="提交" />
</form>
重置以及普通按钮：
<form>
<input type="reset" value="重置"/>
<input type="button" value="按钮" />
</form>
隐藏字段，它的作用是需要表单完成一些特定操作，而这些操作是不需要用户看到的，典型的应用场合就是在页面之间传递参数值。当需要传递一些参数值而不想让用户看到时候，就可以使用隐藏字段
<form>
<input type="hidden" name="password" value="1100"/>
</form>
HTML5新增元素和属性
HTML5的优点：
1.提高可用性和用户体验
2.增加新的标签，有助于开发人员定义重要内容
3.给站点带来更多的多媒体元素（视频和音频）
4.很好的替代了Flash和SilverLight
5.当涉及网站的抓取和索引时，对于SEO（搜索引擎优化）很友好
6.将被大量应用于移动应用程序和游戏
7.可移植性好
同时HTML5废除了一些可以用css代替的元素以及不被所有浏览器支持的元素
HTML5的页面结构
<!DOCTYPE HTML>，在HTML5中<!DOCTYPE HTML>申明必须位于文档中的第一行，也就是位于<html>标签之前。该标签告知浏览器文档使用的HTML规范。所有HTML文档中均规定DOCTYPE是非常重要的，这样浏览器就能了解预期的文档类型
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
</form>
</body>
</html>
HTML5主体结构元素
1.article元素
这个元素表示独立、完整、可独自被外部引用的内容。article元素可以嵌套使用，内层内容原则上需要外层内容关联。例如，针对一篇文章的评论就可以使用嵌套article元素的方式，呈现文章评论的article元素嵌套在表示文章整体内容的article元素的里面
2.section元素
section元素用于对网站或应用程序中页面上的内容进行分块，通常由标题及内容组成，但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或行为时，尽量使用div。
section元素强调分段和分块，而article元素则是强调独立性。
section的使用注意事项：
1.不要用section做设置样式的容器，这时应该使用div。
2.如果article。aside、nav元素更加适合的话就不要用section
3.不要给没有标题的内容区块使用section，可以使用HTML5轮廓工具检查页面中是否有没有标题的section
3.nav元素
nav元素用于表示页面导航链接的部分
nav使用的场合：
（1）传统导航条
（2）侧边导航栏
（3）页内导航
（4）翻页操作
4.aside元素
aside元素一般用于表示article元素的内容之外的，与article元素内容相关或者文章附属消息
5.time元素
time元素代表24小时中的某个时刻或者日期，表示时刻时允许带时差。他可以定义很多格式的日期和时间。他的datatime属性用于定义元素的日期和时间。
HTML5非主体结构元素
1.header元素
简单点来说就是为了能够让代码能加易懂而分的区域
2.hgroup元素
hgroup元素用于对整个页面或页面中一个区块中内容的标题进行组合。有时候往往不止一个标题，除了主标题还有子标题。宣传语之类的
3.footer元素
footer元素用于表示整个页面或页面中的一个内容区块的脚注，可以做一个区块的尾部内容，通常包括一些附加信息，入文档作者
4.address元素
address元素用于呈现联系信息，如姓名、网址、网站、邮箱等联系方式。
新增表单元素
HTML5新增了表单元素，加快了客户端和服务器之间的交互
HTML5表单新的输入类型
1.email输入类型。
说明：此输入类型要求输入格式正确的email地址，格式不正确的话浏览器不允许提交，并会有一个错误信息提示。此类型必须指定name属性
2.url属性
说明：此类型要求输入格式正确的url地址，浏览器会自动在开始处添加“http://”
3.日期时间和相关输入类型
说明：这一系列输入类型完全解决了繁琐的JS日历控件问题
4.number属性
说明：此输入要求输入一个数字字符
number输入类型属性含义：
5.search输入类型
说明：此输入类型用于输入一个搜索关键字，显示为常规的文本域
6.range输入类型
说明：此输入类型用于输入应该包含在一定范围内的数字值，显示为滑动条。
<input type="range" max="10"min="0" step="1" value="5" />
效果：
range输入类型属性：
7.tel输入类型
说明：此输入类型要求输入一个电话号码
8.color输入类型
说明：此输入类型可以让用户通过颜色选择器选择一个颜色值
HTML5表单新增属性
1.placeholder属性
提供输入域的提示，描述输入域所期待的值。提示会在输入域获得光标时变为空
<input type="search" name="user_search" placeholder="搜索你要的东西"/>
效果：
2.require/pattern属性
用来验证输入域的验证属性
require表示输入域在提交前必须填写
pattern属性用于验证input域的模式，验证类型为正则表达式。
3.autofocus自动聚焦属性
在指定页面加载的时候，域自动获得焦点。
4.autocomplete自动完成属性
该属性规定form或input域应该拥有自动完成功能。
5.novalidate属性
novalidate属性规定在提交表单时不应该验证form或input域。
6.multiple属性
multiple属性规定在输入域中可以选择多个值
扫一扫
1818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
