HTML基础知识归纳

it2026-02-08 0

一、HTML的文字段落标签

1. 什么是HTML

—HTML（Hypertext Markup Language）超文本标记语言。

2. HTML的特点

—HTML不需要编译，直接由浏览器执行。/HTML文件是一个文本文件。/HTML文件必须使用html/htm为文件的后缀名/HTML大小写不敏感。

3.HTML的基本结构

—HTML分为头部信息、网页信息、HTML文件

HELLO WORLD

hello world

//下划线 ## 4.DOCTYPE文档类声明 —声明必须放在HTML文档的第一行，声明不是HTML的标签。 ## 5.网页编码设置 —当网页出现乱码时，可以在标签之间加： content=“text/html; 表示文档类型，charset=utf-8 表示编码格式。

二、HTML的文字段落标签

1.标签标签：<h1>-<h6>

2.段落标签:<p></p>

3.align对其属性:left左对齐/right右对齐/center居中对其/justify对行进行伸展，这样每行都有相等的长度。

4.换行标签：<br/>

5.空格标签：&nbsp ;

6.文字斜体：<i></i>,<em></em>

7.加粗：<b></b>,<strong></strong>

8.下标：<sub>

9.上标：<sup>

10.特殊符号：<–小于号或显示标记 &lt；>–大于号或显示标记>©版权 ©®已注册 &reg；™商标 ™ Space不断行的空白 &nbsp

三、HTML列表标签

1.无序列表<ul><li>

type属性值： disc圆点 square正方形 circle空心圆

<!DOCTYPE html> <head> <mata http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title></title> </head> <body> <h1>什么是HTML？</h1> <p>HTML是用来描述网页的一种语言</p> <ul type="disc"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ul> <ul type="square"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ul> <ul type="circle"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ul> <hr /> </body> </html>

2.有序列表

type属性值： 1，数字1,2 默认 a，小写字母a,b A，大写字母A,B i,小写罗马数字I I，大写罗马数字I

<ol type="1"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ol> <ol type="a"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ol> <ol type="A"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ol> <ol type="Ⅰ"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ol> <ol type="ⅰ"> <li>HTML指的是超文本标记语言</li> <li>HTML不是一种编程语言，而是一种标记语言</li> <li>标记语言是一套标记标签</li> <li>HTML使用标记标签来描述网页</li> </ol> <hr />

3.定义列表 <dl><dt><dd>,可以有多个<dt>和<dd>

<dl> <dt>HTML指的是超文本标记语言</dt> <dd>HTML不是一种编程语言，而是一种标记语言</dd> <dd>标记语言是一套标记标签</dd> <dt>HTML使用标记标签来描述网页</dt> <dd>HTML不是一种编程语言，而是一种标记语言</dd> <dd>标记语言是一套标记标签</dd> </dl> <hr />

四、HTML图像标签

语法：<img src=“” alt=“” …/> img属性

属性值描述srcURL显示图像的URLalt文字图像替代文本height数值的百分比图像的高width数值的百分比图像的宽

相对路径和绝对路径绝对路径要从盘中拿取图片,相对路径引入同个文件下的图片在相对路径中，如果是放在文件的上一级目录中要用

在相对路径中，如果是放在文件夹的子文件夹下的图片要用

五、HTML超链接标签

1.语法

<a href=“” >内容</a> href：链接地址，可以是内部链接或外部链接。属性： self当前窗口下的链接 blank创建一个新的链接

属性描述href链接地址target链接的目标窗口 _self、 _blank、 _top、 _parenttitle链接提示文字name链接命名

2.定义锚

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <a href="#素材1">素材1</a> <a href="#素材2">素材2</a> <a href="#素材2">素材3</a> <br> <a href="demo1.html" target="_self" name="素材1"><img src="E:/axure/素材/成果图标/性格.png" width="50px" height="50px"/></a> <br> <h2>素材1</h2> <h3>性格图标</h3> <h2>素材1</h2> <h3>性格图标</h3> <h2>素材1</h2> <h3>性格图标</h3>  <a href="demo1.html" target="_blank" name="素材2"><img src="./唱歌.png" alt="html基础" width="50px" height="50px"/></a> <br> <h2>素材2</h2> <h3>唱歌图标</h3> <h2>素材2</h2> <h3>唱歌图标</h3> <h2>素材2</h2> <h3>唱歌图标</h3> <a href="https://www.baidu.com/?tn=78000241_12_hao_pg" ><h2>html基础课程</h2></a> <h1>素材图片3</h1> <a name="素材3"><img src="../img/粉丝.png" alt="入门" width="50px" heigh="50px"/></a> <br> <h2>素材3</h2> <h3>粉丝图标</h3> <h2>素材3</h2> <h3>粉丝图标</h3> <h2>素材3</h2> <h3>粉丝图标</h3> <a href="demo1.html#素材2" title="提升技术"><h2>html入门</h2></a> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <img src="E:/axure/素材/成果图标/性格.png"/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <a name="素材2"><img src="唱歌.png"/></a> </body> </html>

最新回复(0)