html基础标签

柠檬养乐多.

于 2021-12-30 16:42:41 发布

阅读量170

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/ysj94s7/article/details/122240254

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--

1.加粗标签

作用：对文本实现加粗效果

语法：<b>文本</b> <strong>文本</strong>

区别：后者更加具有语义话

<b>柠檬养乐多</b>

<strong>柠檬养乐多 </strong>

2.倾斜标签

作用：对文本实现倾斜效果

语法：<i>文本</i> <em>文本</em> <var>文本</var>

区别：em更具语义化

<var>柠檬养乐多</var>

<i>柠檬养乐多</i>

<em>柠檬养乐多</em>

3.下划线标签

作用：为文本添加下划线修饰

语法：<u>文本</u>

<u>柠檬养乐多</u>

4.标签嵌套：一层包裹一层

实现加粗倾斜下划线混合出现两个效果及以上

标签嵌套的时候一般遵循的时候：合理层级嵌套(<u><b></b></u> 等价于<b><u></u></b>)

不能出现交叉嵌套(<u><b></u></b>)

5.角标标签：

上角标

语法：<sup>数值</sup>

下角标

语法：<sub>数值</sub>

6.删除线

作用：给文本添加删除线修饰

语法：<s>文本</s> <del>文本</del>

区别：后者更具语义化

7.字体标签font

作用：对文本进行颜色大小和字体的修饰

语法：<font color="颜色" size="大小（1-7）" face="字体">文本</font>

<font color="yellowgreen" size="7" face="微软雅黑"><b><i><u><s>柠檬养乐多</s></u></i></b></font>

8.段落标签

lorem（虚拟文本）

p标签

标签语法：<p>文本</p>

独立的段落标签

每一个p之间是有比较大的段落间距的

用于定义HTML中的段落

9.换行标签

语法：<br>

作用：让文本强制换行的

10.列表

1）有序列表

含义：一个有顺序性的列表清单

默认是以数字显示的列表项

type="a，A，I，i，1" 1为默认值

type属性加在ol 里面

修改列表项的起始

start="数值" 加在ol里面

reversed="reversed"倒叙排列加在ol里面

语法：

<ol>

</ol>

前面的列表项数字就体现了有序性

注意：ol里面只能嵌套li，如果想要嵌套其他内容的话，需要在li里面嵌套

2）无序列表

含义：没有顺序的列表清单

默认的列表项是以黑色的实心圆点为显示效果

修改列表项显示类型

type=""

disc=======黑色实心圆点

circle=====空心圆

square=====黑色实心正方形

none=======取消列表项（实际开发应用频率比较高）

嵌套还是在li里面嵌套

语法：

<ul>

</ul>

3）自定义列表

可以自己定义的列表

<dl>

<dd>文本，图片的解释说明</dd>

</dl>

应用场景：

问答列表，图文混排列表

右键格式化文档------整理代码

11.水平线标签

<hr> 单标签

属性：width（宽度）="500px"

align（水平对齐方式）=left/rught/center(默认)

取消阴影属性 noshade="noshade" noshade(属性和属性值一样可以简写)

颜色属性 color="颜色"

size（高度）="500px" 水平线的高度是size

 半角空格

&emsp;全角空格

一般遵循的是块级嵌套行内而不是行内嵌套块级

12.图片标签

基本语法：<img src="路径">

路径的概念：文件存储的一个途径，一个地址

1）相对路径

通过文件和文件之间的关系去查找对应的文件

img/pic.png

2）绝对路径

是一个完整的值，互联网的地址，某一盘符下面的完整地址

http://www.baidu.com/img/pic/123.png

C://视频/图片/112233/pic/123.png

相对路径：

1）图片和页面之间是同级关系的话，可以直接把图片的名字当做路径使用

2.jpg <img src="2.jpg">

2）图片所在的文件夹和页面是同级关系的话，先进入到img里面然后再去找对应的图片

img/2.jpg <img src="img/2.jpg">

3）页面所在的文件夹和图片之间是同级关系的话，先要返回上一级别然后再去查找对应的图片

../2.jpg <img src="../2.jpg">

实际开发的时候可以返回多级目前来看经常返回三级 ../../../返回上三级

../../是两级 ../是一级 ./是当前目录（可以省略不要）

图片的额外属性

alt="属性描述属性"

当图片不能正常加载或者是图片由于网络原因加载失败的时候，出现一个破损图标

会有文本提示

作用：做页面优化的时候，方便爬虫爬取

title属性

图片的描述

当鼠标放在图片上面的时候提示文本

区别在于哪里：

相同点：描述

不同点：破损文件显示alt；鼠标放上去就显示title

alt用于做优化的

width="px"

height="px"

可以控制图片的高度和宽度==但是容易让图片变形

宽度和高度设置一个的时候，可以出现一个等比例缩放的情况

13.超链接标签

语法：<a href="路径/锚点">文本/图片 </a>

功能：

1）超链接功能

含义：实现不同页面之间的跳转

超链接的默认效果：

自带下划线效果，自带蓝色文本，超链接被访问点击后会变成紫色

跳转网址要带http：//协议

超链接默认的打开方式为自己本身

超链接的打开方式

target=""

_self 本身

_blank 新窗口空白窗口打开

2）锚点跳转功能

含义：实现相同页面的不同区域的跳转

语法：点击区域 :<a href="#锚点的名字">点击区域</a>

跳转区域 :<p id="锚点的名字"></p>

14.网页中的标题标签

应用场景：新闻稿件，目录，二级三级标题

基本语法：双标签

自带的特点：有六个级别，h1最大 h6最小，自动加粗，自动换行（默认h1~h6）独占一整行

用align属性可以居中

快速创建页面中的标签结构

标签名字+tab 出现一个对应的标签

div+tab <div></div>

div*3+tab 出现三个一样的标签结构

div{文本}+tab 出现一个标签，里面有文本

div{文本}*3+tab

div{文本$}*3+tab

div>p +tab <div><p></p></div>

div*3>p +tab

h$*6 h${我是$级别标题}*6 快速创建方式

15.div和span标签

div标签：

块级元素，div标签，div容器盒子

主要应用：实际开发的时候应用频率为98%主要应用在布局区块划分里面

划分好区块之后，向里面添加其他的内容

目前：div是纵向排列的，横向显示的话需要：浮动

span标签：

行内元素，span标签，空标签

主要作用：用于修饰独立的文本

默认显示方式即可====横向显示的 -->

</body>

</html>

柠檬养乐多.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
复制链接

扫一扫