简单认识"/>
html简单认识
## html
HTML是 HyperText Markup Language 简写，意思超文本标记语言
.html为扩展名的文件，可以被网页直接访问的文件。
html是通过不同 标签 来标记不同的内容
#html版本
html1.0 第一个版本 1991年
html2.0 95年发布
html3.2 97年由w3c发布
html4.01 99年发布，增加了对样式表的支持(css)，适应了pc互联网时代
html5 08年发布，提升富媒体，富应用能力，适应了移动互联网时代
##html标签
标签不区分大小写，一般使用小写字母
<>里面的叫标签
标签分为闭合标签：<html></html>和自闭合标签：<meta charset="utf-8" />
标签属性：在开始标签空格后面的都是标签属性 可以有多个 以空格来做间隙
<!-- 定义文档的类型 h5的声明，不是html标签 -->
<!DOCTYPE html>
<html><!-- 根元素 --><head><!-- 头部 --><!-- meta标签用来设置网页中的元数据 不是给用户看的name 指定数据的名称keywords 表示网站的关键字content 指定数据的内容description 表示对网站的描述，内容会显示在搜索引擎当中--><meta charset="utf-8" /><!-- 搜索结果的标题 也作为页面的标题--><title>我的第一个页面</title></head><body><!-- 身体 -->这是我的第一个html</body>
</html>##基础结构
html：网页主体
head：网页头部
title：网页标题
body：网页身体
### head中放置的内容
```html<head><!-- 网页中能是别的字符集类型 --><meta charset="UTF-8"><!-- 设备适配 content="IE=edge" 把ie浏览器默认制定为edge --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 支持移动设备 width=device-width 宽度 = 设备宽度 initial-scale=1.0 缩放比例1:1 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页中的标题 --><title>Document</title><!-- 引入外部文件stylesheet css样式引入shortcut icon 网页图标引入 引入图图片类型为.ico文件--><link rel="stylesheet" href=""><link rel="shortcut icon" href="./images/top.ico" type="image/x-icon"><!-- 关键字：提高seo搜索的准确性，让更多的人能看见 --><meta name="keywords" content="搜索关键词"><!-- 网页描述信息：网站简介 --><meta name="description" content="这是个网站的简介，主要是为了抓住大家眼球"><!-- 部分 网站发送外部链接的时候 会带入的描述 --><meta name="og:description" content="这是个网站的简介，主要是为了抓住大家眼球"><!-- 当页面刷新时候的一些行为 --><!-- <meta http-equiv="refresh" content="0; url="> --></head>```##注释
开发过程中，有些内容不在页面中展示的，我们就注释掉
注释的作用
* 给一段代码添加解释，告诉程序猿我是做什么的
* 有部分功能，目前不上线，以后没准上线
* /* eslint-disable @typescript-eslint/no-var-requires */ 忽略代码eslint校验
html中： <!-- 内容 -->
css中：/* */ (老项目中可能会出现 //）
js中：/* */ 多行 // 单行
快捷键： ctrl（command） + /
### 标签结构
<div>美菜网</div>
1. 标签组成 `<标签名>美菜网</标签名>` 组成
2. 双标签：由 开始标签 内容 结束标签（/代表结束标签）组成
3. 单标签：自己独立的标签组成 <br> <hr>
### 标签与标签之间的关系
父子关系（嵌套关系）：
```html
<!-- 父子关系（嵌套关系） -->
<div>
这个就是一个父亲
<p>
这是一个儿子
<span>这是一个文字</span>
</p>
</div>
```
快捷键写法 `div>p>span`
兄弟关系（并列关系）：
```html
<div>大哥</div>
<p>二哥</p>
```
快捷键写法 `div+p`
## 文本标签 (掌握)
在网页中用于写文字内容的标签
### 标题标签
场景：在新闻、文章中，都离不开标题，突出文章主题
所有文字类的标签中， `换行` 都会被编译成 一个`空格`
h1～h6
1～6标题大小逐步减小，权重（SEO）依次递减
特点：
1. 文字都有加粗
2. 文字都有变大，1～6标题大小逐步减小
3. 独占一行,块元素 （在页面中独占一行的元素叫块元素 block element）
注意点：
h类不嵌套h，h只适合嵌套小段文字
```html
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题1</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
```
### 段落标签
场景：在新闻、文章中，用于分段显示
在使用过程中有一些文字，比如：空格（ ）、<、> 需要对一些特殊 字符做一些转译处理
特点：
1. 段落与段落之间有明显空隙
2. 独占一行
注意点：
p类不嵌套h、h，p只适合嵌套小段文字
```html
<p>正常段落标签</p>
<pre>预留格式的段落标签</pre>
```
### 换行标签
场景：让文字强制换行
```html
<br>
```
### 水平线标签
场景：分割不同的主题
```html
<hr>
```
### 文本标签
标签地址：/
垃圾桶：废弃标签
感叹号：犹豫中，要不要淘汰
小瓶子：实验中（不稳定，在测试中）
出现以上标记的内容尽量不要使用
span：小段文字，有不同样式的文字段
b: 加粗字体 strong：加粗字体，更加语义化，更容被seo搜索到
u: 下划线 ins：下划线
i：倾斜 em：倾斜
s：删除 del：删除
mark：标记模块，搜索内容标记
sub：下标
sup：上标
small: 小字显示
center： 文字居中
blockquote：长引用 是块级元素
q：短引用 行内元素
##行内元素 块元素
块元素 独占一行 div p title 块元素进行页面布局 可以嵌套块元素和行内元素
行内元素 和其它共享一行 span 一般不放块级元素
p元素不是任何元素都可以放
## 媒体标签
### 图片标签
场景：网页中的图片展示
```html
<img width="200" height="300" src="./images/map.jpg" alt="这是一个地图图片" title="鼠标悬停时候显示的提示信息">
```
图片标签属性
* src: 图片所在地址
* alt：图片加载错误时，的提示信息
* title：（大多数标签都可以添加的属性）鼠标悬停时候显示的提示信息
* width: 图片宽
* height：图片高
扩展属性注意点：
1. 标签的属性要写在开始标签的内容
2. 标签上可以放置多个属性
3. 属性之间没有先后顺序
4. 属性与属性之间要用空格隔开
5. 标签名与属性名之间必须有空格
### 音频
音频格式：/%E9%9F%B3%E9%A2%91%E6%A0%BC%E5%BC%8F/3234139
audio
场景：在网页中加载音乐
```html
<audio controls>
<!-- media: 媒体 srcset: 加密 -->
<!-- <source media="(min-width: )" srcset=""> -->
<source src="./music.mp3" type="audio/mp3">
<source src=".mp3" type="audio/mp3">
</audio>
```
属性值
* src：音频加载地址
* controls 控制条显示
* autoplay 自动播放（兼容问题）配合静音使用
* muted 静音
* loop 循环播放
<source> 资源加载，适配不同的媒体格式
src：音频加载地址
type：媒体类型
加密：
注意点：
目前音频标签只支持三种格式：MP3、Wav、Ogg
只支持html5
### 视频
场景：在网页中加载视频
```html
<video src="./video.mp4" controls autoplay muted loop>
<source src="./video.mp4" type="video/mp4">
</video>
```
属性值
* src：音频加载地址
* controls 控制条显示
* autoplay 自动播放（兼容问题）配合静音使用
* muted 静音
* loop 循环播放
<source> 资源加载，适配不同的媒体格式
src：音频加载地址
type：媒体类型
注意点：
目前音频标签只支持三种格式：MP4、WebM、Ogg
只支持html5
### 外部内容嵌入元素
可以嵌入网页、图片、音频、视频、flsh，比较早的媒体加载工具
```html
<embed type="video/mp4" src="./video.mp4" width="300" height="300">
```
## 超链接标签 （必须掌握）
场景：点击之后从一个页面跳转到另一个页面
属性
* href：跳转地址
默认没有访问过的 地址 是蓝色
默认有访问过的 地址 是紫色
默认点击的 地址 是红色
* target：跳转目标
_blank: 打开新窗口
_self: 当前页面打开
_parent: 继承父级弹框
href取值
* 外部链接：/
* 内部链接：./03外部内容嵌入元素.html（你所做的项目中的一个文件）
* 无链接状态： href="" 页面会刷新（影响性能）href="#"和href="javascript:;"点击页面不刷新
锚链接场景：点击之后，会根据锚点地址跳转到当前页面的指定内容
```html
<a href="#top">韩寒</a>
<a href="#bottom">马云</a>
<p id="top"></p>
</a>
```
注意点：
1. 锚点 #top 必须绑定 标签的 id="top"
2. 如果内容比较多，锚点指定内容跳转到上面
3. 如果内容比较少，且有滚动，最后的锚点跳转内容会在底部显示
格式化文档快捷键：⬆️ + alt + F
## 路径（必须掌握）
场景：加载图片、音频、视频、超链接等等
<!-- src href -->
分类：
相对路径：
当前文件：当前的html页面
目标文件：需要添加的资源
相对路径：
同级目录：同一个文件包裹叫同级目录 文件名 或 ./开头
下级目录：在同级文件夹中的内容 文件名 或 ./开头 找下面的文件夹名
上级目录：当前文件夹的平级 ../ 往上几层就有几个../
绝对路径：
本地：/Users/mac/Desktop/平日班/html/day2/案例/video.mp4
盘符开头：D:\download\案例\video.mp4
外部链接：完整的网络地址：/
```html
<!-- 同级访问 -->
<a href="01音频.html">同级访问</a>
<a href="./02视频.html">同级访问</a>
<!-- 下级 -->
<img src="images/2.png" alt="">
<img src="./images/2.png" alt="">
<!-- 上级 -->
<audio src="../作业/02-（案例）综合案例2-今日热词案例/media/1.mp3" controls></audio>
<video src="../../day1/案例/video.mp4" controls></video>
```
## 列表标签
场景：添加网页中展示相似内容的模块
特点：按照行方式排列，整齐显示内容
分类：有序列表、无序列表、自定义列表
### 无序列表（掌握）
无序列表：网页中没有顺序的列表，例如：新闻列表、导航菜单列表
特点：列表每一项前面默认显示圆点
```html
<ul>
<li>1</li>
<li><a href="">3</a></li>
</ul>
```
注意点：
1. ul标签中只允许包含li标签
2. li标签可以包含任意内容
type属性：(了解，如果需要更改一般使用CSS)
* disc 列表样式实心圆
* circle 列表样式空心圆
* square 列表样式小方块
* none 列表样式没有
### 有序列表（能掌握就 掌握）
有序列表：网页中有顺序的列表，例如：榜单
```html
<ol>
<li>饿了么再起诉美团不正当竞争，索赔100万</li>
<li>饿了么再起诉美团不正当竞争，索赔100万</li>
</ol>
```
注意点：
1. ol标签中只允许包含li标签
2. li标签可以包含任意内容
type属性：(了解)
* 1 数字
* a 小写字母
* A 大写字母
* i 小写罗马数字
* I 大写罗马数字
### 自定义列表
场景：在网页底部导航中通常会使用到自定义列表
```html
<dl>
<dt>自定义列表标题</dt>
<dd>自定义列表的内容</dd>
</dl>
```
特点：
dd标签会默认显示为 缩进效果
注意点：
1. dl标签中只允许包含dt或dd标签
2. dt或dd标签可以包含任意内容
## 表格 掌握
场景：在网页中以行 + 列整齐展示的单元格，例如：购物单，信息列表
```html
<!-- 表格 border添加边框 -->
<table border="1">
<!-- tr代表行 -->
<tr>
<td>单元格内容</td>
<td>单元格</td>
</tr>
</table>
```
table: 表示整体表格，可以包裹多个tr
tr：代表表格行，可以包裹td/th
td：表格的单元格，可以包裹内容
标签之间的嵌套关系 table>tr>td/th
### 表格相关属性（基本记住）
table属性：
* border 表格边框宽度 （单位是px）
* width 表格宽度
* height 表格高度
* cellpadding="10" 定义单元格与 内容之间的距离
* cellspacing 定义单元格与单元格之间的距离
以上所设置的属性值都是数字，单位都是px
* align: 单元格水平方向上的对齐方式
取值：
* left 左对齐（默认值）
* right 右对齐
* center 居中
```html
<table border="10" cellpadding="10" width="600" height="300" cellspacing="20" align="left">
<!-- tr代表行 -->
<tr>
<td>单元格内容</td>
<td>单元格</td>
</tr>
</table>
```
td/th属性
* align: 单元格水平方向上的对齐方式
取值：
* left 左对齐（默认值）
* right 右对齐
* center 居中
* valign设置垂直对齐方式
取值：
* top 顶对齐
* bottom 底部对齐
* middle 居中对齐
```html
<td align="right" valign="middle">单元格内容</td>
```
### 表格中的标题和表头
标题：在整个表格之上显示标题，默认文字大小正常，居中显示，caption只能写在table中
表头：表示表格的表头，第一行，默认加粗，居中显示，可以用来替代td，也要写在tr里
```html
<table border="1" width="500">
<caption>表格标题</caption>
<!-- 表头 -->
<tr>
<th align="left">姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</table>
```
### 表格中的结构
场景：让表格结构分组，突出表格不同部分（头部、主体、底部）
thead: 表格头部
tbody：表格主体
tfoot: 表格底部
注意点：
1. 表格结构标签只用于包裹tr
2. 表格结构标签可以省略，省略后会默认包裹tbody
### 单元格合并（掌握）
场景：将水平或垂直的多个单元格合并成一个单元格
* colspan: 跨列合并，将多个单元格水平合并
* rowspan：跨行合并，将多个单元格垂直合并
```html
<table border="1">
<tr>
<th>状态码</th>
<th>描述</th>
<th>详情</th>
</tr>
<tr>
<td>200</td>
<td colspan="2">请求成功</td>
</tr>
<tr>
<!-- rowspan 垂直合并 -->
<td rowspan="2">400</td>
<td colspan="2">找不到</td>
</tr>
<tr>
<!-- colspan 水平合并 -->
<td colspan="2">页面走失</td>
</tr>
</table>
```
注意点：
只有同一结构标签中的单元格才能合并，不能跨结构单元格合并（不能跨：thead、tbody、tfoot）
更多推荐
html简单认识
发布评论