这是我参与「第四届青训营 」笔记创作活动的的第1天
Web标准
Web标准要求页面实现：结构、表现、行为三层分离
- 结构层：HTML 页面元素和内容
- 表现层：CSS 网页元素的外观和位置等页面样式
- 行为层：JavaScript 网页模型的定义与页面交互
HTML：超文本标记语言，主要通过HTML标签对网页中的内容进行描述。
基本结构
<html> <!--整体 -->
<head> <!-- 头部 -->
<title>网页标题</title>
</head>
<body> <!-- 主体 -->
网页的主体内容
</body>
</html>
语法规范
HTML注释
作用：帮助开发人员理解代码 ctrl + /
HTML标签的构成
常见标签由两部分组成，称为双标签。
少数标签由一部分组成，称为单标签。
HTML标签的属性
标签的属性： 属性名=“属性值”
属性注意点：
1、标签属性写在开始标签内部
2、标签上可以同时存在多个属性
3、属性之间用空格隔开
4、标签名与属性之间 用空格隔开
HTML标签的关系
- 父子关系（嵌套关系）
<head>
<title></title>
</head>
- 兄弟关系（并列关系）
<head></head>
<body></body>
HTML标签
排版标签
标题标签
<h1></h1>
<h2></h2>
<h6></h6>
<!-- 选中h1的1，按ctrl+d，
可同时修改开始和结束标签 -->
特点：
1. 文字都有加粗
2. 文字都有变大，从h1->h6逐渐减小
3. 独占一行
段落标签
<p>我是段落标签</p>
特点：
1.段落与段落之间存在间隙
2.独占一行
换行标签
<br> <!-- 强制换行 -->
水平线标签
<hr> <!-- 显示一条水平线 -->
引用标签
<!-- 长引用 -->
<blockquote cite="http://t.cn/RfjKO0F"> <!-- 快捷引用 -->
<p>
-----
</p>
</blockquote>
<!-- 短引用 -->
<cite>小王子</cite> <!-- 引用文章标题或书名 -->
<q></q> <!-- 引用之前用过的内容 -->
其他标签
<!-- 代码标签 -->
<code>单行代码引用格式</code>
<pre><code>多行代码引用格式</code></pre>
文本格式化标签
属性：
| 普通 | 强调 |
|---|---|
<b>加粗</b> | <strong>加粗</strong> |
<u>下划线</u> | <ins>下划线</ins> |
<i>倾斜</i> | <em>倾斜</em> |
<s>删除线</s> | <del>删除线</del> |
选择标签的原则：标签语义化（后一排的表示强调）
媒体标签
图片标签
<img src="" alt="">
属性：
| 属性名 | 功能 |
|---|---|
| src | 目标图片的路径 |
| alt | 替换文本（图片加载失败显示的文本） |
| title | 提示文本（鼠标悬停时显示的文本） |
| width | 图片宽度 |
| height | 图片高度 |
单独设置会等比缩放，同时设置会跟着操作走，有可能会比例失调。
路径
绝对路径
定义：目录下的绝对位置，通常从盘符开始。
盘符开头： D:\day01\images\q.jpg
完整的网络地址：www.baidu.com
Ps: 盘符开始的为反斜杠
相对路径（常用）
定义：从当前文件开始出发找目标文件的过程
分类：同级目录、下级目录和上级目录
-
同级目录
即当前文件和目标文件在同一目录中
<img src="目标图片.gif"> <img src="./目标图片.gif"> -
下级目录
目标文件在下级目录中
<img src="目标文件夹/目标文件名"> <!-- 可以直接输入./选中下级目录即可 --> -
上级目录
目标文件在上级目录中
<img src="../目标图片.gif"> <!-- 直接输入../即可 -->
音频标签
<audio src="./music.mp3" controls></audio>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
音频标签支持三种格式：MP3、Wav、Ogg
视频标签
<video src="./video.mp4" controls></video>
属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌中需配合muted实现静音） |
| muted | 谷歌浏览器中，打开页面静音播放 |
| loop | 循环播放 |
链接标签
<a href="./目标网页.html"></a>
<a href="#">空链接</a>
属性：
| 属性名 | 功能 |
|---|---|
| href | 目标网页的路径 |
| target | 目标网页的打开方式【 _self （默认值，当前网页跳转） / _blank （新窗口跳转）】 |
空链接的作用：
- 直接回到网页顶部
- 不确定该链接最终跳转位置
列表、表格、表单
列表标签
- 无序列表（圆点标识）
| 标签名 | 说明 |
|---|---|
| ul | 表示列表的整体，只用于包裹li标签 |
| li | 用于包含每一行的内容 |
- 有序列表(序号标识)
| 标签名 | 说明 |
|---|---|
| ol | 表示列表的整体，只用于包裹li标签 |
| li | 用于包含每一行的内容 |
- 自定义列表
| 标签名 | 说明 |
|---|---|
| dl | 表示列表的整体，只用于包裹dt/dd标签 |
| dt | 表示自定义标题的主题 |
| dd | 用于包含每一项的内容（默认显示缩进效果） |
表格标签
| 标签名 | 说明 |
|---|---|
| table | 表示整体，可用于包裹多个tr |
| tr | 行，用于包裹td |
| td | 表格单元格，可用于包裹内容 |
属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
表格大标题、表头单元格
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表格第一行，默认内部文字加粗居中显示 |
caption标签写下table标签内部，可嵌套，可在内部加h1等标签
th标签写在tr标签内部【替换一个td标签】
表格的结构标签【结构分组】
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
表格结构标签内部用于包裹tr标签，写在table标签内
表格的结构标签可忽略
合并单元格
<td rowspan="2">100分</td> <!-- 向下合并一个单元格，即两个单元格合并 -->
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，向下合并 |
| colspan | 合并单元格的个数 | 跨列合并，向右合并 |
表单标签
form标签
加form标签才能激活按钮相关功能
input标签
场景：收集用户信息如登录页 / 注册页
type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，单行文本 |
| input | password | 密码框 |
| input | radio | 单选框 |
| input | checkbox | 多选框 |
| input | file | 文件选择，上传文件 |
| input | submit | 提交按钮 |
| input | reset | 重置按钮 |
| input | button | 普通按钮，可配合js添加功能 |
| input | date | 日期 |
<form>
昵称：<input type="text"><br><br>
密码：<input type="password">
性别：<input type="radio" name="sex" checked >男<input type= "radio" name="sex" >女
爱好：<input type="checkbox">敲代码<input type="checkbox">熬夜<br><br>
<input type="file">
</form>
type属性值
- 文本框
| 属性名 | 说明 |
|---|---|
| placeholder | 提示用户输入内容的文本 |
- 密码框
| 属性名 | 说明 |
|---|---|
| placeholder | 提示用户输入内容的文本 |
- 单选框
| 属性名 | 说明 |
|---|---|
| name | 分组。相同name值的单选框为一组 |
| checked | 默认选中 |
- 复选框
| 属性名 | 说明 |
|---|---|
| checked | 默认选中 |
- 文件选择
| 属性名 | 说明 |
|---|---|
| multiple | 多文件选择 |
- 按钮
| 标签名 | 属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮 |
| input | reset | 重置按钮 |
| input | button | 普通按钮。可加value值设置显示文字 |
实现按钮功能，必须要配合form标签使用。即用form标签把表单标签一起包裹起来。
value属性 / name属性
value属性：用户输入的内容，提交后将value中的内容发送给后端
name属性：当前控件的含义，提交后告诉后端value属性的含义
即：后端接收到的格式为—— name属性值 = value属性值
自由输入值
<!--自由输入，可提示用户 -->
<input list="countries"/>
<datalist id="countries">
<option>Greecs</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
button标签
场景：在网页中显示用户点击的按钮【双标签，可包裹文字、图片等】
| 标签名 | 属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮 |
| button | reset | 重置按钮 |
| button | button | 普通按钮 |
select标签
场景：提供多个选择项的下拉菜单表单控件
标签：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中
textarea标签
场景：可输入多行文本的表单控件
| 属性 | 说明 |
|---|---|
| cols | 宽度 |
| rows | 高度 |
右下角可以拖拽改变大小
对于样式效果推荐使用CSS
label标签
场景：绑定内容与表单标签的关系
使用方法：
-
1.使用label标签把内容包裹起来
2.表单标签上添加id属性
3.label标签的for属性中设置对应的id属性
<input type="checkbox" id="one"><label for="one">敲代码</label> -
1.直接用label标签把内容和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
<label> <input type="checkbox">熬夜 </label>
语义化标签
没有语义的布局标签——div和span
div：一行只显示一个（独占一行）
span：一行可以显示多个
有语义的布局标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
字符实体
html中的空格合并现象
场景：同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出来一个
常见字符实体
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | & nbsp; | |
| < | 小于号 | & lt; |
| 大于号 | & gt; | |
| & | 和号 | & amp; |
| "" | 引号 | & quot; |
| '' | 撇号 | & apos; |
| ¢ | 分（cent） | & cent; |
| £ | 镑（pound） | & pound; |
| ￥ | 元（yen） | & yen; |
| € | 欧元（euro） | & euro; |
| § | 小节 | & sect; |
| © | 版权（copyright） | & copy; |
| ® | 注册商标 | & reg; |
| × | 乘号 | & times; |
| ÷ | 除号 | & divide; |
希望我们都能从HTML扬帆起航，继续进入CSS的世界。
