- 前言
- 一、HTML结构
- 1.1认识HTML标签
- 1.2HTML文件基本结构
- 1.3标签层次结构
- 1.4快速生成代码框架
- 二、HTML常见标签
- 2.1注释标签
- 2.2标题标签h1-h6
- 2.3段落标签p
- 2.4换行标签br
- 2.5格式化标签
- 2.6图片标签img
- 2.7超链接标签a
- 2.8表格标签
- 2.9列表标签
- 2.10 表单标签
- 2.10.1 form标签
- 2.10.2 input 标签
- 2.10.3 label 标签
- 2.10.4 select 标签
- 2.10.5textarea 标签
- 2.11无语义标签
- 三、Emmet快捷键
- 四、综合使用示例：简历展示
前言
一个网站分为两个部分
前端（客户端）+后端（服务器）
通常这里的客户端是指浏览器
后端：java、c++、go、PHP、python都可以实现
前端：当前主流的实现方案是平时所说的前端三剑客——HTML、CSS、js
（CSS和JS会在后面的文章进行介绍）
网页开发刚兴起时，最开始的网站一般都是静态的页面（有点类似看报纸的味道），随着时间的推移，人们不再满足网页当成报纸，于是希望有一些更加复杂的交换 *** 作。于是我们就需要在页面中嵌入一些编程语言，来表示这样的逻辑。
提示：以下是本篇文章正文内容，下面案例可供参考
HTML 代码是由 “标签” 构成的.
比如
<body>hellobody>
标签名 (body) 放到 < > 中
大部分标签成对出现. 为开始标签, 为结束标签.
少数标签只有开始标签, 称为 “单标签”.
开始标签和结束标签之间, 写的是标签的内容. (hello)
开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份z号码).
<body id="myId">hellobody>
<html>
<head>
<title>第一个页面title>
head>
<body>
hello world
body>
html>
html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.
在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
注释不会显示在界面上. 目的是提高代码的可读性.
ctrl + / 快捷键可以快速进行注释/取消注释.
2.2标题标签h1-h6有六个, 从 h1 - h6. 数字越大, 则字体越小
类似一级标题要比二级标题大
<h1>这是一级标题h1>
<h2>这是二级标题h2>
<h3>这是三级标题h3>
<h4>这是四级标题h4>
<h5>这是五级标题h5>
<h6>这是六级标题h6>
输入标签名，再按tab就可以快速生成一对标签
2.3段落标签p段落标签p这个是表示一个段落
<p>这是一个段落p>
比如你没有加段落标签的时候
假如我们现在有一个长文本，你如果不加段落标签，最后展示的效果就是文字都堆在一起，看起来非常难受
如果你加了段落标签
<p>css中的1px并不等于设备的1pxp>
<p>
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
p>
<p>
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
p>
<p>
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
p>
效果就比以前所有文字堆在一起好多了：
ps：如果想对段落再首行缩进2字符，这个html无法单独实现，需要搭配css
html描述了页面的内容（骨架）
css才是描述了页面的样式（每个地方具体是什么样子的）
比如你需要首行缩进，需要添加如下css的代码
在HTML里面，你按回车换行会被直接忽略，如果想在内容中换行必须使用br标签
示例如下：
<p>
在css中我们一般使用px作为单位，<br/>
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不
同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我
们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，
如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随
着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，
分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，
这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素
密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相
当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
p>
效果如下：
注：细心的小伙伴们会发现，br标签是一个单标签，只有开始没有结束。
另外，除了换行直接用回车会被忽略以外，你多个空格也会被直接忽略成1个空格
如果确实需要多个空格，你就需要用转义字符了
除了空格以外，像< > &这些特殊符号也需要用转义字符，
不然系统认为你<是想写<>，但是右边忘了写了，会给你报警告
比如你这里想表示一个空格，你就可以写 ；
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
<strong>strong 加粗strong>
<b>b 加粗b>
<em>倾斜em>
<i>倾斜i>
<del>删除线del>
<s>删除线s>
<ins>下划线ins>
<u>下划线u>
效果如下图
再次重复：虽然这些标签在html文件中是分多行来进行编写的，但是实际显示页面中还是按照单行来进行展示的。
html文件中输入的换行，和显示的换行没有任何关系，要想显示这边的换行，必须使用br标签
ps：但是像之前的h1-h6，p这些都是能独占一行的（块级元素），
但是这里的一组格式化标签就不能独占一行（行级元素）
我们使用img标签来表示图片，
img标签也是一个单标签，不需要结束标签
ing标签里面也可以写很多的属性，其中最重要的属性就是src属性
我们可以通过src描述图片所在的位置
这里的src可以是一个绝对路径，也可以是一个相对路径，还可以是一个网络路径
比如我这里D盘test路径下有sxc这张图片
写法1绝对路径
<img src="D:\test\sxc.jpg">
写法2相对路径
<img src="./sxc.jpg">
你在vscode上面运行保存一下，然后去你那个html文件上看，就会有
还有网络路径的写法，就是你在网络上找一张图片，然后把那个图片地址复制下来写到src里面
你就可以直接加载网上的图片
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.91hlkxQAS8958tTIrK4C1AHaF7?pid=ImgDet&rs=1">
在html的开始标签（结束标签不行），可以给标签设置一些属性，属性都是“键值对”这样的形式
键值对直接使用空格来分割
键和值之间使用=来分割
这里的key是不需要加引号的，value一般用“”引起来
并且一个标签，可以设置多个属性
多个属性之间不分先后顺序
img 标签的其他属性
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
比如我这里弄了个不存在的路径，然后alt为孙狗，那么我这个图片加载不出来，别人就知道这个是“孙狗”
<img src="D:\test1\sxc.jpg" alt="孙狗">
title: 提示文本. 鼠标放到图片上, 就会有提示.
<img src="D:\test\sxc.jpg" alt="孙狗" title="孙笑川">
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
<img src="D:\test\sxc.jpg" alt="孙狗" title="孙笑川" width="500px" height="600px">
设置尺寸的时候，涉及一个重要的单位px，也就是我们常说的像素
每个像素都能显示不同的颜色
如果只是设置宽度/高度，另一个维度就会自动的等比例缩放
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="D:\test\sxc.jpg" alt="孙狗" title="孙笑川" width="500px" height="600px" board="5px">
效果就是你点击之后可以跳转到其他页面
示意如下：
<a href="https://www.baidu.com">这是一个超链接a>
效果如下：
你点了蓝色字体的“这是一个超链接”，你就可以跳转到百度
注意：
a标签，也是行内元素，不是块级元素
空链接：是属于开发阶段，有的链接还没有具体的地址，还不确定，就用#占个位置
如果href里面的链接，是对应到一个普通文件（不是html之类的），就会触发如下 *** 作：
1)下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="D:\test\test.zip">这是个下载链接a>
然后你的网页上就会有test.zip的下载，点了这个链接就会下载test.zip
2)网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="https://www.bilibili.com">
<img src="D:\test\2233娘.jpg" alt="bilibili链接">
a>
如下图，我给网页加了给2233娘的图片，但是光标放上去不再是光标了，而是一个手指
你点击一下2233娘的图片，就可以进入bilibili了
3）锚点链接：可以快速定位到页面中的某个位置
<a href="#one">第一集a>
<a href="#two">第二集a>
<a href="#three">第三集a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
p>
ps：链接和连接的区别
链接（Link）快捷方式
连接（Connection）表示客户端和服务器通信就绪的一种状态
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一列
th: 表示表头中的一列. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
<table>
<tr>
<td>张三td>
<td>19td>
tr>
<tr>
<td>李四td>
<td>20td>
tr>
<tr>
<td>王五td>
<td>20td>
tr>
table>
直接这样写的表格比较空，我们加上bound属性（给表格加个边框）
<table border="2px">
<tr>
<td>张三td>
<td>19td>
tr>
<tr>
<td>李四td>
<td>20td>
tr>
<tr>
<td>王五td>
<td>20td>
tr>
table>
但是感觉表格有点小啊，没关系，我们再加上height和width
<table border="2px" width="500px" height="500px">
<tr>
<td>张三td>
<td>19td>
tr>
<tr>
<td>李四td>
<td>20td>
tr>
<tr>
<td>王五td>
<td>20td>
tr>
table>
这样表格就够大了
仔细想想，表格还需要表头嘛，我们这里用th加一个表头
<table border="2px" width="500px" height="500px">
<th>姓名th>
<th>年龄th>
<tr>
<td>张三td>
<td>19td>
tr>
<tr>
<td>李四td>
<td>20td>
tr>
<tr>
<td>王五td>
<td>20td>
tr>
table>
还有个问题就是，表格和表格直接有空隙，看起来有点难受，我们把cellspacing设置为0即可
<table border="2px" width="500px" height="500px" cellspacing="0">
<th>姓名th>
<th>年龄th>
<tr>
<td>张三td>
<td>19td>
tr>
<tr>
<td>李四td>
<td>20td>
tr>
<tr>
<td>王五td>
<td>20td>
tr>
table>
如果想让表格内容居中，可以使用css中的text-align属性来使表格内容居中
<style>
td{
text-align: center;
}
style>
<table border="2px" width="500px" height="500px" cellspacing="0">
<th>姓名th>
<th>年龄th>
<tr>
<td>张三td>
<td>19td>
tr>
<tr>
<td>李四td>
<td>20td>
tr>
<tr>
<td>王五td>
<td>20td>
tr>
table>
这样子就可以使文字居中了。
ps：
列表标签，主要是用来罗列一组并列的数据
无序列表、有序列表、自定义列表
无序列表[重要] ul li
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) 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>
我们实际开发中，最常用的还是无序列表，而且我们的使用场景并不仅仅是本身的显示行为。
比如你上b站，你点番剧，他会给你推相关的内容，比如下图的：连载动画、完结动画、新番时间表…
大部分的html标签都是给用户“展示”xx东西
表单标签，是用户和页面之间交互的重要手段
表单标签，是让用户来输入东西的
表单标签分成两个部分:表单域和表单控件
表单域: 包含表单元素的区域. 重点是 form 标签.
<form action="test.html">
... [form 的内容]
form>
表单控件: 输入框, 提交按钮等. 重点是 input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
1.单行文本框
<input type="text">
网页效果如下：你可以在单行文本框里输入一些东西
2.密码框
<input type="password">
网页效果如下：和单行文本框区别就是你输入的东西会被隐藏起来
3.单选框
<input type="radio" >男
<input type="radio" >女
乍一看好像没什么问题，但你点两下就知道了，我们选了其中一个之后另一个还可以点，这不是我们想要的
我们给这个单选框加name属性
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 只能多选一.
<input type="radio" name="gender" >男
<input type="radio" name="gender" >女
checked: 默认被选中. (用于单选按钮和多选按钮)
<input type="radio" name="sex" checked="checked">女
4.复选框
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打游戏
5.普通按钮
<input type="button" value="我是个按钮">
如果想点击按钮有反应，我们后面js会进行介绍
6.提交按钮
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
7.清空按钮
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
8. 选择文件
点击选择文件, 会d出对话框, 你就可以选择一个本地文件.
然后浏览器会打开这个文件
进一步你就可以实现上传/提交 文件到服务器 （服务器这里后面讲）
<input type="file">
如果你想实现点击文字就可以选中按钮，可以搭配label使用
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
下拉菜单
默认是第一个选项
<select >
<option >-- 请选择年份 --option>
<option >2000option>
<option >2001option>
<option >2002option>
<option >2003option>
<option >2004option>
select>
如果你想自定义默认选项，option 中定义 selected=“selected” 表示默认选中
比如我这里要默认2001是默认选项
<select >
<option >-- 请选择年份 --option>
<option >2000option>
<option selected="selected" >2001option>
<option >2002option>
<option >2003option>
<option >2004option>
select>
<textarea rows="3" cols="50"> textarea>
你可以拉动右下角让文本框变大，也可以在里面输入一些文字
div和span
这两个标签实际运用是出厂率最高的
前面我们介绍的标签，是“有语义”的标签，每个标签都有一个明确的角色
最初HTML诞生的初衷就是为了表示“报纸/杂志”这样的媒体
但是随着时代的发展，HTML已经不仅仅是作为“报纸”而是变成了一个“应用程序”
也就是说网页的页面更加复杂，交换效果更加丰富
比起有语义标签，无语义标签更适合现在的网页，div和span可以代替上述绝大部分语义标签的功能（除了form这类代替不了，其他基本都可替代）
div默认是一个块级元素（独占一行，相当于一个大盒子）
span默认是一个行内元素（不独占一行，相当于一个小盒子）
<div>
<span>咬人猫span>
<span>咬人猫span>
<span>咬人猫span>
div>
<div>
<span>兔总裁span>
<span>兔总裁span>
<span>兔总裁span>
div>
<div>
<span>阿叶君span>
<span>阿叶君span>
<span>阿叶君span>
div>
快速输入标签
input[tab]
快速输入多个标签
div*3[tab]
标签带id
div#sex[tab]
标签带类名
div.sex[tab]
标签带子元素
ul>li*3[tab]
标签带兄弟元素
span+span
标签带内容
div{hello}
标签带内容(带编号)
div{$.hello}
<h1>某某某h1>
<div>
<h2>基本信息h2>
<img src="D:\test\sxc.jpg" width="500PX">
<p><span>求职意向：span>Java 开发工程师p>
<p><span>联系电话：span>XXX-XXX-XXXXp>
<p><span>邮箱：span>xxx@foxmail.comp>
<p><a href="https://github.com">我的 githuba>p>
<p><a href="https://csdn.com">我的 博客a>p>
div>
<div>
<h2>教育背景h2>
<ol>
<li>1990 - 1996 小葵花幼儿园 幼儿园li>
<li>1996 - 2002 小葵花小学 小学li>
<li>2002 - 2005 小葵花中学 初中li>
<li>2005 - 2008 小葵花中学 高中li>
<li>2008 - 2012 小葵花大学 计算机专业 本科li>
ol>
div>
<div>
<h2>专业技能h2>
<ul>
<li>Java 基础语法扎实，已经刷了 800 道 Leetcode 题；li>
<li>常见数据结构都可以独立实现并熟练应用；li>
<li>熟知计算机网络理论，并且可以独立排查常见问题；li>
<li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能。li>
ul>
div>
<div>
<h2>我的项目h2>
<ol>
<li>
<h3>留言墙h3>
<p>开发时间：2008年9月 到 2008年12月p>
<p>功能介绍：
<ul>
<li>支持留言发布li>
<li>支持匿名留言li>
ul>
p>
li>
<li>
<h3>学习小助手h3>
<p>开发时间：2008年9月 到 2008年12月p>
<p>功能介绍：
<ul>
<li>支持错题检索li>
<li>支持同学探讨li>
ul>
p>
li>
ol>
div>
<div>
<h2>个人评价h2>
<p>在校期间，学习成绩优良，多次获得奖学金。p>
div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）