大数据爬虫前奏之Html和Css学习_学爬虫掌握htmi+css-优快云博客

本文是大数据爬虫前的Html基础知识讲解，包括Html的定义、用途，详细介绍了排版、块标签、列表、图片、链接、表格、表单及下拉选项等常用标签的使用，探讨了Html的优点和不足，以及设计思路和出发点。

Html十分钟入门

在整个大数据技术分层中，数据来源之一就是爬虫。而想要爬取更多数据，对Web的学习必不可少。
Web知识主要分三大类，Html和Css、JavaScript、框架。
今天主要讲关于Html的知识

1.Html是什么？

HTML全名是超文本标记语言，Hyper Text Markup Language。它是一门语言，用于文本，其中标记是它的基础。后续大家就可以看到Html主要是各类标记元素嵌套来展示数据。
本身它也有自己的格式，后缀以.hml .htm结束的就是html页面，大家打开浏览器，ctl+s，保存的就是打开网页的html文件。
在这里插入图片描述

2.Html怎么用？

<!-- 这是注释，DOCTYPE 标明这个文件是html格式的 -->
<!DOCTYPE html>
<html>
	<!-- 
	z这个是html的head--头部分，我们看到的网页顶部的标题等信息就是在这里设置
	我们的script脚本如js，如果以文件形式抽离为单独文件，引入的代码就是写在这里	
	 -->
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<!-- 
	这里是html的体--body部分，
	一般我们网页中需要展示的各种信息就是以标签元素形式嵌套或者并列方式展现在这里，
	我们的script脚本如果很简短，也可以写在这里
	这里其实已经可以看出，它和xml很相似，都是一对一对的标签中添加信息，也可以嵌套.当然也可以不使用一对一对如<br/>，斜杠表示这个元素已经结束，一对一对则方便在其中做嵌套使用
	 -->
	<body>
	</body>
</html>

2.1排版标签

注释
显而易见，注释标签,作为一门编程语言，注释是一定需要的。虽然这门语言只是用来标记，并且展示信息的，但注释功能也必不可少。

<!-- 注释内容 -->

p标签
paragraph，英文单词段落的意思。这里的p就是指的段落，浏览器解析时会自动在段落前后加空格

<p>
	段落内容或者其他标签元素，注意html中的元素是可以并列展示或者多层嵌套的。具体参见xml，一样的用法。或者说大家可以想象成俄罗斯套娃，可以无限套，不过可读性和性能起见，一般都会控制嵌套层数。
</p>

br标签
line break就是换行的意思，这里br取break的前2个字母。我们排版时，肯定会需要换行，这个时候就可以用上这个标签

<br/>

hr标签
Horizontal divider水平分割线，这里取hr，水平单词缩写意思。同样的，我们要做排版，水平分割线也是必不可少的。

<hr/>

ps:

html最早是发明用于电脑，所以单位默认是像素px。
这里大家可以联系到winidows操作系统为什么应对超高清如4k屏幕时，UI适配并不好的原因，但MacOS在不同屏幕上表现都很优异。
如果做过前端app开发，大家知道为了解决手机像素在开发时的便捷性，使用了无关像素点这个概念，也就是在像素这个实际单位上做了一层抽象，这样可以很方便应对普通屏幕，高清屏幕，视网膜屏幕，超高清屏幕等等。

2.2块标签

div标签
用于在文档中设定一个区块，类似一个大的容器一样，里面可以放各种具体展示信息的标签元素。这样一来如果要做大块大块的布局，则直接调整不同div之间的布局就可以做到。

<div>
<!-- 这里可以并列或者嵌套其他的标签元素，包括再加一层div都可以 -->
</div>

span标签
这个可以在一行之内设定一个块区域

<span>
<!-- 嵌套其他的标签，文字等信息或者元素-->
</span>

font标签
顾名思义，这个就是设置字体相关信息，如大小，颜色，字体类型等信息的标签元素，可以嵌套其他的，但一般都是嵌套文字信息

<font>
<!-- 这里嵌套展示文字，或者其他元素，一般是文字信息-->
</font>

标题
最多有6级标题，大家如果联想到mark down语法，没错，mark down就是脱胎于html标记语言的，不过做了更多简化，但千丝万缕，斩之不断。

<h1>
一级标题，最大
</h1>

<h2>
二级标题
</h2>

<h3>
三级标题
</h3>

<h4>
四级标题
</h4>

<h5>
五级标题
</h5>

<h6>
六级标题，最小
</h6>

2.3列表标签

ul
无序列表，常见type就是无序列表前面的图形，有square、disc、circle
ol
有序列表，就是每一个子行都有一个自动添加的数字
li
列表中的每一行

<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>

<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>

2.4图片标签

经常说的图文并茂，作为描述文本为主的标记性语言，图片肯定不可或缺。

<img src="本地或者网络路径" style="width:100px; height:100px;"/>

ps：
最新的浏览器等已经不再支持直接读取硬盘中的图片文件路径，所以需要测试，要把图片资源拷贝到自己的web项目中进行访问

2.5链接标签

a,就是表示一个连接，属性设置就是href，可以看错是hyper reference link

<a href="//www.baidu.com/">
	简单教程
</a>

2.6表格标签

表格，table

		<table border="1">
			<caption>表格标题</caption>
			<th>表头1</th>
			<th>表头2</th>
    		<tr>
        		<td>row 1, cell 1</td>
        		<td>row 1, cell 2</td>
    		</tr>
    		<tr>
        		<td>row 2, cell 1</td>
        		<td>row 2, cell 2</td>
    		</tr>
		</table>

在这里插入图片描述

2.7表单标签

表单，form

		<form>
			圣墟: <input type="text" name="不详"><br>
			我的师兄太稳健了: <input type="text" name="稳教">
		</form>

在这里插入图片描述
ps:

表单中可以内嵌,并且设置input的类型为text、password、radio、checkbox、button、hidden、file、submit、reset、image等来丰富表单form的内容。
整体表单可以看做是一个html网页跟用户交互的一个工具箱，里面可以放各种交互的标签元素。

2.8select和option标签

select就是一个下拉自定义的表格，option则是每个自定义选项的元素。

	<select>
    	<option value="神船笔记本">神舟</option>
    	<option value="蓝天模具笔记本">蓝天自定义</option>
    	<option value="败家之眼笔记本">华硕</option>
    	<option value="外星人贵笔记本">戴尔</option>
	</select>

在这里插入图片描述

3.Html有什么优点和不足

html优点，简洁明了，使用标记来展示出不同文本类型和数据。对比如word、ppt、excel等格式要轻量很多很多，也利于网络传输和解析读取。最早期的互联网的硬件和网络都能很好承载。
html不足，从自身体验来看，还是显得有些臃肿，出现错误定位对比编译性的编程语言也比较麻烦。如果一个复杂网页，html文件一般会显得相对庞大.
具体可以看一下京东首页的html文件，进入浏览器之后，ctrl + s，保存的就是html页面文件，大家可以看一下层级是非常深的，额比较复杂。所以淘宝，京东都已经开发出无人化的html页面生成技术来提升维护效率。
京东首页

4.Html的设计思路和出发点

本质其实就是使用标记来区分各种类型的展示元素，并且允许嵌套，这样就可以带来非常丰富的样式变种。至于每个元素则使用不同的属性如style等来修饰，整体非常轻量级，利于使用浏览器引擎解析和渲染。
从整体来看，当时设计时，可能并没有设想到随着现实业务发展，html网页会变得比互联网初期时复杂那么多，这样也使得浏览器的引擎必须持续迭代来保证渲染性能和体验。