HTML的基本结构

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设置单元格所占列数。
 

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天道工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值