1、什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
Web浏览器的作用是读取HTML文档,并以网页的形式显示出它们,浏览器并不会显示HTML标记,而只是使用标记来解释页面的内容。
HTML的语言特点包含:
可以设置文本的格式,比如标题、字号、文本颜色、段落等
可以创建列表
可以插入图像和媒体
可以建立表格
超链接。
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:
2、HTML的结构
看一个案例结构:
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。
标签有两种,自闭合标签(比如:<meta charset="UTF-8"/>),其他正常的标签(比如<html> </html> )
HTML的结构:
1) Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档。该属性会被浏览器识别并使用:
如果页面没有Doctype声明,则compatmode默认时backcompat,浏览器将按照自己的方式解析,那么不同的浏览器将会解析成不同的样式;
如果声明了Doctype,则开启了标准模式,浏览器会按照W3C标准解析渲染页面,则页面在所有的浏览器显示的都一样。
备注:W3C标准为万维网联盟。
2) HTML的开始标记:<html> 内容 </html>
HTML文档是由<html> </html> 包裹,也是HTML的开始标记,<html>在最前端,表示开始, </html>在最后端,表示网页的结束。html包含两个主要部分,head、body。
3)<head> 内容 </head>,HTML文件头标记
也称为HTML头信息开始标记,用来包含文件的基本信息,比如网页的标题、关键字。包含以下部分:
其中:
<meta>内容</meta>,为页面的元信息(meta-information),比如针对搜索引擎和刷新频率的描述和关键词。
<title>内容</title>,为网页头部信息,在网页框上显示
link 可设置链接,设置css格式、icon
style,在页面中写css格式
script,引进文件,写js代码
案例1:
效果:
4)网页的主题部分:<body> 内容 </body>
<body> 内容 </body>是网页的主体部分,中间可以存放<h1>标题</h1> 、<p>段落</p> 等标记,正是这些内容组成了我们所看见的网页。
4-1 块级标签、行内标签:
在htlm中经常能看到的标签一般分为两种:块级标签和行内标签。对应于
块级标签block-level elements,被视为独立的一块,会单独换一行,即“块框”。比如DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL
行内标签 inline elements,前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。比如SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR
案例2:块级和行内标签的区别
结果:
4-2 常用格式标记:
<br />:强制换行标记。让后面的文字、图片、表格等等,显示在下一行。
<p></p>:段落符号,默认两个段落之间有间距。
<center>:居中对齐标记。让段落或者是文字相对于父标记居中显示。
<pre>:预格式化标记。保留预先编排好的格式,常用来定义计算机源代码
<li>:列表项目标记。每个列表使用一个<li>标记,可用在有序列表(<ol>)和无序列表(<ul>)中
<ul>:无序列表标记。<ul>声明这个列表没有序号。项目符号
<ol>:有序列表标记。项目符号可以显示特定的一些顺序。比如type属性值"A"表示大写字母A、B、C,type属性值“1”表示阿拉伯数字1、2、3等。
<dl><dt><dd>:定义型列表,对列表条目进行简短说明。
<hr>:水平分割线标记,可以用作段落之间的分割线
<div>:分区显示标记,也称层标记,常用来编排一大段的HTML段落,也可以用于将表格式化,和<p>很相似,可以多层嵌套使用。
案例3:常用格式
效果:
4-3 各种特殊符号编码:
需要htlm代码中加入以&开头的字母组合以&#开头的数字。
比如:
具体其他的标签可参考:
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
4-4 a标签(超链接的使用):
爬虫中经常需要抽取链接,链接的引用使用的是<a>标记。
基本语法:
<a href="链接地址" target="打开方式"name="页面锚定点名称">链接文字或者图片</a>。
主要包括以下属性:
href属性值是链接的地址,链接的地址可以是一个网页,也可以是一个视频、图片、音乐等
target属性用来定义超链接的打开方式。当属性值为_blank时,作用是在一个新的窗口中打开链接;当属性值为_self(属性值)时,作用是在当前窗口中打开链接,当属性值为_parent时,作用是在父窗口中打开页面,当属性值为_top时,在顶层窗口中打开文件。
name属性用来指定页面的锚定名称,锚定类似于查字典时候的目录。
案例4:a标签应用
效果:
案例5:a标签中id的应用:
效果:
4-5 文本标签:
<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>:表示强调,通常显示为粗体字;
<samll>:小型字体标签;
<big>:大型字体标签;
<u>:下划线字体标签;
案例6:字体大小
效果:
4-6 input标签:
input标签的的type包含:
text:文本框
password:密码框,里面未***
email:邮箱,会检测是否符合邮箱格式。
radio:单选框
checkbox:复选框
file:文件上传
button:普通的按钮
submit:提交
reset:重置
textarea:多行文本
案例7:文本框
<!--文本框-->
<p>用户名:<input type="text"/></p>
<p>密码:<input type="password"/></p>
<p>邮箱:<input type="email"/></p>
结果:
案例8:单选框
<!--单选框-->
<p>性别:
<!--name的值可以随便设置,只需要一致即可识别-->
<br/>男<input type="radio" name="sex"/>
<br/>女<input type="radio" name="sex"/>
</p>
结果:
案例9:复选框
<!--复选框-->
<p>爱好:
<br/>游泳<input type="checkbox" name="ee"/>
<br/>打球<input type="checkbox" name="ee"/>
<br/>旅游<input type="checkbox" name="ee"/>
</p>
结果:
案例10:上传文件
<p>文件:<input type="file"/></p>
案例11:备注,按钮
<p>备注:<textarea></textarea></p>
<input type="submit" value="submit">
<input type="button" value="button">
<input type="reset" value="reset">
4-6 select标签:
案例12:select、下拉框
<!--下拉框-->
<p>城市:
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<!--多级下拉框就多写几个select-->
<!--mutiple最多展示几个,剩余的可以下滑-->
<select mutiple size="1">
<option>市区</option>
<option>郊区</option>
</select>
<!--optgroup多级标签-->
<select>
<optgroup label="AA">
<option>A1</option>
<option>A2</option>
</optgroup>
<optgroup label="BB">
<option>B1</option>
<option>B2</option>
</optgroup>
</select>
</p>
效果:
4-7 form标签,向后台发送数据
案例13:form标签
4-8 表格标签:
表格的基本结构包括<table>、<caption>、<tr>、<td>和<th>等标记。
基本格式:
<table 属性1="属性1"属性2="属性2"...>表格内容</table>
案例14:表格
常见属性:
width:宽度,可以设置成像素,比如px
heigh:宽度;
border:外边框宽度;
align:表格的显示位置(left居左显示,center居中显示,right居右显示);
cellspacing:单元格之间的间距;
cellpadding:单元格与单元格变的显示距离;
frame:表格边框最外层的四条线框(void无边框,above顶部有边框,below仅有底部边框,hsides顶部边框和底部边框,lhs表示仅有左侧边框,rhs仅有右侧边框,vsides左右侧边框,border包含全部4个边框)
rules控制是否显示以及如何显示单元格之间的分割线(none无分割线;all所有分割线;rows仅有分割线;clos仅有列分割线;groups航组和列祖之间有分割线)
bgcolor:设置背景色,格式为bgcolor=“颜色值”
align用来设置垂直方向对齐方式(align=“值”,值为bottom表示靠顶端对齐,值为top表示底部对齐,值为middle表示居中对齐)
valign用于设置水平方向对齐方式,valign=“值”,值为left靠左对齐,值为right靠右对齐,值为center时,表示居中对齐
rowspan设置单元格所占行数,用于合并单元格
colspan设置单元格所占列数,用于合并单元格
4-9 fieldset标签:
案例15:有登录框的标签:
4-10 iframe标签:嵌套其他的网页
链接全部网页;比如链接到搜狐网全部网页:
案例16:iframe标签
结果:
4-10 img标签:
格式:<img src="路径/文件名.图片格式"width=“属性值”height="属性值"border="属性值"alt="属性值"/>
src用来指定要加载的图片路径、图片的名称以及图片格式
width图片宽度,单位可以是px、em、cm、mm
heigh图片高度
border图片的边框宽度
alt属性,1)当网页图片被加载完成后,鼠标移动到上面,会显示这个图片的指定属性文字;2)如果图像没有下载或者加载失败,会用文字来代替图像显示;3)搜索引擎可以通过这个属性的文字来抓取图片
案例链接:https://pan.baidu.com/s/1sk8QS8X 密码:gmxb
学习网址参考:http://www.w3school.com.cn/html/index.asp