HTML常用标签-CSDN博客

本文链接：https://blog.csdn.net/yxyq1210/article/details/76339239

HTML常用标签

1、前沿

最近在学HTML+CSS所以也总结了一些关于HTML和CSS的基础知识，由于是个小白所以也不会说做的多好，大概看的人也很少，也为了养成一个好习惯，为了以后的学习。加油吧菜鸟。

2、什么是HTML?

HyperText Markup Language超文本标记语言，作用是用来搭建网页的结构，它是一种标记语言，不是编译型语言

超文本：所谓超文本就是用超链接将不同空间的文本联系起来，形成网状文本
标记：也称为标签，它的作用是用来划分网页的结构，它有尖括号和标记名构成，如
，它分为单标记和双标记

1) 单标记：< 标记名 />，如<br />或<img />

2) 双标记：<开始标记>

3、HTML的基本结构

<html>
    <head>
        <title>网页标题</title>
        <meta  charset=”utf-8”/>
</head>
    <body></body>
</html>

注意：在基本结构上方通常会有，该句话的作用是确定文档类型声明，就是告诉浏览器该网页是遵照哪个版本的HTML书写

4、网页的编辑工具

记事本
notepad++
editplus
dreamweaver
sublime（目前用的最多的一种编辑前端HTML和JS的工具）

5、常用的HTML标签

1.<p> </p>标签

作用：在页面中创建段落
属性：align，作用是设置段落的对其方式，属性值为left、center、right

2.h标题标签：常用属性为align，作用是设置标题的对齐方式，属性值left、center、right

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5><h5>
<h6></h6>

注意：h1字号最大，h6字号最小，所有标题都具有加粗效果。六组标题重要性递减，浏览器对h1最为敏感

3.<br />：作用是用来换行，注意换行不换段

4.. 列表：无序列表、有序列表、定义列表

1) 无序列表：所谓无序列表就是指列表项间没有顺序，属性有type，作用是用来设置列表符号的类型，属性值为disc（默认，黑色圆）、circle（空心圆）、square（黑色方块）、none（无）

<ul>

       <li>列表项1</li>

       <li>列表项2</li>

       ….

</ul>

2) 有序列表：所谓有序列表是指列表项间有顺序要求，属性为type，作用是设置编号的类型，属性值为1,a,A,I,i,另外还有start属性，该属性的作用是设置编号的起始值，属性值为数值

<ol>

       <li>列表项</li>

       <li>列表项</li>

       ….

</ol>

3) 定义列表：

<dl>

       <dt>标题项（定义项）</dt>

       <dd>内容项（描述项）</dd>

       <dd></dd>

       <dt></dt>

       <dd></dd>

       <dd></dd>

       ….

</dl>

4)列表的嵌套

5.<hr />标签

1) 作用：在页面中插入水平线

2) 属性：

width：设置宽度，属性值为像素值、百分比
size：设置水平线的高度，属性值为像素值

color：设置水平线的颜色，属性值为颜色名称

align：设置水平线的对齐方式，属性值为left、center（默认）、right

6.HTML常用符号

1) 空格： 

2) 小于号：<

3) 大于号：>

4) 双引号："

5) 版权符号：&copy;

6) 注册商标：&reg;

7.<img />

1) 作用：在页面中插入图像

2) 属性：

src：设置图像路径（所在的位置）
alt：设置图像无法正常显示时的提示文字
border：设置图像边框，默认为0，值越大边框越粗

3) 页面中常用的图像格式有哪些：.gif/.jpg/.png

.gif：最多256种颜色、支持动画、支持透明、体积小
.jpg：有1600多万种颜色、不支持动画、不支持透明、体积中等
.png：颜色丰富、不支持动画、支持透明、体积最大

4) 什么原因会导致图像无法正常加载

路径错误
网络原因

5) 路径：相对路径、绝对路径

绝对路径：指文件在磁盘中的具体位置，绝对路径是从盘符或协议开始写的路径，如

<img src="file:\\\C:\Users\SSNH\Desktop\day1\pic.jpg" alt="故宫图片" border="10" />

相对路径：就是指文件间的相对的位置关系，包含如下三种情况

(1).网页和图片在一个文件夹下，路径为图片的名字，如

~~~html
<img src=”pic.jpg”>
~~~

(2).网页在文件夹里面，图片在文件夹外面，路径为先跳出文件夹，然后写图片名，如

~~~html
<img  src=”../pic.jpg”>
~~~

(3).网页在文件夹外面，图片在文件夹里面，路径为先进入文件夹，然后写图片名，如

~~~html
<img src=”a/pic.jpg”>
~~~

8.<b></b>标签：作用是修饰文本加粗效果

9.<strong></strong>标签：作用是修饰文本加粗效果

10.<i></i>标签：作用修饰文本倾斜效果

11.<em></em>标签：作用修饰文本倾斜效果

12.<sub></sub>标签：作用修饰文本下标效果

13.<sup></sup>标签：作用是修饰文本上标效果

14.<span></span>标签：作用是将一行文本划分成不同的部分，方便用CSS进行修饰

15.<div></div>标签：作用是将一篇HTML文档划分为不同的区块

16.<a></a>标签：

1) 作用：设置超级链接

2) 属性：

href：设置链接目标文件的路径
target：设置目标文件的打开方式，属性值为_self或_blank
- _self：默认，在自身窗口打开目标文件
- _blank：在新窗口中打开目标文件
- title：设置鼠标悬停在超链接上时的提示文字

3) 超链接的应用对象：文本、图片

文本：默认情况下文字变为蓝色，且有下划线，当鼠标移到上面的时候显示为一只手
图片：在IE浏览器下具有超链接的图片会有边框，使用border=0来去掉边框

4) 超链接的种类

内部链接：所谓内部链接就是指同一网站内部各文件间的链接，需要注意该href的值为相对路径
外部链接：所谓外部链接就是指网站间各文件的相互链接，需要注意href的值为绝对路径，如

<ahref="http://www.baidu.com">百度首页</a>

空链接：所谓空链接就是指具有链接效果，但是没有链接指向，href的值为#
锚点链接：所谓锚点路径就是一个文档内部各部分间的链接，锚点链接的使用需要分为两步
第一步：设置<开始标签 id=”锚点名”></结束标签>
第二步：链接锚点：

     ~~~html
      <a href=”#锚点名”></a>
      ~~~

17.<table></table>表格标签，属性有

1) border：作用是设置表格边框，属性值为像素值，默认为0，值也越大，边框越粗

2) width：作用是设置表格的宽度，默认宽度为内容的宽度，属性值为像素值或百分比

3) height：作用是设置表格的高度，默认高度为内容的高度，属性值为像素值

4) cellspacing：作用是设置单元格的间距，属性值为像素值，值越大，间距越大

5) cellpadding：作用是设置单元格中内容和边框的距离

6) align：设置表格相对于父元素的水平对齐方式，属性值为left、center、right

18.<tr></tr>行标签，属性有

1) height：设置该行的行高，属性值为像素值

2) align：设置该行中内容的水平对齐方式，属性值为left、center、right

3) valign：设置该行中内容的垂直对齐方式，属性值为top、center、bottom

19.<td></td>列标签，属性有

1) width：设置该单元格所在列的列宽，属性值为像素值

2) height：设置该单元格所在行的行高，属性值为像素值

3) align：设置该单元格内容的水平对齐方式，属性值为left、center、right

4) valign：设置该单元格内容的垂直对齐方式，属性值为top、center、bottom

5) colspan：合并水平方向上的单元格，格式，colspan=”被合并的单元格的个数”

6) rowspan：合并纵向上的单元格，格式rowspan=”被合并的单元格的个数”

20.表格的基本结构

~~~html
<table>
       <tr>
              <td></td>
              …
</tr>
<tr>
             <td></td>
              …
</tr>
…
</table>
~~~

21.<th></th>标签：设置表头单元格，所谓表头单元格就是一种具有特殊效果（加粗、居中）的单元格

22.<caption></caption>标签：设置表格标题

23.<thead></thead>：设置表格的头部

24.<tbody></tbody>：设置表格的主体，表格可以有多个tbody

25.<tfoot></tfoot>：设置表格的页脚

6、HTML标签的分类

块级元素

1) 独占一行

2) 可以设置宽度和高度

3) 支持所有margin和padding

4) 可以作为容器包含其它元素，但是p标签和标题标签既不可以包含自己，也不可以包含其它的块元素

5) 常见的块元素：p、h1-h6、hr、ul（无序列表）、ol（有序列表）、dl（定义列表）、li、dt、dd、table、form、div
行内元素

1) 行内元素可以在一行显示

2) 不可以设置宽度和高度

3) 支持部分的margin和padding

4) 行内元素可以包含行内元素，但是不可以包含块元素

5) 常见的行内元素：a、span、b、strong（加粗）、i、em(倾斜)
行内块元素：

既具有块元素的特点，也具有行内元素的特点img ，常见的行内块元素有：img、input、select、textarea，注意行内块元素有显示的问题，如行内块元素间有间隙且行内块元素下方有间隙