一、HTML基础知识
HTML代码由大量的标签组成。
HTML文件的基本结构：
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
在这个基本结构中也会体现出标签的层次关系：
- 父子关系：html是head和body的父标签，head是title的父标签。
- 兄弟关系：head和body是兄弟关系。
对于HTML代码文件可以在记事本进行编写，只要确保后缀名是.html，然后双击就会文件就会在浏览器中进行页面展示，HTML也可以在IDEA等开发工具中编写，输入!+tab就会自动生成HTML文件的基本框架。
二、HTML常见标签
注释标签
注释标签：
<!-- 注释 -->
可以选中注释内容，使用快捷点crtl+/来进行注释或者取消注释。
标题标签
标题标签：
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
注意：
- HTML拥有六级标签，标签字体逐渐变小。
- 标题标签会自动换行，不需要在其后加上换行符。
段落标签
段落标签：<p> 段落内容 </p>
注意：
在段落中手动不管输入多少个空格，在运行显示的时候只有一个空格。
在段落中手动输入一个换行，只是相当于空格，并不会真的换行。
HTML的段落中无法设置首行缩进，需要用CSS来完善。
输入lorem之后再加tab键会随机生成一个段落。
常用的转义字符
在段落中如果用到多个空格和一些特殊符号就需要用到转义字符，下表是一些常见的转义字符：
| 原始字符 | 转义字符 |
| " | " |
| & | & |
| < | < |
| > | > |
| 连续空格 |   |
换行标签
换行标签：<br/>
换行标签是一个单标签，不存在结束标签。
格式化标签
格式化标签：
- 加粗：<strong> 加粗 <strong> 或 <b> 加粗 </b>
- 倾斜：<em> 倾斜 </em> 或 <i> 倾斜</i>
- 删除线：<del> 删除线 </del> 或 <s> 删除线 </s>
- 下划线：<ins> 下划线 </ins> 或 <b> 下划线 </b>
图片标签
图片标签：
<img src="图片地址" alt="替换文本" title="提示文本" width= " px" height=" px" border=" px">
注意：
- 图片标签中必须带有src属性，其他可以省略，并且各属性的顺序随意。
- src中可以是绝对地址或相对地址。
- 替换文本指的是图片加载失败了就会显示出来，如果图片加载成功就不会显示。
- title提示文本是当你把鼠标放到图片上时就会出现。
- width、height、border是用于设置图片宽度、高度和边框，单位是px（像素）。
超链接标签
超链接标签：
<a href="网站地址" target="打开方式"> 超链接 </a>
注意：
- href是超链接文件中必须具备的，指定要跳转到那个页面。href可以直接输入网址，也可以另一个HTML文件，还可以是一个文件名表示下载链接。
- target指的是打开的方式，有_self表示在原标签页打开，还有_blank会用新的标签页打开。
- href等于"#"，表示是一个空链接。
- 超链接不一定只是文字，也可以是图片等，例如双击图片就会跳转页面。
表格标签
表格标签有：
- table：表示整个表格。
- tr：表示表格的一行。
- td：表示一个单元格。
- th：表示表头单元格，默认会居中加粗。
table包含tr，tr中包含td或th。
table标签中也有多个属性：
- align:表格相对于周围元素的对齐方式。
- border：表示边框宽度。
- cellpadding：内容距离边框的距离，默认是1px。
- cellspacing：单元格之间的距离，默认是2px。
- width：设置表格宽度。
- height：设置表格的宽度。
列表标签
列表标签可以使页面布局更加美观。
列表标签有：
无序列表：
<ul>
<li>列表1</li>
<li>列表2</li>
……
</ul>
有序列表：
<ol>
<li>列表1</li>
<li>列表2</li>
……
</ol>
自定义列表：
<dl>
<dt>小标题</dt>
<dd>列表1</dd>
<dd>列表2</dd>
……
</dl>
input标签
input标签包含各种输入控件，有单行文本框、按钮、单选框和复选框。
input标签的属性有：
type（类型标签，必须包含）:可以是text、button、checkbox等。
name：给input起名字，例如对于单选按钮，具有相同的name才能进行单选。
value：input的默认值。
checked：默认选中项，主要用于单选按钮和多选按钮。
maxlength：input标签的最大长度。
文本框
姓名<input type="text">
效果：
密码框
密码<input type="password">
效果：
单选框
简易版本：点击按钮才能选中，单击文字无效。
性别<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女
升级版本：单击文字也代表选中,需要搭配label标签来进行使用，默认性别选择男。
性别<input type="radio" name="gender" id="male" checked="checked">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
效果：
注意：
- 单选框中每个选项的name必须相同。
- label标签的作用是点击文字也能选中，但是label标签的for属性内容要与单选框中的id进行对应。
复选框
兴趣爱好<input type="checkbox"> 打篮球 <input type="checkbox"> 羽毛球
<input type="checkbox"> 刷抖音 <input type="checkbox"> 躺平
复选框也可以搭配label标签和指定默认选项搭配使用。
效果：
普通按钮
普通按钮<input type="button" value="普通按钮">
效果：
这里点击之后是不会出现任何相应的，后续需要搭配Js来使用。
选择文件
选择文件<input type="file" value="上传文件">
效果：
下拉标签
出生地<select>
<option>西安</option>
<option>上海</option>
<option>北京</option>
</select>
效果：
多行文本输入
备注<textarea rows="5" cols="30"></textarea>
效果：
无语义标签
div
div标签独占一行，是一个大盒子。
span
span标签不独占一行，是一个小盒子。
三、综合案例
1、简单的相亲页面注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dating</title> </head> <body> <h1>千里姻缘一线牵</h1> <img src="dating.jpg" width="500px" height="300px"> <table cellspacing="0" width="300px"> <tr> <td>姓名 <input type="text"></td> </tr> <tr> <td>性别 <input type="radio" name="sex" id="male"> <label for="male"><img src="male.png" width="10px" height="10px">男</label> <input type="radio" name="sex" id="female"> <label for="female"><img src="female.png" width="15px" height="15px">女</label> </td> </tr> <tr> <td> 出生年份 <select> <option>--请选择年份--</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>2001</option> </select> </td> </tr> <tr> <td> 出生地 <select> <option>--请选择--</option> <option>上海</option> <option>西安</option> <option>北京</option> <option>兰州</option> <option>新疆</option> <option>杭州</option> </select> </td> </tr> <tr> <td> 兴趣爱好 <input type="checkbox"> 打篮球 <input type="checkbox"> 羽毛球 <input type="checkbox"> 刷抖音 </td> </tr> <tr> <td>备注 <textarea cols="20px" rows="3px"></textarea></td> </tr> <tr> <td> <input type="button" value="注册"> </td> </tr> </table> </body> </html>
效果展示：dating
2、相亲的简历信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Resume</title> </head> <body> <h1>个人基本信息</h1> <h2>姓名：张子晨</h2> <img src="hansome.png"> <h3>个人基本信息</h3> <ul> <li>身高：185cm</li> <li>体重：75kg</li> <li>户籍：陕西省西安市</li> </ul> <p>微信：23901311k</p> <p>抖音主页：<a href="https://www.douyin.com/user/MS4wLjABAAAAQq5YKdWvTtJRyC9l7pelfwrbFpPos_-SzwMZ_Z5BRTD_IVTrv0APr-41xxV4AB5Z">美少年</a> </p> <h3>个人优势</h3> <ol> <li>脾气好</li> <li>家庭条件优越</li> <li>阳光幽默</li> <li>钟情</li> </ol> <p><strong>心动不如行动，希望早日找到心仪的另一半</strong></p> </body> </html>
效果展示：resume
