以下内容是根据我工作到目前为止的经验将爬虫需要了解的html知识做的一个整理,
所有内容来源与https://www.cnblogs.com/kukudelaomao/p/5729118.html,大多数内容偏向前端开发,
与实际的爬虫工作关系不大,因此我将与爬虫正相关的内容做了一个整合
一.html格式规范
一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解:
1. <html></html>称为根标签,所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
3. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
二.注释符的使用
就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)
三.换行标签<br/>
<br/>标签作用相当于word文档中的回车。
分割线标签<hr/>
<hr/>标签和<br/>标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
四.html特殊字符
空格:
五.无序列表标签ul/li
ul-li是没有前后顺序的信息列表。
举例:
<ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
六.div容器标签
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,
放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。
语法:
<div>…</div>
七.表格标签table、tbody、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示出来。
3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...<td/>,说明一行中就有几列。
5、<th>…</th>:表格的头部的一个单元格,表格表头。
八.
使用<a>标签,链接到别一个页面
使用<a>标签可实现超链接。所有需要通过网络连接进入的页面都需要这个标签
例如:
<a href = "http://www.imooc.com">click here!</a>
九.<img>标签,为网页插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
十.表单标签(与用户进行交互)
表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法:
<form method="传送方式" action="服务器文件">
讲解:
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到后端进行存储判断响应。
3.method : 数据传送的方式(get/post)。
十一.
<input>文本输入框、密码输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type:
当type="text"时,输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name:为文本框命名
3、value:为文本输入框设置默认值。(一般起到提示作用)
十二.单选框,复选框
语法:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当type="radio"时,控件为单选框
当type="checkbox"时,控件为复选框
2、value:提交数据到服务器的值
3、name:为控件命名,以备后台程序提取相应的值
4、checked:当设置checked="checked"时,该选项被默认选中
十三.下拉列表框,节省空间
语法:<option value="提交值">选项</option>
提交值是向服务器提交的值,选项是显示的值。
<form action="/save" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
</select>
</form>
十四.提交按钮
1,提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
语法:
<input type="submit" value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
十五.css的三种形式
1,内联式css样式
就是把css代码直接写在现有的HTML标签中,如下面代码:
<p style="color:red">这里文字是红色。</p>
css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:
<p style="color:red;font-size:12px">这里文字是红色。</p>
2.嵌入式css样式,
就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。
3.外部式css样式
写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内,使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
the end