作者：~小明学编程
文章专栏：JavaEE
格言：热爱编程的，终将被编程所厚爱。
目录
HTML的结构
HTML的标签
HTML文件的结构
快速生成代码框架
HTML中的常见标签
注释标签
标题标签
段落标签
换行标签
转义字符
格式化标签
图片标签
超链接
表格标签
列表标签
表单标签
input 文本框
input密码框
单选框
复选框
按钮
上传文件
下拉菜单
编辑
多行编辑框
无语义标签
实战案例
简历介绍
简历填写
HTML的结构
HTML的标签
html的代码是由标签构成的
<body>hello</body>
标签名 (body) 放到 < > 中
大部分标签成对出现. <body> 为开始标签, </body> 为结束标签.
少数标签只有开始标签, 称为 "单标签".
开始标签和结束标签之间, 写的是标签的内容. (hello)
开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
HTML文件的结构
<html><head><title>第一个页面</title></head><body>hello world</body></html>
html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.
快速生成代码框架
直接输入 ! , 按 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" 在设置可视区和设备宽度等宽, 并
设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)
HTML中的常见标签
注释标签
注释不会显示在界面上. 目的是提高代码的可读性：
<!-- 我是注释 -->
ctrl + / 快捷键可以快速进行注释/取消注释。
标题标签
标题标签一共有6个 h1 至 h6。数字越小，里面的内容就越粗越大。数字越大，里面的内容就越细越小。这个 h1 - h6，就相当于 # - ######【一级标题 至 六级标题】我们在 CSDN 上面写博客就会用到标签等级。<body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5></body>
段落标签
p 就是段落标签，可以对内容分段。通过 lorem 就可以自动生成段落。代码如下
<body><p>第一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, error. Quas et unde natus nisi rerum est, quisquam exercitationem ullam. Fugiat quibusdam, excepturi aspernatur dolore quaerat eaque placeat maxime quae.</p><p>第二个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nihil ipsam dolor excepturi atque quas deleniti sapiente veritatis nostrum non explicabo, assumenda rerum repellendus sed. Labore incidunt voluptates ipsam minima.</p></body>
换行标签
br在HTML中属于换行标签，也是HTML中为数不多的单标签。
<body><p>第一个段落 Lorem ipsum dolor sit,<br> amet consectetur adipisicing elit. Nobis, error. Quas et unde natus nisi rerum est, quisquam exercitationem ullam. Fugiat quibusdam, excepturi aspernatur dolore quaerat eaque placeat maxime quae.</p><p>第二个段落 Lorem ipsum dolor sit <br> amet consectetur adipisicing elit. Nisi nihil ipsam dolor excepturi atque quas deleniti sapiente veritatis nostrum non explicabo, assumenda rerum repellendus sed. Labore incidunt voluptates ipsam minima.</p></body>
转义字符
HTML 会把相邻的空格，合并成一个空格。如果需要多个空格，就需要使用转义字符，除了空格之外，像 < > & 等这些特殊符号，也需要使用转义字符。最常见的就是这些：
格式化标签
加粗: 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>
图片标签
img 标签必须带有 src 属性. 表示图片的路径：
这个路径我们可以是相对路径，可以是全路径，也可以是网络上的图片路径。
<body><img src="D:\.11111\爬虫\图片\CSDN\微信图片_20221213191132.jpg" alt=""><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?pid=ImgDet&rs=1" alt=""></body>
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定
<img src="D:\.11111\爬虫\图片\CSDN\微信图片_30221213191132.jpg" alt="这是一朵花"> <img src="D:\.11111\爬虫\图片\CSDN\微信图片_20221213191132.jpg" alt="这是一朵花" title="这是一朵玫瑰花" width="500px">
我们看到图片按照原来的比例缩小了很多。
超链接
外部链接：href 引用其他网站的地址
<a href="https://blog.csdn.net/m0_56911284?type=sub&spm=1000.2115.3001.5348">我的博客地址</a>
内部链接：网站内部页面之间的链接. 写相对路径即可。
空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>
下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.rar">下载</a>
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="https://www.baidu.com/"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?pid=ImgDet&rs=1" alt=""></a>
锚点链接: 可以快速定位到页面中的某个位置。
表格标签
table 就是表格tr: 表示表格的一行td: 表示一列th: 表示表头中的一列 <table><tr><td>张三</td><td>18</td></tr><tr><td>李四</td><td>20</td></tr><tr><td>王五</td><td>22</td></tr></table>
<style>td {text-align: center;}</style><table align="center" border="2px" width="500px" height="300px" cellspacing="0"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>18</td></tr><tr><td>李四</td><td>20</td></tr><tr><td>王五</td><td>22</td></tr></table>
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.
列表标签
无序列表：ul有序列表：li自定义列表：dt dd <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>
表单标签
表单标签是用户和页面之间交互的重要手段，大部分的 html 标签都是给用户 ”展示"。表单标签都是给用户 “展示” 大多数是让 用户 来 “输入”。就是通过 form，借助这个 form 用户可以输入一些信息，并把这些信息提交到服务器上面。
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等. name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一. value: input 中的默认值. checked: 默认被选中. (用于单选按钮和多选按钮) maxlength: 设定最大长度.
input 文本框
<input type="text"><br>
input密码框
<input type="password"><br>
单选框
<input type="radio"> 男<input type="radio"> 女
此时我们两个都能选，当我们只能选一个的时候我们该怎么办呢？
<input type="radio" name="gander"> 男<input type="radio" name="gander"> 女 <form><input type="text"><br><input type="password"><br><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>
复选框
<input type="checkbox"> 睡觉<input type="checkbox"> 吃饭<input type="checkbox"> 看电视<input type="checkbox"> 跑步
按钮
通过 button 来实现按钮功能，value 就是按钮里面显示的文字：
<input type="button" value="按钮" onclick="alert('hello')">
上传文件
<input type="file">
下拉菜单
<select><option >请选择年份</option><option selected="selected">2000</option><option >2001</option><option >2002</option></select>
多行编辑框
<textarea cols="30" rows="10"></textarea>
无语义标签
无语义就是没有明确的角色：p 和 span 这两个无语义标签。这两个无语义标签可以代替上面的绝大部分有语义标签的功能（但是 form 这一系列不能替换）。p 默认是一个块级元素（独占一行），span 默认是一个行内元素。代码如下：
<p><span>AAA</span><span>BBB</span><span>CCC</span></p><p><span>aaa</span><span>bbb</span><span>ccc</span></p>
实战案例
简历介绍
<!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><h1>小明的简历</h1><h2>基本信息</h2><img src="D:\.11111\爬虫\图片\搞笑头像\132.jpg" alt="个人头像"><p>求职意向：测试开发工程师</p><p>联系电话: 123456</p><p>个人邮箱: www.qq.com</p><a href="https://blog.csdn.net/m0_56911284?type=sub&spm=1000.2115.3001.5348">我的博客链接</a><br><a href="https://gitee.com/ninimin">我的gitee链接</a><h2>教育背景</h2><ol><li>2008-2014 翻斗小学</li><li>2014-2017 翻斗中学</li><li>2017-2020 翻斗高中</li><li>2020-2024 翻斗大学</li></ol><h2>专业技能</h2><ul><li>熟悉Java的基础语法和面向对象的思想</li><li>熟悉一般的数据结构例如：顺序表，链表，二叉树，哈希表以及集合类的使用</li><li>了解并能简单的使用MySQL进行增删查改</li><li>熟悉网络原理和网络编程如UDP,TCP</li></ul><h2>项目经验</h2><ol><li><h3>留言墙</h3><p>开发时间：2022-12-31</p><p>功能介绍</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></li><li><h3>学习小助手</h3><p>开发时间：2022-12-31</p><p>功能介绍</p><ul><li>支持错题检索</li><li>支持自主复习</li></ul></li></ol><h2>个人评价</h2><p>本人学习能力强</p></body></html>
简历填写
<!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><h1>请填写简历信息</h1><table><tr><td>姓名</td><td><input type="text"></td></tr><!-- 选择性别 --><tr><td>性别</td><td><input type="radio" name="gender" id="male" checked="checked"><label for="male"><img src="男.jpg" alt="" width="15xp">男</label><input type="radio" name="gender" id="female"><label for="female"><img src="女.jpg" alt="" width="15xp"> 女</label></td></tr><!-- 选择出生日期 --><tr><td>出生日期</td><td><select><option value="">请选择年份</option><option value="">1998</option><option value="">1999</option><option value="">2000</option><option value="">2001</option><option value="">2002</option><option value="">2003</option></select><select><option value="">请选择月份</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select><option value="">请选择日期</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option><option value="">31</option></select></td></tr><!-- 就读学校 --><tr><td>就读学校</td><td><input type="text"></td></tr><!-- 应聘岗位 --><tr><td>应聘岗位</td><td><input type="checkbox" name="" id="frontend"><label for="frontend">前端开发</label><input type="checkbox" id="backend"><label for="backend">后端开发</label><input type="checkbox" id="qa"><label for="qs">测试开发</label><input type="checkbox" id="op"><label for="op">运维开发</label></td></tr><!-- 掌握的技能 --><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><!-- 项目经历 --><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><!-- 确认要求 --><tr><td></td><td><input type="checkbox" id="confirm"><label for="confirm">我已仔细阅读上述要求</label></td></tr><tr><td></td><td><a href="#">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认</h3><ul><li>以上信息真实有效</li><li>能够尽快去公司实习</li><li>能够接受公司的加班制度</li></ul></td></tr></table></body></html>
微信便捷交流