1.html

超高中级的咸鱼

已于 2023-03-26 10:49:47 修改

阅读量54

点赞数

分类专栏：前端文章标签： html 前端 css

于 2023-03-26 09:57:35 首次发布

本文链接：https://blog.csdn.net/qq_17686059/article/details/129776115

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <m
    <title>Title</title>
</head>
<body>

</body>
</html>

meta主要用于设置网页中的元数据。在标签内

属性：

charset：指定网页的字符集；
name：指定数据的名称；
content：指定数据的内容；
- keywords：指定网页的关键字，搜索引擎可以通过关键字检索到网页；
- description：网页描述，可以搜索引擎的搜索结果中显示网页的描述‘

其他更多属性可以查询zeal。

Ⅰ、简单语义化标签

标题

设置标题的级别，h1到h6标签分别对应1-6级标题；

h1在网页中的重要性仅次于title标签，一般情况下一个网页只有一个h1标签，h1-3常用，h4-6不常用；

在页面中独占一行的元素称为块元素（block element）

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

标题分组

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

段落

p标签设置一个新段落；块元素；

强调加重

em标签用于语音语调上的加重；

strong标签表示强调，重要内容；

引用

blockquote标签表示引用，块元素；

q标签表示引用，行元素

换行

br标签，行元素，单独标签，可以不需要结束标签

结构化语义标签

用于布局；

header标签表示网页头部；或区块的头部；

main标签表示网页的主体部分；

footer标签表示网页的底部；或区块的底部；

nav标签导航

aside标签侧边栏

article标签表示独立的文章

section标签表示独立的区块，上面标签都不能表示时使用

div标签没有语义，就用来表示一个区块，目前是最常用的；

span标签行内元素，没有任何语义，一般用于在网页中选中文字

行元素与块元素

块元素（block element）在网页中一般通过块元紊来对页面进行布局；
行内元素（inline element)主要用来包裹文字；

Ⅱ、复杂语义化标签

1、列表

有序列表：相关标签ol>、

```
<ol>
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
</ol>
```
无序列表（常用）：相关标签//
- 、
```
<ul>
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
</ul>
```
定义列表（不常用）：相关标签//

、、
```
<dl>
    <dt>被定义项</dt>
    <dd>定义内容</dd>
</dl>
```
一个dt可以对应多个dd；

2、超链接

超链接属于行内元素，用表示，a标签内能嵌套除a标签外的所有任何元素；

相关属性：

id：设置唯一标识或使用样式

href：指定跳转的目标路径

绝对路径（网址）：https://www.xxx.com

相对路径（服务器内部网页）：
- 相同目录内的：xxx.html
- 上一目录：…/xxx.html
- 上上级目录：…/…/xxx.html
- 下一级目录：xx/xxx.html
- 下下级目录：xx/xx/xxx.html
```
<a href="https://www.google.com">百度一下，你就知道</a>
<a href="../vue/slot.html">Vue插槽</a>
```
其他href属性值：
- // # 将href属性值设置为#，点击后界面不会跳转，而是转到当前界面的顶部；
- // #某id值将href属性值设置为#xxx，点击后跳转到指定id标签所在位置
- // javascript: 将href属性值设置为javascript: 此时点击这个超链接什么都不会发生。开发过程中当成占位符使用（留个位置，以后再填加功能）
target：指定超链接打开的位置

可选值：
- _self 默认值，在当前界面打开超链接；
- _blank 在一个新的网页中打开超链接；
- 内联框架的name值将target属性值改成某内联框架的name值时，此时点击超链接会在该框架中显示
```
<a href="https://www.baidu.com" target="_blank">点击此处搜索</a>
```
3、图片

img标签，用于向当前界面引入一个外部图片；

img标签元素属于替换元素（介于块和行内元素之间）

img标签是一个自结束标签；

相关属性：

src：设置图片地址

同超链接的href，可以使用绝对地址和相对地址；

alt：图片的描述

默认不显示，图片无法加载时显示；

width：宽度

height：高度

只修改一个，另外一个会等比缩放；

一般在PC端不建议修改图片大小，需要多大，美工就做多大；

图片的格式;

jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图-一般用来显示照片
gif：支持的颜色比较少，支持简单透明，支持动图、颜色单一的图片
png：支持的颜色丰富，支持复杂透明，不支持动图-颜色丰富,复杂透明图片（专为网页而生)

webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，缺点是兼容性不好，老浏览器可能用不了（IE出来挨打）

base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片；

4、内联框架

iframe标签，用于在当前页面引入一个其他画面；

现在不常用；

相关属性：

src：路径

name:

width：宽度

height：高度

frameboder：边框宽度
```
<iframe src="https://www.google.com" name="iframe_google" width="800px" height="600px" frameboder="0"></iframe>
```
5、音视频

音频标签audio；

同样是替换元素

相关属性：

src：设置文件路径；

controls：显示控制器，无值属性，直接写上就可以，不需要赋值；

autoplay：打开页面时自动播放，无值属性；目前大部分浏览器都不会第一次打开时就自动播放音乐，一般是手动点击一次后，下次开始自动播放；

loop：循环
```
<audio src="./test.mp3" controls autoplay loop></audio>
```
以防遇到不支持的浏览器，可以使用source标签，这样写：
```

<audio controls autoplay loop>
    对不起，你的浏览器不支持音频或者音频文件无效，请检查！
    <source src="./test1.mp3">
    <source src="./test2.mp3">
</audio>
```
视频标签video；

同样是替换元素

属性和音频类似；

超高中级的咸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.html

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，缺点是兼容性不好，老浏览器可能用不了（IE出来挨打）h1在网页中的重要性仅次于title标签，一般情况下一个网页只有一个h1标签，h1-3常用，h4-6不常用；：支持的颜色丰富，支持复杂透明，不支持动图-颜色丰富,复杂透明图片（专为网页而生)：支持的颜色比较丰富，不支持透明效果，不支持动图-一般用来显示照片。：支持的颜色比较少，支持简单透明，支持动图、颜色单一的图片。
复制链接

扫一扫