HTML的基本语法和常用标签

一. HTML的基本语法

1、<常规标记>也叫双标记
<标记 属性=“属性值” 属性=“属性值”></标记>
标记也可叫标签或叫元素
2.空标记也叫单标记
<标记 属性=“属性值” />

二.HTML常用标记

1、文本标题（h1-h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

2、段落文本（p）

<p>段落文本内容</p>

标识一个段落(段落与段落之间有段间距)

3、空格

 

所占位置没有一个确定的值,这与当前字体字号都有关系.

4、换行(br)

<br />

换行是一个空标记(强制换行)

5、水平线

   <hr />空标记

6、加粗有两个标记

<b>加粗内容</b> 只是显示加粗
<strong>强调的内容</strong> 突出的文本

7、倾斜

<em>强调文本</em>
<i>倾斜文本</i>

8、 扩展

<u>文本</u> 下划线

<s>文本</s> 删除线

<del>文本</del> 删除线

<sub></sub> 下标

<sup></sup> 上标

9、列表(ul,ol,dl)

HTML中有三种列表分别是：无序列表，有序列表，自定义列表

1. 无序列表

无序列表组成：
<ul>(unordered list)
   <li></li>
   <li></li>
</ul>

无序列表属性type
disc ：实心圆（默认值）
square ：实心矩形
circle :空心圆
none :不显示

2. 有序列表

有序列表组成：
<ol>(ordered list)
    <li></li>
    <li></li>
</ol>

3. 自定义列表

<dl>(definition list)
    <dt>名词</dt>
    <dd>解释</dd>
(definition description)

4. 扩展—有序列表的属性

1)type:规定列表中的列表项目的项目符号的类型
语法：<ol type="a"></ol>
1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。
A 字母顺序的有序列表，大写（A,B,C,D)
i 罗马数字，小写（i, ii, iii, iv）。
I 罗马数字，大写（I, ii, iii, iv）。
2)start 属性规定有序列表的开始点。
语法：<ol start="5"></ol>

10、插入图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" width="宽度" height="高度"/>

注:所要插入的图片必须放在站点下

title的作用:图片的标题鼠标悬停在该图片上时显示的提示文本

alt的作用:提示文本
必写；alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。（第二个功能，优化图片的）

1.相对路径的写法：
(1)当当前文件与目标文件在同一目录下，直接书写目标文件文件名+扩展名；
(2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：

文件夹名/目标文件全称+扩展名；<img src=”images/q12.jpg”/>

(3)当当前文件所处的文件夹和目标文件所处的文件夹在同一目录下，写法如下：

../目标文件所处文件夹名/目标文件文件名+扩展名；
<img src=”../images/q12.jpg”/>

11.超链接

语法：

<a href="目标文件路径及全称/连接地址" title="链接的标题" target="_blank">链接文本/图片</a>
<a href="#"></a>空链接

属性：target:页面打开方式，默认属性值_self。 属性值：_blank 新窗口打开

<a href="#" target="_blank">新页面打开</a>

12.锚点链接

语法

<a href="#p1">点击前往</a>
<p id="p1">文章第一段</p>