HTML超文本标记语言包含8个基本的标记标签,我们平时浏览的网页也由这8个基本标签构成,学习前端编程学习8个基本的标记标签是我的工作HTML的8种基本标签分别为文件标签(根标签)、合成标签、块标签、字体标签、列表标签)、图形标签、连接标签、表标签。
html的8种基本标签
文件标签1. html标签
整个文件位于html标签内。
HTML用于声明是HTML文件,以便浏览器能够识别并正确处理该HTML文件。
HTML文件有两部分:头和身体
2 .头标签
head用于加载重要的信息
不显示其内容,只显示body的内容
3. title标签
title只出现在头上。
表示标题
4 .主体标签
显示body的内容,表示整个页面。
一般属性:
text:用于设定文字的颜色
背景:为了设定背景图像
bgcolor:用于设置背景色
! 文档类型html公共'//W3C//dtd XHTML 1.0传输//输入' ' http://www.w3.org/tr/XHTML1/dtd/XHTML1-传输
html xmlns=' http://www.w3.org/1999/XHTML '
头部
meta http-equiv='内容-类型'内容='文本/html; charset=utf-8'/
title无标题文档/title
/head
body bgcolor='红色'文本='黄色'
html
/body
/html
显示效果
排版标签1 .注释
用html评论! - -评论-
2. p标签
p标签是段落标签,可以将html文档分割为多个段落。 浏览器会自动在段落前后添加空格。
p标记的一般属性
用于设置align:对齐方式的选项值left right center默认值为left。
3. br标签
br标签为换行标签。
由于浏览器会自动忽略空格和换行符,因此br标签成为了我们最常用的标签。
4. hr标签
hr标签生成水平线。
一般属性:
设置align:水平线对齐方式选项值左灯光中心
size:设置水平线的厚度(以像素为单位)。 默认值为2
width:设定水平线的长度。 绝对值或相对值都可以。 默认值为100%
color:设定水平线的颜色。 默认值为黑色
! 文档类型html
html
头部
meta charset='UTF-8 '
标题插入标题/标题
/hea
d> <body> <!-- 排版标签注释标签: --> 春夜喜雨<br/> 杜甫<br/> <hr width="500px" size="30" color="#E7AE10"/> 好雨知时节<br/> <p align="center"> 当春乃发生<br/> 随风潜入夜<br/> </p> 润物细无声 </body> </html> 块标签1. div标签
用于在文档中设定一个块区域。
常用属性:
align:left center right
2. span标签
用于在行内设定一个块区域。
Html中绝大多数元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始。例如 div p等
内联元素在浏览器显示时,通常不会以新行来开始。span
<div align="center">我是div1</div> <div>我是div2</div> <span>我是span1</span> <span>我是span2</span> 字体标签1. font
<font>标签用于规定文本的字体,大小,颜色。
常用属性:
face:规定文本的字体
size:规定文本的大小
color:规定文本的颜色
2. h1-h6
<h1>-<h6>标签用于定义标题.
<h1>最大标题
<h6>最小标题
<font color="red" face="微软雅黑">html</font><br/> <font color="red" size="1" face="微软雅黑">html</font><br/> <font color="red" size="2" face="微软雅黑">html</font><br/> <font color="red" size="3" face="微软雅黑">html</font><br/> <font color="red" size="4" face="微软雅黑">html</font><br/> <font color="red" size="5" face="微软雅黑">html</font><br/> <hr/> <h1>html</h1> <h2>html</h2> <h3>html</h3> <h4>html</h4> <h5>html</h5> <h6>html</h6> 清单标签(列表标签)1. ul
<ul>标签表示的是一个无序列表。
常用属性:
type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc
2. li
<li>标签表示的是一个列表项
常用属性:
type:这个属性只适用于无序列表,用于设定项目符号,默认值为disc
value:这个属性只适用于有序列表,用于设定列表的项目数字。
3. ol
<ol>表示的是一个有序列表。
常用属性:
type:这个属性规定列表中使用的标记类型,可取值1 A a I i。
start:这个属性规定列表的起始值。
<ul type="circle"> <li>html</li> <li>html</li> <li>html</li> <li>html</li> </ul> <hr/> <ol type="A" start="2"> <li>html</li> <li>html</li> <li>html</li> <li>html</li> </ol> 图形标签img
<img>是一个图片标签,用于在页面上引入图片.
常用属性:
src:用于设定要引入的图片的url
alt:用于设定图像的替代文字
width:用于设定图片的宽度
height:用于设定图片的高度
border:图片边框厚度
align:用于设定图片的文字的对齐方式
<img alt="妹子一枚" src="images/QQ图片20200513174254.jpg" width="900px" height="600px" border="8" align="middle" /> 涯无止境,学海无涯 链接标签a
<a>标签用于定义超连接,用于从一个页面链接到另一个页面。
常用属性:
href:用于设定链接指向页面的url.
name:用于设定锚的名称
target:用于设定在何处打开链接页面。
<a rel="external nofollow" href="图形标签.html" name="imgurl" target="_blank">点击我吧</a> 表格标签1. table
<table>标签用于定义表格
常用属性:
align:用于设定表格的对齐方式
bgcolor:用于设定表格的背景颜色。
border:用于设定表格边框的宽度
width:用于规定表格的宽度。
2. tr
<tr>标签用于定义表格的行,包含一个或多个th或td元素。
<tr>常用属性:
align:用于设定表格中行的内容对齐方式。
bgcolor:用于设定表格中行的背景颜色。
3. td
<td>标签用于定义表格单元
td元素中的文本一般显示为正常字体且左对齐。
<td>常用属性:
align:用于设定单元格内容的对齐方式。
bgcolor:用于设定单元格背景颜色。
height:用于设定单元格的高度。
width:用于设定单元格的宽度。
colspan:用于设定列合并
rowspan:用于设定行合并。
4. caption
<caption>用于定义表格标题
<caption>标签必须紧随<table>标签之后,一个表格只能有一个标题。通常这个标题会被居中于表格之上。
5. th
<th>标签用于定义表格的表头,<th>内部的文本通常呈现为居中加粗文本。
Html表格中有两种类型的单元格:
表头单元格th:包含表头信息。
标准单元格td:包含数据。
<table border="1" width="50%" align="center" bgcolor="yellow"> <caption>xxx班考试成绩</caption> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> </tr> <tr align="center"> <td rowspan="2">2-1 3-1</td> <td colspan="2">2-2 2-3</td> </tr> <tr> <td>3-2</td> <td>3-3</td> </tr> <tr> <td>4-1</td> <td>4-2</td> <td>4-3</td> </tr> </table>注意:
1.关于html中颜色取值问题
颜色由红色、绿色、蓝色混合而成,有三种取值方式:
1.rgb(0,0,0) 值是在0-255之间
2. #000000 #ff0000 #00ff00 #0000ff #ffffff(6位十六进制数)
3.red green blue(英文单词表示)
2. 关于html中数值单位问题
Html的数值默认单位为像素(px).
在有些位置可以使用百分比来设置。
<hr size=’3’>这个就代表水平线厚席为3px。
例如:
<hr width=’30%’>这个就代表水平线长度为总长度的30%。
3.关于html中图片的对齐属性值问题
algin:对齐方式 center失效 left、right可用
属性值还有 top middle bottom但不是针对图片指相邻的文字相对于图片的位置。
4.关于html中链接标签的target
target:控制是否开启新页
属性值:_self(当前页面打开) _blank (新的页面打开)默认值是_self