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网页会变得比互联网初期时复杂那么多，这样也使得浏览器的引擎必须持续迭代来保证渲染性能和体验。

大数据爬虫前奏之Html和Css学习相关推荐

视频教程-大数据Java强化班(十)之大数据爬虫-Java
大数据Java强化班(十)之大数据爬虫 10年一线开发及项目管理经验,6年以上大数据项目架构.实施.开发与运维经验,骨灰级大数据玩家,对Hadoop.Storm.Spark.Flink.Kylin.D ...
AI公开课：19.05.29 浣军-百度大数据实验室主任《AutoDL 自动化深度学习建模的算法和应用》课堂笔记以及个人感悟
AI公开课:19.05.29 浣军百度大数据实验室主任<AutoDL 自动化深度学习建模的算法和应用>课堂笔记以及个人感悟导读浣军博士,汉族,1975年出生于江苏苏州, ...
大数据深度分页_机器学习、深度学习、大数据？傻傻分不清楚？
提起机器学习四个字,不知你的脑海中是否会有一丝印象?毕竟身处信息时代,在日常生活中,无论通过什么媒介,接触到这个名词概念的机会还是挺大的.与之类似,还有以下这些名词概念:数据分析.数据挖掘.深度学习 ...
第一课大数据技术之Fink1.13的实战学习-部署使用和基础概念
第一课大数据技术之Fink1.13的实战学习文章目录第一课大数据技术之Fink1.13的实战学习第一节 Fink介绍 1.1 Flink介绍背景 1.2 Flink 的应用场景 1.3 流式 ...
第三课大数据技术之Fink1.13的实战学习-时间和窗口
第三课大数据技术之Fink1.13的实战学习-时间和窗口文章目录第三课大数据技术之Fink1.13的实战学习-时间和窗口第一节时间定义 1.1 Flink中的时间语义 1.2 两种时间语义 ...
大数据课程适合那些基础的人学习呢？适合学习大数据课程的四类人
大数据现在已然不是一个新的话题,大数据的火热却依旧没有用褪去,大数据技术仍然受到不少朋友的青睐.大数据相关工作的薪资可观,而且人才需求也非常大.大数据到底适合哪类人学习,大数据学习究竟如何,下面和加米 ...
第七课大数据技术之Fink1.13的实战学习-Fink CEP
第七课大数据技术之Fink1.13的实战学习-Fink CEP 文章目录第七课大数据技术之Fink1.13的实战学习-Fink CEP 第一节 Fink CEP介绍 1.1 Flink CEP背 ...
第六课大数据技术之Fink1.13的实战学习-Table Api和SQL
第六课大数据技术之Fink1.13的实战学习-Table Api和SQL 文章目录第六课大数据技术之Fink1.13的实战学习-Table Api和SQL 第一节 Fink SQL快速上手 1. ...
大数据爬虫技术基础篇：大快在线爬虫安装步骤
2019独角兽企业重金招聘Python工程师标准>>> 在线爬虫是大快大数据一体化开发框架的重要组成部分,本篇重点分享在线爬虫的安装. 爬虫安装前准备工作:大快大数据平台安装完成.z ...
最新2018我破解了天某查企某查启某宝企某猫和全国源站工商企业大数据爬虫系统
Python爬虫-2018年-我破解天某查和启某宝企业数据爬虫--破解反爬技术那些事情最近在自己用python+mongdb写了一套分布式多线程的天某查爬虫系统,实现了对天某查整个网站的全部数据各种 ...

大数据爬虫前奏之Html和Css学习