1.2 HTML Common Tags

1. HTML基本概念

1.1 HTML语法

（1）双标签

双标签（标记）也叫常规标记（标签）

<标记的名字属性名=“属性值” 属性名2=“属性值2”…></标记名称>

例如：

<p class="box-p">这是一个段洛</p>

（2）单标签

单标签（标记）也叫空标记（标签）

<标记的名字属性名=“属性值” 属性名2=“属性值2”…/>

<img src="" width="100px" height="100px"/>

例如：

注意：/可以不写，但是为了语法的严谨最好写进去、/是放在结束的位置

1.2 HTML文档

<!doctype html> 
<!--声明文档类型是html超文本标记语言的-->
<html>
<!--html 也叫根元素-->
<head>
<meta charset="utf-8">
<!--设置编码格式国际编码-->
    <link rel="icon" href="https://www.a1l.xyz/img/yjtp.png">
<!--网站标题小图标-->
<title>HTML基础-第一阶段学习</title>
<!--网页标题-->
</head>

<body>
<!--页面主体-->
</body>
</html>

2. HTML常见元素

2.1 标题元素

为了使得网页页面结构更加有语义化，页面内会使得标题元素加以标记，HTML中标题类元素主要有
~

代码格式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标题元素</title>
</head>

<body>
    <h1>文字的标题除了h1都可以重复使用一般用于网站的logo</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

</html>

预览图

2.2 段落元素

为了使网页文字的段落排列更加整齐，段落之间使用和标签定义

格式：

特点：自带段间距和换行

代码格式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落元素</title>
</head>

<body>
    <div>
        <h1>标题一</h1>
        <p>这是一个段落</p>
    </div>
</body>
</html>

效果图：

2.3 加粗元素

文字进行强调，但又不是标题

格式： bold的首字母

代码格式:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>加粗元素</title>
</head>

<body>
    <p>这是个文字</p>
    <p><b>这是个加粗的文字</b></p>
    <strong>加粗</strong>
</body>

</html>

**效果图: **

2.4 倾斜元素

倾斜标签,倾斜文字不会换行

格式：建议使用em

代码格式:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>倾斜元素</title>
</head>

<body>
    <p>这是个文字</p>
    <p><em>这是个倾斜的文字</em></p>
    <p><i>这是个倾斜的文字</i></p>
</body>

</html>

**效果图: **

2.5 列表元素

注意：ol、ul的儿子只能是li

无序列表

自带实心圆的符号 type=“circle空心圆/disc实心圆/square方形 type="none"把无序列表自带的实心圆去掉格式：

<ul> <li></li> </ul>

代码格式:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>

<body>
    <ul>
        <li>默认</li>
        <li>实心圆</li>
    </ul>
    <ul type="circle">
        <li>空心圆</li>
        <li></li>
    </ul>
    <ul type="square">

        <li>方块</li>
        <li></li>
    </ul>
    <ul type="none">
        <li>没有</li>
    </ul>

</body>

</html>

效果图

有序列表

<ol> <li></li> </ol> type类型 start 开始 type=”A” start=”4 如果想从最末位开始排序，用reversed属性即可。 type的类型：

type=”1” 显示形式为1,2,3(默认形式）。 type=”A” 显示形式为A,B,C。 type=”a” 显示形式为a,b,c。 type=”I” 显示形式为大写罗马数字。 type=”i” 显示形式为小写罗马数字。

代码格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>

<body>
    <ol type="1">
        <li></li>
        <li></li>
    </ol>
    <ol type="A">
        <li></li>
        <li></li>
    </ol>
    <ol type="I">
        <li></li>
        <li></li>
    </ol>
    <ol type="a">
        <li></li>
        <li></li>
    </ol>
    <ol type="i">
        <li></li>
        <li></li>
    </ol>

</body>

</html>

效果图：

自定义列表

默认情况下, dd会相对于dd有一个Tab键的效果, 如果不需要, 将margin改为0

<dl> <dt></dt> <dd></dd> <dl>

代码格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>可以是文字也可以图</dt>
        <dd>相关文字</dd>
    </dl>
</body>

</html>

效果图

2.6 img元素

不会换行插入图片不写宽高，默认是图片本身的宽高。如果只写宽不写高，是等比例缩放

格式

<img src=“图片路径” title=“鼠标悬停上去之后的提示信息” alt=“图片不显示之后的提示信息" width=”宽度” height=”高度”/>

效果图

2.7 路径分类

路径分类：绝对路径、相对路径

(1)、绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如f0f503b8cda8748e0e425f8705a7790.jpg个图片是存放在硬盘的D:\桌面\扎乱\国风图片目录下，那么 f0f503b8cda8748e0e425f8705a7790.jpg这个图片的绝对路径就是D:\桌面\扎乱\国风图片\f0f503b8cda8748e0e425f8705a7790.jpg。注意：绝对路径在实际的开发过程中很少去使用，如果使用D:\桌面\扎乱\国风图片\f0f503b8cda8748e0e425f8705a7790.jpg来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用\或/字符作为目录的分隔字符

注意： 在服务器里面不要使用中文文档，可能会报错

(2)、相对路径

相对路径，就是相对于自己的目标文件位置。

1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名； <imgsrc="pic4.gif" /> 2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：文件夹名/目标文件全称+扩展名； <imgsrc="img/pic.png“/> 3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下： ../目标文件文件名+扩展名 <img src="../seespring-logo.png"/>

2.8 链接元素

<a href=“路径” title=“鼠标悬停上去之后的提示信息” target=“规定在何处打开文档">内容</a>

Target属性：规定在何处打开文档。

- A.target=“_self“ 默认值
- B.target=“_blank“ 新窗口打开

代码格式

<a href="https:\\seespring.com.cn" title="网站">见春天官网</a>//默认值
<a href="https:\\seespring.com.cn" title="网站" target="_blank" >见春天官网</a>//新窗口打开

截图：

注意： 换行的标签建议作为父元素进行嵌套

3. 不常用标签

删除标签 不换行 <s></s> <del></del>

代码格式:

<del>这是删除用的</del>
 <s>见春天官网</s>

截图：

水平线

默认水平居中 <hr/>

代码格式:

<del>这是删除用的</del>
    <hr>
   <s>见春天官网</s>

截图：

换行

 

代码格式:

<del>这是删除用的</del>
    <br>
<s>见春天官网</s>

截图：

下划线

代码格式:

    <del>这是删除用的</del>
    <br>
   <u>见春天官网</u>

截图：

上标和下标 上标 下标

代码格式:

<p>H<sup>2</sup>O</p>
<p>H<sub>2</sub>O</p>

截图：

4. div与span元素

<div></div> 可以理解为一个容器（大盒子）换行 div标签里可以嵌套任意标签所有的标签都可以理解为是一个”盒子“，只不过div标签是一个大盒子

不会换行，可以理解为一个没有任何意义的一个小盒子一般用在选取文章的一小节或者一小段的时候用没有具体含义,当与CSS一同使用时，元素可用于为部分文本设置样式属性

5. 特殊字符

一些转义字符

html源码

显示结果

描述

<

小于号或显示标记

>

大于号或显示标记

&

可用于显示其它特殊字符

"

引号

®

已注册

©

版权

™

™

商标

 

不断行的空白

上一页1.1 HTML基本概念下一页1.3 HTML forms

hashtag1. HTML基本概念

hashtag1.1 HTML语法

hashtag1.2 HTML文档

hashtag2. HTML常见元素

hashtag2.1 标题元素

hashtag~

hashtag2.2 段落元素

hashtag2.3 加粗元素

hashtag2.4 倾斜元素

hashtag2.5 列表元素

hashtag2.6 img元素

hashtag2.7 路径分类

hashtag(1)、绝对路径

hashtag(2)、相对路径

hashtag2.8 链接元素

hashtag3. 不常用标签

hashtag4. div与span元素

hashtag5. 特殊字符

1. HTML基本概念

1.1 HTML语法

1.2 HTML文档

2. HTML常见元素

2.1 标题元素

~

2.2 段落元素

2.3 加粗元素

2.4 倾斜元素

2.5 列表元素

2.6 img元素

2.7 路径分类

(1)、绝对路径

(2)、相对路径

2.8 链接元素

3. 不常用标签

4. div与span元素

5. 特殊字符