一、HTML 结构

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的. 形如：<body>hello</body>

标签名 (body) 放到 < > 中
大部分标签成对出现. 为开始标签, 为结束标签.
少数标签只有开始标签, 称为 "单标签". 开始标签和结束标签之间, 写的是标签的内容. (hello)
开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

<body id="myId">hello</body>

1.2 HTML 文件基本结构

<html> 
  <head> 
    <title>第一个页面</title>
  </head> 
  <body>
    hello world 
  </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

1.3 标签层次结构

<html> 
  <head> 
    <title>第一个页面</title>
  </head> 
  <body>
    hello world 
  </body>
</html>

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系

标签之间的结构关系, 构成了一个 DOM 树：Document Object Mode (文档对象模型)

1.4 快速生成代码框架

在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

细节解释：（了解即可）

**<!DOCTYPE html>**称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件。
**<html lang="en">**其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译)。
**<meta charset="UTF-8">**描述页面的字符编码方式. 没有这一行可能会导致中文乱码。
**<meta name="viewport" content="width=device-width, initial-scale=1.0">**
- name="viewport"其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。
- content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)。

1.5 开发者工具

浏览器中非常非常重要的组件：开发者工具，可以看到页面的基本结构。笔记本电脑的话，通过 fn + f12。全键盘的话，就直接按 f12 就好了。或者右键 “检查”：

开发者工具页面如下：

通过这里可以更快的选中页面中的元素：

二、HTML 常见标签

2.1 注释标签

通过 来完成注释。注释不会显示在界面上. 目的是提高代码的可读性.

<body>
    hello world!
    <!--这里是注释-->
</body>

代码结果：

通过开发者工具可以看到，注释是可以被其他人看到的，所以尽量不要写注释。

2.2 标题标签：h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小.

<h1>hello</h1> 
<h2>hello</h2> 
<h3>hello</h3> 
<h4>hello</h4> 
<h5>hello</h5>
<h6>hello</h6>

代码结果：

2.3 段落标签：p

p 就是段落标签，可以对内容分段。通过 lorem 就可以自动生成段落。代码如下：

<body>
    <p>第一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat aspernatur ipsa rem deserunt officiis optio blanditiis atque perferendis corrupti similique, id tempore sint iusto veritatis aliquam ullam assumenda nostrum voluptatum!</p>
    <p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. At, nam consequuntur! Iste commodi, est, debitis atque, ipsa laborum vero corporis perspiciatis dicta libero dolorum sapiente exercitationem officiis molestias repudiandae numquam!</p>
</body>

代码结果：

让段落首行缩进两个字，需要搭配 CSS 来完成，因为 HTML 相当于是页面的骨架，CSS 描述的是页面的样式。加一个 style 标签就可以了：

<body>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
    <p>第一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat aspernatur ipsa rem deserunt officiis optio blanditiis atque perferendis corrupti similique, id tempore sint iusto veritatis aliquam ullam assumenda nostrum voluptatum!</p>
    <p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. At, nam consequuntur! Iste commodi, est, debitis atque, ipsa laborum vero corporis perspiciatis dicta libero dolorum sapiente exercitationem officiis molestias repudiandae numquam!</p>
</body>

这样就完成了首行缩进：

2.4 换行标签：br

注意：

html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格。

br 就是换行标签，如果没有换行标签的话，HTML 是不会自动换行的。<br> 是一个单标签，加入到长段落当中就可以了。代码如下：

<body>
    <p>第一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        <br>Fugiat aspernatur ipsa rem deserunt officiis optio blanditiis atque perferendis corrupti similique, id tempore sint iusto veritatis aliquam ullam assumenda nostrum voluptatum!</p>
    <p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        <br>At, nam consequuntur! Iste commodi, est, debitis atque, ipsa laborum vero corporis perspiciatis dicta libero dolorum sapiente exercitationem officiis molestias repudiandae numquam!</p>
</body>

运行结果如下：

推荐写法使用 <br/>，有些浏览器使用 <br>可能不会进行换行。

2.5 格式化标签

格式化标签，其实是针对文本进行一些样式上的调整。

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

以上这四组标签，每组标签中的两个标签都是等价的，效果是相同的。代码如下：

<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>   
</body>

运行结果如下：

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主.

2.6 图片标签

使用 img 标签来表示图片。img 也是一个单标签，里面可以有好多属性，其中最重要的就是 src 属性。通过 src 来描述图片所在的位置。我们把图片放在项目的目录当中，然后在代码当中使用就好了：

<body>
    <img src="./img/1.jpg" alt="">   
</body>

运行结果：

这里的 src，可以是相对路径，也可以是绝对路径，也可以是网络路径。网络路径：

<body>
    <img src="https://scpic.chinaz.net/files/pic/pic6/pic1281.jpg" alt="">   
</body>

运行结果：

alt 里面的内容 ，如果图片挂了，就会显示 alt 里面的内容。

src 标签里的 title

title 就是对图片内容进行提示，就是鼠标放到图片上面之后进行提示：

<body>
    <img src="./img/1.jpg" title="这是一只猫娘">   
</body>

运行结果：

通过 width 和 height 来设置长宽

width：就是宽。height：就是高。设置尺寸的时候，单位：px，就是像素的意思。宽度和高度可以一起设置，也可以只设置一个，只设置一个的话，也不会导致图片形变。

<body>
    <img src="./img/1.jpg" width="600px" height="600px">   
</body>

运行结果：

2.7 超链接

通过 a 标签就可以实现超链接，跳转到其他的页面。

普通页面跳转链接

代码如下，在 a 标签后面加上对应的网站即可。

<body>
    <a href="https://www.zhihu.com/">知乎</a>  
</body>

运行结果：

点击之后：

注意： href="#"是一种临时链接的写法，这样写就是说这个链接目前不可用，点击了也不会有作用，还是会跳转到本页，当#被有效链接替换才会起作用

下载文件

href 里面的链接，是对应到一个压缩文件，不是 HTML，那么就会触发一个下载文件操作。先在项目中创建一个压缩包：

代码：

<body>
    <a href="aa.zip">压缩包下载</a>  
</body>

运行结果：

点击之后：

如果是普通的文件（不是压缩文件）就会直接跳转到该文件页面的内容,不会下载：

<body>
    <a href="aa.txt">文件查看</a>  
</body>

运行结果：

点击之后：

图片做超链接

代码如下：

<body>
    <a href="./img/1.jpg">图片查看</a>  
</body>

运行结果：

点击：

2.8 表格标签

表格标签是一组标签：

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

通过表格构造一个通讯录：这里通过使用 CSS，来完成内容的居中。代码如下：

<body>
    <style>
        td {
            text-align: center;
        }
    </style>
    <table border="2px" height="150" width="300" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>  
</body>

运行结果：

其中：

cellspacing 属性：控制两个单元格之间的空隙。
align 属性：设置对齐方式，此属性是控制table标签来到页面的居中位置，如果要控制内容文字的居中对齐，需要使用 CSS，如

2.9 列表标签

无序列表标签：ul（整个无序列表）和 li （列表项，一个列表中包含多个表项）
有序列表标签：ol（整个无序列表）和 li （列表项，一个列表中包含多个表项）
自定义列表标签：dl（整个列表），dt（小标题），dd（标题里的内容）

u => unordered 无序的 o => ordered 有序的 l => list li 里的 i => item 列表项

示例代码：

<body>
        <h3>无序列表</h3>
        <ul>
            <li>啦啦啦</li>
            <li>哈哈哈</li>
            <li>也一样</li>
        </ul>
    
        <h3>有序列表</h3>
        <ol>
            <li>啦啦啦</li>
            <li>哈哈哈</li>
            <li>也一样</li>
        </ol>
    
        <h3>自定义列表</h3>
        <dl>
            <dt>强强强强</dt>
            <dd>啦啦啦</dd>
            <dd>哈哈哈</dd>
            <dd>也一样</dd>
        </dl>
</body>

运行结果：

2.10 表单标签

表单是让用户输入信息的重要途径.，分成两个部分：

表单域:：包含表单元素的区域. 重点是** form **标签.
表单控件:：输入框, 提交按钮等. 重点是 input 标签.

form 标签

待写

input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框。

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

文本框

type 类型为 text

<body>
    <form>
        <input type="text">
    </form>
</body>

此处为单行输入文本框，运行结果如下：

密码框

type 类型为 password

<body>
    <form>
        <input type="password">
    </form>
</body>

运行结果如下：

单选框

type 类型为 radio

<body>
    <form>
        <input type="radio">男
        <input type="radio">女
    </form>
</body>

运行结果如下：

发现这两个都可以选中，所以就需要再设置一个 name 来达到互斥的效果：

<body>
    <form>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
    </form>
</body>

运行结果如下：
这样就只能选中一个元素了。

还可以通过 checked 来表示默认选中：

<body>
    <form>
        <input type="radio" name="gender">男
        <input type="radio" name="gender" checked="checked">女
    </form>
</body>

运行结果如下：
此处为还没有点击的状态，是默认状态。

但是又发现，只有点圆圈圈的时候，才可以选中，所以就可以让 input 搭配 label 标签来实现点文字也可以选中，不过 label 的 for 要和 input 关联上：

<body>
    <form>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" checked="checked" id="female"><label for="female">女</label>
    </form>
</body>

运行结果如下：

复选框

就是可以一次选多个选项，通过 checkbox 类型的 type 搭配 label 标签来实现，当然也可以通过 checked 来实现默认选中：

<body>
    <form>
        <input type="checkbox" id="1" checked="checked"><label for="1">中国</label>
        <input type="checkbox" id="2"><label for="2">日本</label>
        <input type="checkbox" id="3"><label for="3">韩国</label>
        <input type="checkbox" id="4"><label for="4">泰国</label>
    </form>
</body>

代码运行如下：
未点击状态：
点击后状态：

按钮

通过** button** 来实现按钮功能，value 就是按钮里面显示的文字：

<body>
    <form>
        <input type="button" value="按钮">
    </form>
</body>

运行结果如下：

通过 onclick 就可以实现点击提示了：

<body>
    <form>
        <input type="button" value="按钮" onclick="alert('hello')">
    </form>
</body>

点击按钮后，运行结果如下：

提交按钮

提交按钮就是把当前表单里的用户输入的数据，包装成一个 http 请求，发送给服务器。
type 的类型为 submit，value 为按钮里显示的字。

<body>
    <form>
        <input type="submit" value="提交">
    </form>
</body>

点击“提交”按钮后，发现没什么变化：

这就需要我们在 标签form中，添加属性action，action里面写入要提交到的网址。
此处我们在action里输入的网址为：www.baidu.com

<body>
    <form action="http://www.baidu.com">
        <input type="text" name="key">
        <br/>
        <input type="submit" value="提交">
    </form>
</body>

在文本框内，我们输入 abcd：

然后提交，发现跳转到了我们在 action 里面输入的网址：

然后我们观察到，这个页面的网址有一些东西：

清空按钮

把表单中当前用户输入的内容给去掉。
type 的类型为 reset。

<body>
    <form action="http://www.baidu.com">
        <input type="text" name="key">
        <br/>
        <input type="submit" value="提交">
        <input type="reset" value="清空">
    </form>
</body>

运行结果如下：

这个功能不是特别常用，通过 js代码也可以实现。

选择文件

一般在上传文件的时候会用到。
type 的类型为 file。

<body>
    <form>
        <input type="file">
    </form>
</body>

运行结果如下：

点击 ”选择文件“ 后：

提交后：

label 标签

在上面 input 标签中的单选/复选框中已经提了，label 标签可以点击文字进行框的选取。

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的）

<label for="male">男</label> <input id="male" type="radio" name="sex">

select 标签

select 标签：下拉框 / 下拉菜单
select 是表示下拉框本身，里面的选项是一个个的 option 标签。

<body>
    <select>
        <option>选择你的户籍地址</option>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>深圳</option>
        <option>广州</option>
        <option>杭州</option>
    </select>
</body>

运行结果如下：

点击就可以选择选项了：

通过 selected 就可以完成默认选中，如果没有指定默认，默认选中第一项：

<body>
    <select>
        <option>选择你的户籍地址</option>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>深圳</option>
        <option>广州</option>
        <option>杭州</option>
    </select>
</body>

结果如下：

多行编辑框

通过 textarea 来实现多行编辑：

<body>
    <textarea cols="30" rows="10"></textarea>
</body>

这样就构建出了行数为10行，列数为30列的输入框了，运行结果如下：

2.11 无语义标签

无语义就是没有明确的角色：div 和 span 这两个无语义标签。这两个无语义标签可以代替上面的绝大部分有语义标签的功能（但是 form 这一系列不能替换）。div 默认是一个块级元素（独占一行），span 默认是一个行内元素。代码如下：

<body>
    <div>
        <span>AAA</span>
        <span>AAA</span>
        <span>AAA</span>
    </div>
    <div>
        <span>BBB</span>
        <span>BBB</span>
        <span>BBB</span>
    </div>
    <div>
        <span>CCC</span>
        <span>CCC</span>
        <span>CCC</span>
    </div>
</body>