前言
这篇文章重点写了HTML标签、块元素和行内元素、转义符几个内容,详细讲解请看以下内容,听说点击右边目录查看,掌握知识会更快哦!
1. 标题标签
- title
- h1~h6 (h1的字体是最大的,以此类推,h6是最小)
1.1 title
title标签是定义网站标题的,一个网站只有一个标题
代码举例:
浏览器预览:
1.2 h1 ~ h6
h1 ~ h6标签是写在< body >< /body >内的,h1标签显示的内容是最大的,h6则显示的内容是最小的
代码举例:
浏览器预览:
2. 段落标签
2.1 < p >< /p >
p标签是显示一段文字内容,一篇文章会有很多段落,我们将段落分成一个个p标签
代码举例:
浏览器预览:
3. 换行标签
3.1 < br/ >
br 标签是一个单标签,只有一边的,br标签的作用是在文字任何一个位置进行换行操作。
代码举例:(没有加br标签前)
浏览器预览:(没有加br标签前)
代码举例:(加br标签后)
浏览器预览:(加br标签后)
4. 文本标签
4.1 粗体标签:strong、b
代码举例:
浏览器预览:
4.2 斜体标签:i、em、cite
代码举例:
浏览器预览:
4.3 上标标签:sup 和 下标标签:sub
使用方法:先将所有文字放在p标签中,然后把需要上标或者下标的文字,加上标签即可。
代码举例:
浏览器预览:
4.4 中划线标签:s
代码举例:
浏览器预览:
4.5 下划线标签:u
代码举例:
浏览器预览:
4.6 大字号标签:big 和 小字号标签:small
代码举例:
浏览器预览:
5. 水平线标签
5.1 粗体标签:< hr />
代码举例:
浏览器预览:
6. div标签
div标签作用是将一个个区域分成一个个div,后期再用CSS时可以更好的控制每个div区域。
代码举例:
浏览器预览:
7. 自闭合标签(单标签)
自闭合标签和普通标签的区别?
- 普通标签:有开始标签和结束标签的,里面可以放很多内容。例如:< div > </ div >
- 自闭合标签:只有一边标签,标签内不能放任何的内容。例如:< hr />
- 注意:普通标签和自闭合标签,结束标签 / 是不一样的,一般标签 / 是写在前面,例如 </ div > 。而自闭合标签是写在后面,例如 < br />
7.1 常见的自闭合标签
<br> 插入一个简单的换行符,标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。
<hr> 创建一条水平线,在HTML中,<hr> 没有结束标签。在XHTML中,<hr> 必须被正确地关闭,比如 <hr />。
<img> 插入一幅图像,在HTML中,<img> 没有结束标签。在XHTML中,<img> 必须被正确地关闭,比如 <img />。
<link>最常见的用途是链接样式表。在HTML中,<link> 没有结束标签。在XHTML中,<link> 必须被正确地关闭,比如 <link />
<base> 页面上的所有链接规定默认地址或默认目标,在HTML中,<base> 没有结束标签。在XHTML中,<base> 必须被正确地关闭,比如 <base />。
<area> 定义图像映射中的区域,在HTML中,<area> 没有结束标签。在XHTML中,<area> 必须正确地关闭,比如<area />。
<input> 输入框,在HTML中,<input> 没有结束标签。在XHTML中,<input> 必须被正确地关闭,比如 <input />。
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<!--...--> 注释标签,注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
<!DOCTYPE> 声明没有结束标签,必须是HTML文档的第一行,位于 <html> 标签之前。
注:这段来源于csdn:https://blog.csdn.net/lgysjfs/article/details/93027361
8. 块元素和行内元素
块元素和行内元素的区别?
- 块元素:独占一行,可以包含其他元素和行内元素。
- 行内元素:所有行内元素在一行显示,不能独占一行。
8.1 常见的块元素
- div:div元素
- p:段落元素
- ul:无序列表
- ol:有序列表
- h1-h6 标题元素
- hr:水平线
8.2 常见的行内元素
span ,a ,strong ,em ,b ,s ,i ,font…
8.3 常见的行内块元素
img ,input ,select ,textarea ,button ,label
8.4 不同元素转换方式
转换为块级元素: disaplay : block
转换为行内块元素:dispaly : inline-block
转换为行内元素 : display : inline
9.特殊符号
很多的时候我们需要使用一些特殊符号,但是这些符号我们要怎么输入是一个问题,以下是一些特殊符号对应的代码,我们在需要从文字中插入特殊符号时,只用键入对应的代码到文字中就可以了。
更多符号
注意:本文复制符号代码后面要加上“;”,不然代码执行不了的
特殊符号 | 描述 | 符号代码 |
---|---|---|
< | 小于号 | < |
> | 大于号 | > |
¥ | 人民币 | ¥ |
& | "与"符号 | & |
© | 版权 | © |
• | 点 | &bull |
× | 乘号 | × |
÷ | 除号 | ÷ |
® | 商标 | ® |
代码举例:
浏览器预览:
10.练习题
代码举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习题</title>
</head>
<p>
<h3>英文翻译题目</h3>
<h4>第一句</h4>
<p>“嗨!”内德说,“我们很久没有爬悬崖了。”</p>
<p>"Hey!" said Ned. "We haven't climbed the cliff for a long while."</p>
<hr/>
<h4>第二句</h4>
<p>他们就朝一座悬崖飞跑而去。</p>
<p>And off they went, trotting and panting like a pack of stray dogs.</p>
<hr/>
<h3>菜市场蔬菜标价</h3>
<p>苹果 <s>原价:5.99元/斤</s> 现价:2.88元/斤</p>
<p>菠萝 <s>原价:10元/个</s> 现价:8元/个</p>
<h3>数学题</h3>
<p>a<sup>2</sup>+b<sup>4</sup>=(a<sup>1</sup>+b<sup>2</sup>+c<sup>3</sup>)</p>
</body>
</html>
浏览器预览:
10.1 代码分析:
- 整个练习题从上往下主要用到以下标签实现:
- h1-h6 标题标签
- p 段落标签
- hr 水平线
- s 中划线
- sup 上标标签