HTML基础标签

最新推荐文章于 2024-11-06 15:00:40 发布

WANG鲲

最新推荐文章于 2024-11-06 15:00:40 发布

阅读量961

点赞数 32

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

本文链接：https://blog.youkuaiyun.com/m0_63751497/article/details/137136575

版权

HTML 专栏收录该内容

1 篇文章

订阅专栏

基础标签：

加粗标签：

作用：为文本添加加粗效果

基本语法：

注意：双标签

书写标签时：快捷键：记住标签的单词，直接配合tab/回车键，直接补全代码

倾斜标签：

作用：为文本添加倾斜效果

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

注意：双标签

删除线标签：

删除线

作用：为文本添加删除线的效果

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

注意：双标签

下划线标签：

下划线

作用：为文本添加下划线效果

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

注意：双标签

角标标签：

角标标签

1)上角标

基本语法：<sup>文本</sup>

2)下角标

基本语法：<sub>文本</sub>

应用场景：1.论文名词解释2.化学方程式，分子式，数学公式

代码展示：

h<sub>2</sub>0
10m*10m=100m<sup>2</sup>

运行结果：

换行标签：

换行标签：文本折行标签

基本语法：<br>

段落标签：

段落标签

作用：让文本成为一个自然段落

基本语法：<p>文本</p>

水平线标签：

水平线标签

基本语法：<hr noshade color="" width="" align="" size="">

作用:分割上下两个区域；单标签

注意:

1.默认情况下宽度是:占整个屏幕的一整行

2.水平线默认带阴影取消阴影：noshade

3.更改颜色颜色属性:color=" "

4.可以调整宽度 width="200px"

5.默认设置宽度之后，居中形式为:水平居中

控制水平对齐方式：align="left/right/center"

6.能设置高度，但高度属性不是height，而是size

文本标题标签：

文本标题标签

基本语法：<hn>文本</hn> （n是1-6 双标签默认有加粗效果独占一整行）

应用场景：

1)h1 文章的大标题/logo

2)h2 副标题，大模块标题

3)h3 副副标题，小模块标题

4)h4-h6 根据实际开发情况决定

扩展一些知识点：

快捷键

p+tab===<p></p>

p*3+tab===<p></p>

<p></p>

h$*6+tab===<h1></h1>

.......

p{文本}*3+tab===<p>文本</p>

h${文本}*6+tab===<h1>文本</h1>

.......

无序列表：

无序列表

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

基本语法:

<ul>

</ul>

注意事项：

1)双标签

2)ul里面只能放置li

3)ul和li是父子关系可以快速创建代码

ul无序列表有哪些属性？

type="列表项的显示类型"

disc====黑色实心圆点

circle====空心圆

square====黑色实心方块

none====取消列表项

实际开发我们以上的属性几乎不会使用，使用频率最多的是none====取消列表项

其他的对应列表项，我们需要背景图片完成===方便调整位置

有序列表：

有序列表

含义：有顺序的列表清单

基本语法:

<ol>

</ol>

注意事项：

1)双标签

2)ol里面只能放置li,如果想放置其他内容，可以放置在li标签里面

有序列表ol的属性修饰：

1)列表项的修饰

type="1/A/a/I/i"

2)修改列表项的起始

start="数值"

自定义列表：

自定义列表

含义:主要应用于图文混排，问答列表中

基本语法:

<dl>

</dl>

注意事项：

1)双标签

2)dl里面一般放置一个dt,一个dd;也允许放置多个

代码展示：

<h1>我是一个无序列表</h1>
     <ul type="circle">
        <li>我是一个无序列表</li>
        <li>我是一个无序列表</li>
        <li>我是一个无序列表</li>
     </ul>


<h1>我是有序列表</h1>
      <ol type="1" start="3">
        <li>放大象</li>
        <li>放大象</li>
        <li>放大象</li>
      </ol>


<dl>
        <dt>问题：哪里发货</dt>
        <dd>答案：北京发货</dd>
       </dl>
       
       <dl>
        <dt>问题：哪里发货</dt>
        <dd>答案：北京发货</dd>
       </dl>

实现效果：

图片标签：

图片标签

让页面中显示一个图片

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

路径的注意事项：

1)如果你的图片和页面文件是同级关系的话，图片的名字就可以当作路径使用（后缀名必须携带）

2)如果你的图片所在的文件夹和页面是同级别关系的话，则需要先进入到文件夹中然后再去找图片

img/图片

3)如果你的页面文件夹和图片是同级关系的话，则需要返回上一级去查找图片

返回上一级使用的是../图片 ../img/图片

路径：

1)相对路径

相对于文件和文件夹之间的关系去查找图片

img/pic.png ../img/pic.png

2)绝对路径

一个完整的地址，从某一个盘符开始，或者是从互联网地址开始

c://study//MP4//img//pic.png

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

代码展示：

<img src="1.png" alt="">
<img src="img/2.png" alt="">

进阶版图片标签：

图片标签

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

alt和title之间的区别是啥？（面试题）

alt=当图片为破损文件/网页加载失败，图片加载失败的时候显示的提示文本

title=只要鼠标放在图片位置区域，提示文本

相同点：都属于提示文本

alt只有是浏览器加载不成功的时候才会显示=====文本能选中，占位置的

title属性===鼠标放在上面的提示文本，不占位置的

超链接标签：

超链接标签

1)页面跳转功能===不同页面的跳转功能

基本语法：<a href="路径：页面的路径" target="">文本/图片</a>

注意事项：

1)超链接默认是自带下划线的效果，有一个蓝色的文本效果

2)默认是在自己的窗口中打开

3)target的取值默认值是_self(在自己窗口中打开) _blank(新窗口)

<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

锚点功能：

使用的a标签的锚点跳转功能；主要应用的场景：同一个页面中的不同区域的跳转，置顶课件

应用场景：通讯录，小说目录，百度百科，楼梯层

基本语法：

div标签：

div标签

被称之为一个大的容器，一个大的盒子，这个容器盒子里面可以盛放很多的其他的小的容器

基本语法：<div>文本/图片/其他的标签</div>

作用：用于区块的划分

div默认是纵向排列的

span标签：

span标签

没有实际意义的标签，用来进行独立文本的修饰；想要文章中的某几个，某一些文本实现独立的样式

基本语法：<span>文本</span>

span标签默认是横向排列的

文本修饰标签：

文本修饰标签

修饰文本的颜色，大小，字体样式

基本语法：<font color="颜色" size="尺寸大小1_7" face="字体">文本</font>

网页中的特殊符号：

网页中的特殊符号

1）尖角号

<=======<

>=======>

2）引号

3）和号==&

4）商标

®===已注册====®

™===商标======™

5）空白符====空格

 ====半角空格（一个英文字母的大小）

&emsp;====全角空格（一个汉字的大小）

代码展示：

 p标签的标签语法：&lt;p id=&quot;1&quot;&gt;文本&lt;/p&gt;
      <br>
      7&amp;8
      <br>
      商标一&reg;
      <br>
      商标二&trade;

实现效果：

扩展知识：

扩展知识点：

1)双标签必须带/结束，不带不行

2)如果我想实现加粗和倾斜效果

标签的嵌套（不要出现交叉嵌套）