HTML语言规范

最新推荐文章于 2022-03-31 16:41:20 发布

一只量子猪

最新推荐文章于 2022-03-31 16:41:20 发布

阅读量436

点赞数

分类专栏：前端文章标签： html css html5 javascript

本文链接：https://blog.csdn.net/qq_53388087/article/details/118075830

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

- 1.HTML语言规范

HTML（超文本标记语言）是用来描述网页的一种语言，超文本即字面意思

1.HTML语言规范

<html>
    <head>
        <title>I am a title!</title>
    </head>
    <body>
    Hello World!
        <h2>
            <a href="https://www.baidu.com">百度</a>
        </h2>
    </body>

</html>

在这里插入图片描述

1.1 HTML标签

标记标签又被称为HTML标签，是组成HTML页面的基本内容。HTML标签是由尖括号包括的关键词，例如< body >， < head> 等，关键词可以忽略大小写。从开始标签到闭合标签之间的代码称为元素，在标签的作用下，文档可以改变样式，或实现插人图片、链接、表格等结构的功能。

HTML标签很多，从闭合的角度可以分为闭合标签与空标签。闭合标签是指由开始标签和结束标签组成的一对标签，带斜杠的元素表示结束，例如< body >和< /body >，这种标签允许嵌套和承载内容。空标签是没有内容的标签，通常用来占位，在开始标签中自动闭合，例如< br >、< link >、 < meta >都属于空标签。HTML标签还可以按照在文档中的位置特性进行分类，主要分为块级标签、行内(内嵌)标签和行内-块级(内嵌-块级)标签。

(1)块级标签；块级标签是独占一行的标签，并且标签间的元素能随时设置宽度、高度、顶部和底部边距等，常见的块级标签有< p >、< hl >， < ul >， < div >等。

(2)行内(内嵌)标签：行内标签的元素和其他元素在同一行上，而元素的宽度，高度、顶部和底部边距不可设置，例如标签< span >， < a >， < label >等。

(3)行内-块级(内嵌-块级)标签：多个行内-块级标签的元素可以显示在同一行，并且可以设置元素的宽度、高度、顶部和底部边距。例如< input >< img >.

除了标签名本身外，标签还可以带有一些属性。这些属性在网络爬虫程序设计中也经常使用，以下是典型的标签和属性的写法。

<a href="https://www.baidu.com/"target='_blank'>跳转到百度 </a>
<img src="/images/pic.gif" width="30" height="20">
<div class="container logo-search">

这些文本中，href是标签< a >的属性，指出了相应的超链接；src是img的属性，其属性值是图片的对应的URL；< div >标签通常会指定其相应的class属性

1.3 HTML整体结构

整体结构包括头和主体，头部描述浏览器所需的信息，主体包含网页所需展示的具体内容。
同时，HTML文档都是以 < html >和< /html >开头结尾，HTML文档的标签都是前嵌套使用的，所以在网络爬虫进行信息提取时通常将HTML文档转换成树结构，再进行选择。
1.头部
头部描述浏览器所需要的信息，例如页面标题、关键词、说明等内容；头部包含的信息不作为网页的内容来显示，但是会影响网页的显示效果，头部信息的开始和结尾是山< head >和< /hend >两个标签标记的， < title >、< base >、< link >、< meta >、< script >以及< style>标签可以添加到头部信息中，各标签的描述如表2-1所示。
在这里插入图片描述

2.主体
网页需要显示的实际内容都包含在主体之中，由< body>、< /body>表示主体信息的开始和结尾，对于网络爬虫抓取Web页面而言，所关注的信息内容也都是大部分封装在< body>和< /body>之间。

1.4 CSS简介

CSS（层叠样式表单）定义了如何显示HTML元素

CSS可以通过以下3种方式添加到HTML中

1.内联样式
内联样式即为在相关的标签中使用样式属性，当特殊的样式需要应用到个别元素时可以使用。样式属性可以是任何CSS属性，主要使用的属性是style，设置段落格式：

<p style="color:blue">This is a paragraph </p>

2.内部样式表
当单个文档需要特别样式时可以在头部通过< style >标签定义内部样式，下面的代码通过在头部定义内部样式表将页面背景设置为黄色，将段落颜色改为蓝色

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

3.外部引用
当样式需要被很多页面引用时，可以使用独立的外部CSS文件，这样可以简化页面模式的设计，编辑CSS文件后直接使用在当前页面

<head>
<link rel="stylesheet"type="text/css"href="mystyle.css">
</head>

1.5 爬虫常用标签

以下是一些与爬虫相关比较大的标签

1.< meta >
< meta >提供了HTML文档的元数据，主要包括字符编码，关键词，页面描述，最后修改时间等，其中最重要的字符编码使用了该标签中的 charset属性声明Web文档中的字符编码

<meta charset="utf-8">

2.< p >
< p >定义段落，该标签会自动在段落前后添加空白，可以使用CSS调整

<p>This is a paragraph</p>

3.< div >
< div >用来定义文档中的分区或节，把文档分割成为独立的部分，经常用于网页布局。该标签通常会使用id或class属性设计额外的样式，其中class用于元素组，而id用于表示单独的、唯一的元素
4.< table >
< table >定义页面的表格，HTML中的简单表格由table元素以及多个tr、th、td元素组成。其中tr元素定义表格行（有几个tr元素就有几行），td定义表格单元，th定义表格标题列，所以th默认加粗并居中显示。 < table >的常用属性为表格边框属性（border），当使用border=“1”设置边框时，会在所有表格单元以及表格上嵌套边框。

<table border="1">
    <tr>
        <th>title1</th>
        <th>title2</th>
    </tr>
    <tr>
        <td>content1</td>
        <td>content2</td>
    </tr>
</table>

在这里插入图片描述
（这里的黄色是按上文的方法设置的）

5.< a >
< a >标签定义超链接，其最重要的属性是href，它指定了链接的目标。爬虫在采集到一个Web页面之后，就需要在页面中寻找该标签，并提取出超链接作为新的爬行任务，指向github的超链接：

<a href="https://www.github.com/">github</a>

6.< form >
< form >可以把用户输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。form的两个重要属性是action和method，其中action表单需要提交的服务器地址，method规定表单提交数据使用的方法（GET/POST），form可以包含input等元素，例如复选框，按钮等
7.< base >
< base >用来指定页面内所有超链接的基准路径，以此实现相对路径的使用
例如：在p.html文件中有

<base href="https://www.abc123.com/abc/ABC/"/>

那么< img src=“images/p2.jpg” >表示从https://www.abc123.com/abc/ABC/images/p2.jpg获取图片文件

8.< script >
用于在HTML页面插入脚本。其type属性是必选属性，用来指定脚本的MIME类型，下面的代码在页面中加入JavaScript脚本，在页面中输出“Hello”

<script type="text/javascript">
document.write("Hello")
</script>

1.6 HTML 5版本的新内容

（1）语义化标签：在HTML 5出现之前使用< div >实现页面的分块，虽然可以便用id属性来形容每个分块。在HTML 5中引人了新的内容标签，例如< article >、< footer >、 < header >< nav >、< section >.这些标签表达了一定的语义，可根据语义标签快速识别各分块的内容.这样在使用爬虫获取网页数据时可以更高效
（2）网页多媒体：HTML 5引人video， audio元素使网页多媒体的嵌入变得更加便利， video元素支持Ogg、MP4、WebM等视频格式，用来在文档中嵌人视频内容；audio元素支持Ogg、Vorbis、MP3、WAV等音频格式，用来在文档中嵌入音频内容。利用< video >标签直接在页面中添加一个MP4视顿就可以播放，不依赖Flash插件，这对移动端网页多媒体的使用也十分便利

<video src="movie.mp4" controls="controls">
</video>

（3） HTML 5添加了canvas元素.canvas使用JavaScript在网页上绘制图形、动画
（4）HTML 5添加了地理位置API，可以定位当前使用者的经纬度等。
（5） HTML 5引人了应用程序缓存缓存之后，可在没有网络连接时访问网页，同时还可以提高页面加或速度，减少服务器负载

一只量子猪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML语言规范

HTML（超文本标记语言）是用来描述网页的一种语言，超文本即字面意思1.HTML语言规范<html> <head> <title>I am a title!</title> </head> <body> Hello World! <h2> <a href="https://www.baidu.com">百度</a.
复制链接

扫一扫