认识超文本，首先要了解其基本结构和不同标签和属性的使用方法及作用。本篇博文就HTML中相关基础标签和属性使用方法进行总结。
一、HTML文档的基本结构。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>我是林木，大家好呀！</h3>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
基本结构的解释
<!--文档类型-->
<!doctype html>
<!--html文档开始, lang设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示-->
<!--lang属性非必须,如果页页就是提醒翻译,可以删除它,或者改成: zh-cn, 让它与你的系统语言一致-->
<html lang="en">
<!--head是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取-->
<head>
<!-- meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等-->
<!-- charset是你在编写和存储这个html文档时, 使用的编码集-->
<meta charset="UTF-8">
<!-- title是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息-->
<title>html文档的结构</title>
</head>
<!--以下内容会显示在当前浏览器的窗口中, 也是用户最感兴趣的部分-->
<body>
<h3>我是林木，大家好呀！</h3>
</body>
</html>
二、HTML常用标签
列表：<ul>+<jl>,<ol>+<jl>,<dl><dt><dd>
表格：<table><thead><tbody><tr><td>
表单：<form><label><input><button>
宽架：<iframe src=" " width=" " height=" ">
容器：<header><nav><main><article><section><footer>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题与段落</title>
</head>
<body>
<article role="article">
<h1>HTML是什么?</h1>
<p>HTML是超文本标记语言</p>
<h2>HTML与CSS之间的关系是什么?</h2>
<p>html通常用来写页面的基本结构,css用来设置元素样式</p>
<h3>JavaScript可以做什么?</h3>
<p>JavaScript是前端唯一的脚本编程语言, 得到了所有浏览器的支持</p>
<p>JavaScript可以控制页面元素的显示与行业, 使页面具有交互性,提升用户体验</p>
<h4>article标签定义及用法</h4>
<p>article标签中的内容是独立的、完整的、摘自外部的内容。它可以是博客文章、新闻文章等独立的内容。</p>
</article>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
三、链接：链接是现代互联网的发展基础, 全球各个网站就是通过这个小小的链接全部互联到了一起。
注意：target属性指明在哪里打开。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题与段落</title>
</head>
<body>
<a href="">林木的博客：默认当前页面打开</a>
<br>
<a href="" target="_self">林木的博客：默认值是_self</a>
<br>
<a href="" target="_blank">林木的博客：新的窗口打开_blank</a>
<br>
<a href="" target="_parent">林木的博客：父窗口打开_parent</a>
<br>
<a href="" target="_top">林木的博客：顶层窗口打开_top</a>
<br>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
注意：如果父窗口与顶层窗口都是自己的,则与_self效果相同。
四、图片
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题与段落</title>
</head>
<body>
<img src="static/images/girl.jpg" alt="小姐姐" width="400" title="阳光下的小姐姐">
</body>
</html>
点击 "运行实例" 按钮查看在线实例
注意：宽度和高度设置一个即可, 另一个会按比例自动调整。
图像的src是图片路径，alt属性是一定要有的，代表的是图片注释,因为搜索引擎 和 屏幕阅读器都是依赖这个元素来获取图片的内容与介绍。
图片是外部资源, html文档无法直接提供内容, 所以对于外部资源, html大多是通过单标签进行加载。
html是通过单标签中的属性指定要加载的外部资源的地址。
可以是本地的图片, 也可以是一个网络图片。
五、列表
无序列表
实例
<h3>学生信息</h3>
<ul>
<li>张三， 男， 计算机学院</li>
<li>李四， 男， 汉语言文学学院</li>
<li>王五， 女， 外国语学院</li>
<li>赵六， 男， 经管学院</li>
</ul>
点击 "运行实例" 按钮查看在线实例
有序列表
实例
<h3>学生信息</h3>
<ol>
<li>张三， 男， 计算机学院</li>
<li>李四， 男， 汉语言文学学院</li>
<li>王五， 女， 外国语学院</li>
<li>赵六， 男， 经管学院</li>
</ol>
点击 "运行实例" 按钮查看在线实例
开发中, 无序列表使用更广泛, 例如导航
实例
<ul>
<li><a href="">首页</a></li>
<li><a href="">公司新闻</a></li>
<li><a href="">公司产品</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
点击 "运行实例" 按钮查看在线实例
六、定义列表：类似于名词解释, 通常用来制作页脚的导航。
实例
<dl>
<dt>php</dt>
<dd>全球最流行的通用的服务器端编程脚本语言</dd>
<dt>mysql</dt>
<dd>使用最广泛的免费开源的关系型数据库管理系统</dd>
<dt>ThinkPHP</dt>
<dd>国内使用最广泛的轻量级免费开源的PHP开发框架<dd>
</dl>
点击 "运行实例" 按钮查看在线实例
七、表格
使用表格重新编写
border: 表格与单元格添加边框。
cellspacing: 设置单元格与表格之间的间隙大小,0为折叠。
cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤。
width: 设置表格的宽度, 可以使用相对值:百分比。
align: 设置对齐方式,居中, 居左,居右。
bgcolor: 设置背景色。
colsapn: 单元格在列方向上(水平)的合并。
rowspan: 单元格在行的方向(垂直)合并。
实例
<table border="1" cellspacing="0" cellpadding="5" width="500 " align="left">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>学院</th>
<th>绩点</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td width="50">张三</td>
<td width="50">男</td>
<td width="150">计算机学院</td>
<td width="50">3.81</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td> 汉语言文学学院</td>
<td> 4.0</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td> 外国语学院</td>
<td> 4.2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">总计</td>
<!--<td>男</td>-->
<!--<td> 外国语学院</td>-->
<td align="center"> 12.1</td>
</td>
</tr>
</tfoot>
</table>
点击 "运行实例" 按钮查看在线实例
注意：表格标题使用：<caption>学生信息</caption>
表格头部, 使用<thead></thead>，而且只允许一个；里面使用<tr><th></th></tr> 来表示表头行和单元格。
表格主体, <tbody></tbody>可以有多个；里面使用<tr><td></td></tr>来表示表身行和单元格。
表格底部, tfoot也只允许有一个。
八、表单与表单中的控件元素
form标签里面填写的内容就是的表单的控件，把表单放到每一个<p>里。表单最常见的控件是input，输入的意思，input最常见类型是一个文本框“text”，同时创建一个label标签，label里的for属性与input里的id属性一一对应，这样就实现标签label和表单控件input进行绑定。
实例
<h3>用户注册</h3>
<form action="" method="" name="">
<p>
<label for="uesname">账号：</label>
<input type="text" id="uesname" name="usename" placeholder="不能超过8个字符" autofocus>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="6-12的字母和数字组成" autofocus>
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="example@mail.com" required>
</p>
<p>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="100">
</p>
<p>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
</p>
</form>
点击 "运行实例" 按钮查看在线实例
注意：autofocus:自动获取焦点
required: 必填项
min - max: 设置取值范围
时间控件因浏览器不同, 会有不同的实现效果,但功能是类型的
select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型，与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中
实例
<p>
<label for="course">课程:</label>
<!-- 默认显示是一个,可以用size设置-->
<select name="course" id="course" size="1">
<!-- 选择支持分组-->
<optgroup label="前端:">
<option value="0">请选择</option>
<option value="1">HTML5</option>
<option value="2">CSS3</option>
<!-- selected: 设置默认选项-->
<option value="3" selected>JavaScript</option>
</optgroup>
<optgroup label="后端:">
<option value="4">PHP</option>
<option value="5">MySQL</option>
<option value="6">ThinkPHP</option>
</optgroup>
</select>
</p>
点击 "运行实例" 按钮查看在线实例
复选框
实例
<p>
<label for="programme">爱好: </label>
<!-- 点击"爱好"标签会自动定位到"撸代码"选项上-->
<input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label>
<input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label>
<!-- checked: 默认值-->
<input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label>
</p>
点击 "运行实例" 按钮查看在线实例
单选按钮
实例
<p>
<label for="male">性别: </label>
<!-- 点击"性别"标签会自动定位到"男生"选项上-->
<input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
<!-- checked: 默认值-->
<input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label>
</p>
点击 "运行实例" 按钮查看在线实例
文本域
实例
<p>
<label for="comment">简介:</label>
<!-- 文本域其实就是一个多行文本框-->
<!-- 不要设置value属性, 返回的文本在value属性中-->
<textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea>
</p>
点击 "运行实例" 按钮查看在线实例
按钮
实例
<p>
<input type="submit" name="submit" value="提交">
<!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值-->
<!-- 重置按钮现在极少用到啦-->
<input type="reset" name="reset" value="重置">
<!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据-->
<input type="button" name="button" value="按钮">
<!-- 推荐使用button标签定义按钮-->
<!-- 默认也input:submit功能是一样的-->
<button>提交1</button>
<!-- 等价于-->
<button type="submit">提交2</button>
<!-- 普通按钮, 点击执行的行为, 由用户自定义-->
<button type="button">提交3</button>
</p>
点击 "运行实例" 按钮查看在线实例
Correction status：qualified
Teacher's comments：常用标签,总结的不错 , 今年是2019年, 下次注意
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
