<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

3，标签层次结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一个页面</title>
</head>
<body>
      hello word
</body>
</html>

标签之间的结构关系, 构成了一个 DOM 树

4，快速生成代码框架

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

二、HTML 常见标签

1，注释标签

注释不会显示在界面上. 目的是提高代码的可读性.

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释

2，标题标签

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

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

3，段落标签: p

<p>这是一个段落</p>

<p>
    在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
    素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此
</p>
<P>
    还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
    1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
    这点，在文章后面的部分还会讲到
</P>

4，换行标签: br

<p>
    在css中我们一般使用px作为单位，<br/>
    在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
    素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此
</p>
<P>
    还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中<br/>
    1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
    这点，在文章后面的部分还会讲到
</P>

5，格式化标签

<strong>加粗</strong><br/>
<em>倾斜</em><br/>
<del>删除线</del><br/>
<ins>下划线</ins>

6，超链接标签: a

<a href="http://www.baidu.com">百度</a>

7，表格标签

<table align="center" border="1" cellspacing="20" cellpadding="0" width="500" >
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

8，列表标签

<h3>无序列表</h3>
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>123</dt>
    <dd>123</dd>
    <dd>123</dd>
    <dd>123</dd>
</dl>

9，表单标签

form 标签

<form action="test.html">
   ... [form 的内容]
</form>

input 标签

1) 文本框

<input type="text">

2) 密码框

<input type="password">

3) 单选框

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

4) 复选框

<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏

5) 普通按钮

<input type="button" value="我是个按钮">

6) 提交按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

7) 清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标题标签</title>
</head>
<body>
<input type="text"><br/>
<input type="password"><br/>
<input type="radio" name="sex">男<br/>
<input type="radio" name="sex" checked="checked">女<br/>
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏<br/>
<input type="button" value="我是个按钮"><br/>
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form><br/>
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form><br/>

</body>
</html>

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验

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

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

select 标签

下拉菜单

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

可以给的第一个选项, 作为默认选项

<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

11，无语义标签: div & span

<div>
    <span>123</span>
    <span>123</span>
    <span>123</span>
</div>
<div>
    <span>124</span>
    <span>124</span>
    <span>124</span>
</div>
<div>
    <span>125</span>
    <span>125</span>
    <span>125</span>
</div>