HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
目录
HTML结构
认识HTML标签
首先我们来写一个hello world吧
第一种你可以只用简历一个
将后缀改为html 里面直接打hello
很简单的就完成了
这样做确实不够规范，但足以体现其鲁棒性。
什么又是鲁棒性呢？
按我们老师讲的就是，你对它越祖鲁，它就越棒。属实是话糙理不糙。
HTML文件基本结构
规范的格式如下
html
大家还是习惯用编译器
这里老铁们idea肯定大部分还是社区版，这块就用起来不是很舒服。
这里使用到的是vscode
（界面感觉也是真的很舒服）
可以说是下载到使用从未如此丝滑，大家不用看任何教程直接官网点下载基本就算完事了。
注：默认手动保存，及时保存。
那么下面我们就来到编译器中去正式的来个hello
这块已经是弄好了的
就是老样子先创建个文件然后呢用vscode打开就完事了
来介绍一位开发者们的好伙伴
游览器中有一个非常重要的组件，开发者工具
通过这个发开发者工具，就可以观察到页面的基本结构（F12快捷键/或右键检查）
元素就可以看到页面的结构了
左上角小箭头点了后就可以选择页面的元素
接下来正正式学习html的各种标签
也可以说学习html就是在学习有哪些标签
HTML描述了页面上有啥东西
快速生成代码框架
HTML 常见标签
注释标签
先说一下注释
打起来还是挺怪的，先<然后！然后两个-就自动出来了
Ctrl加/
切换注释
只有在开发者工具里才可以看到
标题标签
h1 - h6
数字越小，里面内容越组越大，和加标题一样
输入 标签名 tab就可以快速生成一对标签
HTML初心是为了表示 报纸/杂志
这几种标题 就属于报纸中的重要内容
段落标签 p
<p>这是一个段落</p>虽然这些标题是在html中多行编写的，但实际页面中，是按照，单行来展示的。
插入图片（照片本人拍摄）
将图片粘贴同一文件夹中
换行标签 br
格式化标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>图片标签 img
<img src="dog.jpg" alt="">通过src描述图片具体所在的位置
这里的src可以是一个绝对路径，也可以是一个相对路径，还可以是一个网络路径
<img src="D:\JAVA\javacode\前端代码\0419\dog.jpg" alt="">
<img src="dog.jpg"alt="">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.RRm37DFe8kQ77yKpE780fwHaCe?pid=ImgDet&rs=1"alt="">当“中路径出现问题”也就是图片挂了，一个照片裂开的小图标
就可以依靠alt文字描述来说这是啥
不同的HTML标签，支持的属性是不一样的
设置尺寸的时候，涉及px. 叫做像素
width="400px"height="300px"只设置一个方向，另一个方向就会自动等比列缩放
属性不分先后顺序
超链接 a标签
效果就是点击之后能跳转到其他页面
外部链接
<a href="https://www.bilibili.com/video/BV1TY41177QE?spm_id_from=333.1007.top_right_bar_window_history.content.click">10秒7个G！究竟什么瞬间值得用8K RAW来记录！</a>内部链接
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>空链接
<a href="#">空链接</a>网页元素链接
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>下载链接
<a href="dog.zip">图片</a>锚点链接
点击了之后，是在本页面里面跳转到某个特定的位置
链接与连接的区别
连接（Connection）表示客户端和服务器通信就绪的一种状态
像TCP，虚电路就需要先建立连接
链接（link）快捷方式
表格标签
基本使用
table：表示整个表格
tr：表示一行
td：表示一列
th：表示表头中的一列
合并单元格
<style>
td{
text-align: center;
}
</style>
<table border="2px"width="400px"height="300px"cellspacing="0">
<tr>
<td>xx</td>
<td>01</td>
</tr>
<tr>
<td>xxx</td>
<td>10</td>
</tr>
</table>
这就建立了一个比较草率的原始表格，可加属性
<table border="2px">
width和height来设置表格尺寸，同照片像素操作
使用th标签可给表格加上表头
使用cellspacing属性去掉单元格之间的间隙
（有些操作就需要通过css了）
列表标签
无序列表
ul
有序列表
ol
自定义列表
il
<h3>无序列表</h3>
<ul>
<li>linksphotograph</li>
<li>影视飓风</li>
<li>托马斯家的</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>linksphotograph</li>
<li>影视飓风</li>
<li>托马斯家的</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>我喜欢的up主们</dt>
<dt>linksphotograph</dt>
<dt>影视飓风</dt>
<dt>托马斯家的</dt>
</dl>
表单标签
大部分的html都是给用户展示
表单标签，是让用户来“输入”
form 标签
有个比较好玩的就是大家通过F12可以任意编辑里面的信息
input标签
有很多种形态
<form>
<input type="text"><br>
<input type="password"><br>
<input type="radio">男
<input type="radio">女
</form>此时男女都可以选
加name=“gender”和checked来使选项确定且唯一
<input type="text"><br>
<input type="password"><br>
<input type="radio"name="gender">
<label for="">男</label>
<input type="radio"name="gender"checked="checked">
<label for="">女</label>
搭配上label的单选
id属性，任意HTML元素，都可以指定id属性，在一个页面中，id的取值不能重复
复选
<form>
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">拍照
<input type="checkbox">学习
</form>
按钮
<input type="button" value="这是按钮"onclick="alert('hello')"><input type="file">点击选择文件，就会弹出一个对话框，就可以选择本地的一个文件，然后，浏览器就会打开这个文件
进一步的就可以实现 提交/上传 文件到服务器
label 标签
select 标签
<select>
<option>--请选择年份--</option>
<option>2000</option>
<option selected="selcted">2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
使用select表示一个下拉菜单
每个菜单项，是一个option，可以表示selected 来表示默认的选项是啥
textarea标签
多行编辑框
<textarea cols="30" rows="10">前面的标签，都是有语义的标签，每个标签都有一个明确的角色
无语义标签: div & span
div默认是一个块级元素（独占一行）
span默认是一个行内元素（不独占一行）
综合案例:
展示简历信息
<!DOCTYPE html><!--文档类型-->
<html lang="en"><!--//标记语言 方便游览器自带翻译功能使用-->
<head><!--//页面的一些属性-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>这是标题</title>
</head>
<body>
<h1>王某某</h1>
<h2>基本信息</h2>
<p><img src="dog.jpg" alt="菜狗" title="这是我的照片" width="200px"></p>
<p>求职意向: Java测试开发工程师</p>
<p>联系电话: xxx-xxx-xxxx</p>
<p>邮箱: 6545*****@qq.com</p>
<p><a href="https://blog.csdn.net/m0_56364861?spm=1000.2115.3001.5343">我的博客</a></p>
<h2>教育背景</h2>
<ol>
<li>2002 - 2005 xx 幼儿园</li>
<li>2006 - 2012 xx 小学</li>
<li>2013 - 2016 xx 初中</li>
<li>2017 - 2019 xx 高中</li>
<li>2020 - 2023 XX大学 通信工程专业 本科</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>了解Java基础语法,;</li>
<li>了解常见数据结构;</li>
<li>了解mysql;</li>
<li>了解计算机网络;</li>
</ul>
<h2>我的项目</h2>
<h3>无</h3>
<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=, initial-scale=1.0">
<title>这是标题</title>
<table width="500px"cellspacing="0"></table>
<h3>请填写简历信息</h3>
<table>
<tr>
<td>
姓名
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<label for="male"><img src="./image/男.png" alt="" width="20px"> 男</label>
<input type="radio" name="sex" id="female">
<label for="female"><img src="./image/女.png" alt=""
width="20px">女</label>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>
就读学校
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
应聘岗位
</td>
<td>
<input type="checkbox" id="frontend">
<label for="frontend">前端开发</label>
<input type="checkbox" id="backend">
<label for="backend">后端开发</label>
<input type="checkbox" id="qa">
<label for="qa">测试开发</label>
<input type="checkbox" id="op">
<label for="op">运维开发</label>
</td>
</tr>
<tr>
<td>掌握的技能</td>
<td>
<textarea cols="40" rows="20"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea cols="40" rows="20"></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>
Emmet快捷键
|
快速输入标签
|
input[tab]
|
|
快速输入多个标签
|
div*3[tab]
|
|
标签带
id
|
div#sex[tab]
|
|
标签带类名
|
div.sex[tab]
|
|
标签带子元素
|
ul>li*3[tab]
|
|
标签带兄弟元素
|
span+span
|
|
标签带内容
|
div{hello}
|
|
标签带内容
(
带编号
)
|
div{$.hello}
|
HTML 特殊字符
|
空格
|
 
|
| 小于号 | < |
| 大于号 | > |
| 按位与 | & |
HTML特殊字符编码对照表
参考文档
学习 HTML ：指南与教程 - 学习 Web 开发 | MDN (mozilla.org)
bt课件
小结
写的比较啰嗦，但感觉隔一阵子再看也能保证知道当时写的是啥意思。
有什么不对的地方欢迎各位老铁指正，谢谢。
扫一扫
4737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
