HTML的基本结构

最新推荐文章于 2024-08-28 11:05:48 发布

生信天地

最新推荐文章于 2024-08-28 11:05:48 发布

阅读量4.5k

点赞数 4

分类专栏： Web开发

本文链接：https://blog.csdn.net/qq_40932679/article/details/115653103

版权

Web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML的基本结构

<html>内容</html> ：HTML文档是由<html></html>这是HTML文档的文档标记，也称为HTML开始标记。这对标记分别位于网页的最前端和最后端，<html>在最前端表示网页的开始，</html>在最后端表示网页的结束。

<head>内容</head>: HTML 文件头标记，也称为HTML头信息开始标记。用来包含文件的基本信息，比如网页的标题、关键字,在<head></head>内可以放<title></title>、<meta></meta>、 <style></style>等标记。注意:在<head></head >标记内的内容不会在浏览器中显示。

<title>内容</title>: HTML文件标题标记。网页的“主题”，显示在浏览器的窗口的左上边。
<body>内容</body>: <body>... </body>是网页的主体部分，在此标记之间可以包含如<p></p>、<h1></h1>、 <br>、 <hr>等等标记，正是由这些内容组成了我们所看见的网页。
<meta>内容</meta>:页面的元信息( meta-information )。提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。注意meta标记必须放在head元素里面。

2.文档设置标记
文档设置标记分为格式标记和文本标记。

<br>:强制换行标记。让后面的文字、图片、表格等等，显示在下- -行。
<p>:换段落标记。换段落，由于多个空格和回车在HTML中会被等效为一一个空格，所以HTML中要换段落就要用<p>, <p>段落中也可以包含<p>段落。例如: <p>This is a paragraph.- </p>。
<center>:居中对齐标记。让段落或者是文字相对于父标记居中显示。
<pre>:预格式化标记。保留预先编排好的格式，常用来定义计算机源代码。和<p>进行一下对比，就可以理解。
<li>:列表项目标记。每-一个列表使用一个<li>标记，可用在有序列表(<ol>)和无序列表(<ul>)中。
<ul>:无序列表标记。<ul>声明这个列表没有序号。
<ol>:有序列表标记。可以显示特定的一些顺序。有序列表的type属性值"1"表示阿拉伯数字1.2.3 等等;默认type属性值"A"表示大小字母A、B、C等等;上面的程序用属性"a"，这表示小写字母a、b、c等等; "I "表示大写罗马数字I、II、I、IV等等; "i "表示小写罗马数字i、i、i、iv等等。注意:列表可以进行嵌套。
<dl><dt><dd>:定义型列表。对列表条目进行简短说明。
<hr>:水平分割线标记。可以用作段落之间的分割线。

<div>:分区显示标记，也称为层标记。常用来编排-大段的HTML段落，也可以用于将表格式化，和<p>很相似，可以多层嵌套使用。

其中文本标记包括:
<hn>:标题标记。共有6个级别,n的范围为1~6，不同级别对应不同显示大小的标题,h1最大，h6最小。
<font>:字体设置标记。用来设置字体的格式，一般有三个常用属性:size(字体大小)，<font size="14px">; color(颜色)，<font color="red">; face(字体)，<font face="微软雅黑"'>。
<b>:粗字体标记。

<i>:斜字体标记。
<sub>:文字下标字体标记。<sup>:文字上标字体标记。<tt>:打印机字体标记。
<cite>:引用方式的字体,通常是斜体。<em>:表示强调,通常显示为斜体字。<strong>:表示强调,，通常显示为粗体字。<small>:小型字体标记。
<big>:大型字体标记。<>:下划线字体标记。

3.图像标记
<img>称为图像标记，用来在网页中显示图像。使用方法为:<img src="路径/文件名.图片格式"width="属性值"height="属性值"border="属性值"alt="属性值">。<img>标记主要包括以下属性:
src属性用来指定我们要加载的图片的路径、图片的名称以及图片格式。
width属性用来指定图片的宽度，单位为px、em、cm、mm。
height 属性用来指定图片的高度，单位为px、em、cm、mm。
border 属性用来指定图片的边框宽度，单位为px、em、cm、mm。
alt属性有三个作用:1)当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字;2）如果图像没有下载或者加载失败，会用文字来代替图像显示;3)搜索引擎可以通过这个属性的文字来抓取图片。

4.超链接的使用
爬虫开发中经常需要抽取链接，链接的引用使用的是<a>标记。
<a>标记的基本语法:<a href="链接地址"target="打开方式"name="页面锚点名称">链接文字或者图片</a>。<a>标记主要包括以下属性:
href属性值是链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等。
target属性用来定义超链接的打开方式。当属性值为_blank时，作用是在一个新的窗口中打开链接;当属性值为_self(默认值)时，作用是在当前窗口中打开链接;当属性值为_parent 时，作用是在在父窗口中打开页面;当属性值为_top时，在顶层窗口中打开文件。
name属性用来指定页面的锚点名称。

5.表格
表格的基本结构包括<table>、<caption>、<tr>、<td>和<th>等标记。
<table>标记的基本格式为<table属性1="属性值1"属性2="属性值2"..….表格内容</table>。table 标记有以下常见属性:

width属性:表示表格的宽度,它的值可以是像素(px)也可以是父级元素的百分比(%)。
height属性:表示表格的高度,它的值可以是像素( px )也可以是父级元素的百分比(%)。
border属性:表示表格外边框的宽度。
align属性用来表示表格的显示位置。left居左显示，center居中显示，right居右显示。
cellspacing属性:单元格之间的间距，默认是2px，单位为像素。
cellpadding属性:单元格内容与单元格边框的显示距离，单位为像素。
frame属性用来控制表格边框最外层的四条线框。void（默认值）表示无边框; above表示仅顶部有边框; below表示仅有底部边框;hsides表示仅有顶部边框和底部边框;lhs表示仅有左侧边框;rhs表示仅有右侧边框; vsides表示仅有左右侧边框; border表示包含全部4个边框。
rules属性用来控制是否显示以及如何显示单元格之间的分割线。属性值none(默认值）表示无分割线;all表示包括所有分割线;rows表示仅有行分割线;clos表示仅有列分割线;groups表示仅在行组和列组之间有分割线。
<caption>标记用于在表格中使用标题。<caption>属性的插入位置，直接位于<table>属性之后，<tr>表格行之前。<caption>标记中 align属性可以取四个值: top表示标题放在表格的上部; bottom表示标题放在表格的下部;left表示标题放在表格的左部;right 表示标题放在表格的右部。
<tr>标记用来定义表格的行，对于每一个表格行，都是由一对<tr>...</tr>标记表示，每一行<tr>标记内可以嵌套多个<td>或者<th>标记。<tr>标记中的常见属性包括:
bgcolor属性用来设置背景颜色,格式为bgcolor="颜色值"。
align属性用来设置垂直方向对齐方式，格式为align="值"。值为bottom时，表示靠顶端对齐;值为top时，表示靠底部对齐;值为middle时，表示居中对齐。
valign属性用来设置水平方向对齐方式，格式为valign="值"。值为left时，表示靠左对齐;值为right时,表示靠右对齐;值为center时，表示居中对齐。
<td>和<th>都是单元格的标记，其必须嵌套在<tr>标记内，成对出现。<th>是表头标记,通常位于首行或者首列，<th>中的文字默认会被加粗，而<td>不会。<td>是数据标记，表示该单元格的具体数据。<td>和<th>两者的标记属性都是一样的，常用属性如下:
bgcolor设置单元格背景。align设置单元格对齐方式。
valign设置单元格垂直对齐方式。width 设置单元格宽度。
height设置单元格高度。
rowspan设置单元格所占行数。colspan设置单元格所占列数。