简单认识"/>
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简单认识
发布评论