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>
填写简历信息
![](https://i-blog.csdnimg.cn/blog_migrate/27bd9d84ebb570fd1e113ce994983c3a.png)
<!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课件
小结
写的比较啰嗦,但感觉隔一阵子再看也能保证知道当时写的是啥意思。
有什么不对的地方欢迎各位老铁指正,谢谢。