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