一:首先进入HBuilderX,新建一个html项目会发现页面如下
1:标题标签<h>
在html中一共有六个级别的标签:<h1>~<h6>.。其中 h 是英文header的简称,其中,<hi>的重要性最高,<h6>的重要性最低.
2:段落标签<p>
利用段落标签可以来标记一整段文字,段落标签会自动换行,并且段落与段落之间会有一定空隙。
3:换行标签 <br/>
与<p>标签在换行上不同的是,<br>标签会导致两文字段落之间会有一定的空隙,但是换行标签<br/>不会.<br/>标签用来给文字换行,<p>标签用来给文字分段。
4:粗体标签 <strong>
这一标签可以用来对文字的加粗。
5:斜体标签 <em>
用于对文本进行斜体设置。
6:上下标标签 <sup>和<sub>
想要将某个数字或文本变成上(下)标形式的效果,就把这个数字或文本放在上(下)标之间。
7:水平线标签<hr/>,属于自自闭合标签。
8:div标签
div标签可以放入body标签的任何内部标签,包括段落文字、表格、列表、图像等。加入div标签后和没有加的代码在浏览器上显示的是一样的,但是加入div标签可以使代码的逻辑性更强
9:网页的一些特殊符号
可输入的特殊符号
特殊符号 | 名称 | 代码 |
“ | 双引号 | " |
‘ | 左单引号 |
&lsquo |
’ | 右单引号 | &rsquo |
✖ | 乘号 | × |
➗ | 除号 | ÷ |
< | 小于号 | < |
> | 大于号 | > |
& | 与符号 | & |
—— | 长破折号 | &mdash |
| | 竖线 | | |
空格 |   | |
© | 版权 | © |
® | 注册商标 | ® |
™ | 商标 | &trade |
10:自闭合标签
1一般标签由于有开始符号和结束符号,可以在标签内部插入其他标签或文字;
2自闭合标签由于没有结束符号,没办法再内部插入其他标签或文字,只能定义自身的一些属性。
常见的自闭合标签有:
<metal/> 定义页面的说明信息,供搜索引擎查看
<link/>用于连接外部的css文件或脚本文件
<base/>定义页面所有链接的基础定位
<br/>用于换行
<hr/>定义一个水平线
<input/>用于定义表单元素
<img/>图像标签
11:块元素和行内元素
html元素根据形式可以分为两类:块元素(block)和行内元素(inline)
块元素再浏览器中默认显示状态下独占整行,排斥其他元素与其位于同一行。块元素一般为矩形,可以容纳行元素和其他的块元素。
常见的块元素
块元素 | 说明 |
div | div层 |
h1~h6 |
1到6级标题 |
p | 段落,会在其前后创建一些空白 |
hr | 分割线 |
ol | 有序列表 |
ul | 无序列表 |
块元素拥有一下特点:
1独占整行,排斥其他元素与其位于同一行。
2可以容纳行元素和其他的块元素。
3高度、行高、内外边距和外距均可控制。
4宽度缺省是它的容器的100%,除非设定一些宽度。
行内元素默认显示状态可以与其他行内元素共存一行。
常见的行内元素
行内元素 | 说明 |
strong | 加粗强调 |
em | 斜体强调 |
s | 删除线 |
u | 下划线 |
a | 超链接 |
span | 常用于行级,可定义文档中的行内元素 |
img | 图片 |
input | 表单 |
行内元素拥有的特点:
1可以与其他行内元素位于同一行;
2行内内部可以容纳其他行内元素,但不可容纳块元素。
二:总结和归纳
段落与文字标签
标签 | 语义 | 说明 |
<h1>~<h6> | header | 标题 |
<p> | paragraph | 段落 |
<br> | break | 换行 |
<hr> | horizontal rule | 水平线 |
<div> | division | 分割(块元素) |
<span> | span | 区域(行内元素) |
文本格式化标签
标签 | 语义 | 说明 |
<strong> | strong | 加粗 |
<em> | emphasizd | 斜体 |
<cite> | cite | 斜体 |
<sup> | superscripted | 上标 |
<sub> | subscriped | 下标 |
一般标签和自闭合标签
一般标签有开始符号和结束符号,而自闭合标签只有开始符号没有结束符号。
利用段落与文字的相关标签进行简单网页的制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>各科小常识</h1> <hr /> <div> <h3>语文</h3> <p>语文是一个多义词,通常作为语言文字、语言文学、语言文化的简称,其本义为“语言文字”。</p> <br/> <hr/> </div> <div> <h3>数学</h3> <p>勾股定理直角三角形,a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p> <br/> <hr/> </div> <div> <h3>化学</h3> <p>H<sub>2</sub>SO<sub>4</sub>是一种重要的<strong>工业原料</strong>,用于制作肥料、洗涤剂等。</p> <br/> <hr/> </div> <div> <h3>经济</h3> <p>注册商标:®</p> <br/> <p>版权符号:©<p> <hr/> </div> <p><span style="color:blue">好好学习</span></p> <p><span style="color: red;">天天向上</span></p> </body> </html>
浏览器预览结果