七、网页（HTML）结构
7.1 HTML介绍
HTML(Hyper Text Markup Language)，超文本标记语言。
超文本：比文本的功能要强大，通过链接和交互式的方式来组织与呈现信息的文本形式。不仅仅有文本，还可以包含图片、音频等。
标记语言：由标签构成的语言。所有的代码都是包含标签的。这些标签都是提前定义好的，不同的标签拥有不同的含义，可以表示不同的内容。
7.2 HTML基本结构
7.3 HTML常用标签
7.3.1 title标签
title 标签是一个页面名标签。我们可以往 title 标签内输入内容，这些内容通过运行，就会展示在浏览器的页面标题中。
7.3.2 标题标签 （h1 - h6）
标题标签就和我们在阅读文章时，所看到的标题类似。因为标题标签是在页面内部的，因此标题标签所处的位置是在 body 部分的。
标题标签 一共只有 六级 标题，当我们写了七级或者八级标题之后，虽然语法是错误的，但是浏览器能够正常的显示出来，也就是不会报错。浏览器会将错误的标题标签当成一个普通内容。
7.3.3 段落标签 （p）
在HTML中，段落，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签。
注意：
1、p 标签描述的段落，前面没有缩进。
2、html内容首尾处的换行,空格均无效。
3、在html中文字之间输入的多个空格只相当于一个空格。
4、html中直接输入换行不会真的换行，而是相当于一个空格。
7.3.4 换行标签（br）
想要完成换行的话，也可以通过
标签来实现，br是一个单标签(不需要结束标签)。
7.3.5 图片标签 （img）
img 标签必须带有 src 属性，表示图片的路径。这里的路径可以是相对路径也可以是绝对路径。
注意：想要在html中插入本地图片，必须将图片和html文件放在同一目录下。
width / height：控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放。如果两个都改可能会出现图像失衡的情况。
注意：属性之间使用空格来分隔。
图片也可以加上 alt 属性，当图像无法显示时，浏览器会显示 alt属性中的文本内容来替代图像。
7.3.6 超链接标签 （a）
链接分为三种：外部链接、内部链接、空链接。
外部链接是指跳转到当前网站的以外的页面；例如，百度跳转CSDN。上面的情况属于外部链接。
内部链接是指跳转到当前网站的本地页面；例如，百度跳转百度。内部链接其实本质与相对路径的写法差不多。
空链接是指跳转之后的页面为空。空链接是直接使用 # 来当作占位符的。内部链接其实本质与相对路径的写法差不多。
7.3.7 表格标签 （table）
table 标签只是创建了一个空表格，这个表格里面的元素需要我们手动的去填充。表格是由一个一个的单元行组成，因此表格里面写上 tr 标签，单元行是由一个一个的单元格组成。
style属性可以设置 width / height 的大小，border 表示边框，(数字越大,边框越粗，“” 表示没边框，默认也是没边框。cellspacing：单元格之间的距离，默认为 2像素。 align 设置表格相对于周围元素的对齐方式（不是内部元素的对齐方式），默认是居中对齐的。
示例
<!-- px是像素 -->
<table style="width: 500px; height: 400px;" border="1" cellspacing="0" ><!--第一行--><tr><!--第一列--><td>姓名</td><!--第二列--><td>年龄</td><!--第三列--><td>专业</td></tr><!--第二行--><tr><!--第一列--><td>张三</td><!--第二列--><td>18</td><!--第三列--><td>计科</td></tr><!--第三行--><tr><!--第一列--><td>李四</td><!--第二列--><td>20</td><!--第三列--><td>软工</td></tr>
</table>
7.3.8 表单标签 （input和form）
表单是让用户输入信息的重要途径。分为两个部分，一个是表单域，包含表单元素的区域，主要是form标签；另一个是表单控件，包含输入框，提交按钮等，主要是 input标签。
input标签
input 标签 是用来描述 各种输入控件，单行文本框，按钮，单选框，复选框等，它也是单标签。
type 属性 是用来表示当前输入框是属于哪种，是文本框，还是密码框等。
name 属性 是用来给 input 起名字，对于单选按钮来说，具有相同的name才能多选一。
value 属性 主要用来设置按钮的值。
输入框的分类：
1.手动输入类
<!-- 文本框 -->
<input type="text"><!-- 密码框 -->
<input type="password">
2.选择类（单选、复选、多选、普通按钮）
注意：对于选择框来说，相同的name值，会被认为是一组的。
<!-- 单选框：多个选项只能选一个，单选题 -->
你上课在干嘛？
<input type="radio" name="1">睡觉 <!-- name的值是可以随便取的，但三者必须一致 -->
<input type="radio" name="1">学习
<input type="radio" name="1">看手机<!-- 复选框：多个选项可以选多个，多选题 -->
你的爱好是什么？
<input type="checkbox">干饭
<input type="checkbox">睡觉
<input type="checkbox">玩<!-- 普通按钮 -->
你的爱好是什么？
<input type="button" value="干饭">
<input type="button" value="睡觉">
<input type="button" value="玩">
form 标签
对于提交类的，一般都是与 form标签连用。
<form>姓名：<input type="text"><!-- 提交按钮 --><input type="submit" value="提交">
</form>
7.3.9 select 标签
select标签用于创建下拉列表或滚动列表。它通常与option标签一起使用，option标签用于定义列表中的选项。
家庭住址：
<select><option>北京</option><option>上海</option><option>深圳</option><option>广州</option>
</select>
7.3.10 textarea 标签
textarea 标签用于创建一个多行文本输入框，可以通过 rows 与 cols 来指定行数与列数。
7.3.11 无语义标签（span和div）
无语义 的意思就是不表示什么含义。这两个标签可以看成是两个盒子。
div 是一个大盒子，其可以独占一行；span是一个小盒子，其不能独占一行。
7.3.12 列表标签（ol和ul）
列表标签有两种，一种是有序列表，ol；另一种是无序列表，ul。
7.4 HTML示例
<!DOCTYPE HTML>
<HTML lang = "en"><head><meta charset = "UTF-8"><title>我的个人主页</title></head><body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type = "text" placeholder = "请输入用户名"></td></tr><tr><td>联系电话</td><td><input type = "text" placeholder = "请输入联系电话"></td></tr><tr><td>密码</td><td><input type = "password" placeholder = "请输入密码"></td></tr></table><div><form action = "https://www.baidu.com/"><input type = submit value = "注册">是否已注册？<a href = "#" >登录</a></form></div></body>
</HTML>
