一、元素及属性
1.元素
html
<p>我是一级标题</p>
![](https://img-blog.csdnimg.cn/direct/7654adc02be34426b3cd2ed549619e20.png)
![](https://img-blog.csdnimg.cn/direct/3adbb962d1764b64b92fa03cd87e1a5f.png)
2.嵌套元素
把元素放到其他元素之中------这被称作嵌套。
html
<p>我是<strong>一级</strong>标题</p>
![](https://img-blog.csdnimg.cn/direct/0a6f0e801a3344c09e685e742939453f.png)
3.块级元素
块级元素在页面中以块的形式展现,会换行,可嵌套内联元素。
列如:
![](https://img-blog.csdnimg.cn/direct/6be3754f01764828b03c495317308ac4.png)
4.内联元素
1)内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。
2)内联元素不会导致文本换行。
3)不能嵌套跨级元素。
列如:
5.空元素
一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素 是用来在页面插入一张指定的图片。
6.属性class
html
<p class="test-class">我是一级标题</p>
css
.test-class {
color: red;
background: black;
}
属性包含元素的额外信息,这些信息不会出现在实际的内容中。
html
<p>A link to my <a href="https://www.baidu.com/" title="The Baidu homepage" target="_blank">favorite website</a>.</p>
7.布尔属性
有时你会看到没有值的属性,这也是完全可以接受的。这些属性被称为布尔属性。
布尔属性只能有一个值,这个值一般与属性名称相同。
html
<input type="text"/>
<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled/>
![](https://img-blog.csdnimg.cn/direct/0e30851f0a69468599090f866895f96f.png)
8.使用单引号还是双引号?(都可以)
9.在 HTML 中包含特殊字符
![](https://img-blog.csdnimg.cn/direct/56b01dbe3a67422ab65b4a81a157736f.png)
二、标题和段落
1.标题 h
一共有六种标题元素标签------h1、h2、h3、h4、h5 和 h6
html
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
![](https://img-blog.csdnimg.cn/direct/a30b5f78663a4b69b03c8bd543265b5b.png)
2.段落 p
html
<p>段落</p>
3.列表 ul / ol
1.无序列表 ul + li
无序列表用于标记列表项目顺序无关紧要的列表
html
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ul>
![](https://img-blog.csdnimg.cn/direct/9233cf560fa4412bb069dcd91d017e54.png)
2.有序列表 ol + li
有序列表需要按照项目的顺序列出来
html
<ol>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
![](https://img-blog.csdnimg.cn/direct/0a11d453f6ed4370aa1c74bf6f6a9347.png)
3.重点强调 em / strong
em : 带讽刺,斜体
strong :带警告,加粗
html
<p>
这杯液体<strong>毒性很大</strong>------如果饮用了它,你<strong>可能<em>会死</em></strong>。
</p>
![](https://img-blog.csdnimg.cn/direct/8c13ab0cfbf548daae3a8dd1febdcd01.png)
4.标记 mark
html
<p>
<mark>标记</mark>
</p>
![](https://img-blog.csdnimg.cn/direct/8b6085e36efc4032840f30f7aa9ddf9c.png)
三、超链接
html
<p>
<a href="https://www.baidu.com/">Baidu 主页</a>的链接。
</p>
<a href="https://www.baidu.com/">
<image src="https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000" alt="图片超链"/>
</a>
<a href="https://www.baidu.com/">
<h1>标题</h1>
<p>段落</p>
</a>
![](https://img-blog.csdnimg.cn/direct/a70fc1f12e4e4eea8d2a23dada1a3062.png)
四、文本格式进阶
1.描述列表 dl + dt + dd
描述列表使用与其他列表类型不同的闭合标签------dl
每一项都用 dt(description term)元素闭合。
每个描述都用 dd(description definition)元素闭合。
浏览器的默认样式会在描述列表的术语及其定义之间产生缩进。
html
<dl>
<dt>
第一段
</dt>
<dd>
第一段内容
</dd>
<dt>
第二段
</dt>
<dd>
第二段内容
</dd>
<dt>
第三段
</dt>
<dd>
第三段内容
</dd>
</dl>
![](https://img-blog.csdnimg.cn/direct/bb40ba44c0944b5a9810ac426663ef46.png)
2.缩略语 abbr
包裹一个缩略语或缩写,并且提供缩写的解释
html
<p><abbr title="我是缩略语内容">缩略语内容</abbr>,正常段落内容</p>
![](https://img-blog.csdnimg.cn/direct/24b0eba70816403d8c8b46392a4a27c1.png)
3.换行 br
html
<p>
我是第一行
我是第二行
我是第三行
</p>
<br>
<p>
我是第一行<br>
我是第二行<br>
我是第三行<br>
</p>
![](https://img-blog.csdnimg.cn/direct/3ebbe23e6250430a9b2fc7db5d838d8f.png)
4.水平分割线 hr
html
<p>我是第一行</p>
<hr>
<p>我是第二行</p>
![](https://img-blog.csdnimg.cn/direct/b9e40f846e8e481fa42f93a9becf44cb.png)
五、多媒体
1.图片 img
需要两个属性才能起作用:src 和 alt。
src 属性包含一个 URL,该 URL 指向要嵌入页面的图像
alt 属性的描述
html
<img src="https://xxx" alt="图片描述">