大纲:
概念:
SGML: Standard Generalized Markup language,是一种定义电子文档结构和描述其内容的国际标准语言。
HTML: HyperText Markup Language,它通过标记符号来标记要显示的网页中的各个部分。
超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
XHTML: EXtensible HyperText Markup Language,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。
XML: Extensible Markup Language, 是一种用于标记电子文件使其具有结构性的标记语言。
W3C标准:World WideWeb Consortium,有效促进了Web技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用, 网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
HTTP协议:超文本传输协议(HTTP,HyperTextTransfer Protocol)是互联网上应用最为广泛的一种网络协议。提供一种发布和接收HTML页面的方法,
结构标准(Structure):文档排版结构。
表现标准(Presentation):外观标准,颜色,字体……
行为标准(Behavior):给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对象。
CSS:层叠样式表(英文全称:CascadingStyle Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
Xpath:XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言。
JSON: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
JavaScript:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
方法:
1.1HTML的基本结构
<html>内容</html> | HTML文档是由<html></html>包裹 |
<head>内容</head> | HTML文件头标记 |
<title>内容</title> | HTML文件标题标记 |
<body>内容</body> | 是网页的主题 |
<meta>内容</meta> | 页面的元信息 |
元信息:比如针对收索引擎更新频度的描述和关键词。
1.2文档设置标记
文档设置标记分为格式标记和文本标记。
格式标记 | |
<br> | 强制换行标记 |
<p> | 换段落标记 |
<center> | 居中对齐标记 |
<pre> | 预格式化标记 |
<li> | 列表项目标记 |
<ul> | 无序列表标记 |
<ol> | 有序列表标记 |
<dl><dt><dd> | 定义型列表 |
<hr> | 水平分割线标记 |
<div> | 分区显示标记 |
文本标记 | |
<hn> | 标题标记 |
<font> | 字体设置标记 |
<b> | 粗字体标记 |
<i> | 斜字体标记 |
<sub> | 文字下标字体标记 |
<sup> | 文字上标字体标记 |
<tt> | 打印机字体标记 |
<cite> | 引用方式的字体,通常是斜体 |
<em> | 表示强调,通常显示为斜体 |
<strong> | 表示强调,通常显示为粗体字 |
<small> | 小型字体标记 |
<big> | 大型字体标记 |
<u> | 下划线字体标记 |
1.3图像标记
<img>称为图像标记,用来在网页帧显示图像。
<img src=“路径” width=“路径” height=“路径”>
src | 属性用来指定我们要加载的图片的路径、图片名称和格式 |
width | 属性用来指定图片的宽度,单位为px、em、cm、mm |
height | 属性用来指定图片的高度,单位为px、em、cm、mm |
border | 属性用来指定图片的边框宽度,单位为px、em、em、mm |
alt | 三个作用: 1. 对鼠标显示,图片的属性文字。 2. 图像没有下载或者加载失败,用文字来代替图像显示。 3. 收索引擎可以通过这个属性的文字来抓取图片。 |
1.4超链接的使用
<a>用来标记超链接。
<a href=”链接地址” target=”打开方式“ name=”页面描点名称“>
href | 属性值是链接地址,链接地址是一个网页、视频、图片 |
Target | 属性用来定义超链接的打开方式 |
Name | 属性用来指定页面的描点名称 |
1.5表格
<table> | width | 表示表格的宽度 |
height | 表示表格的高度 | |
border | 表示表格外边框的宽度 | |
align | 表示表格的显示位置 | |
cellspacing | 单元格之间的间距 | |
cellpadding | 单元格内容与单元格边框的显示距离,单位为像素 | |
frame | 控制表格边框最外层的四条线框 | |
rules | 控制是否显示以及如何显示单元格之间的分割线 | |
<caption> |
| Top:表示标题放在表格上部 Botton:表示标题放在表格下部 Left:表示标题放在表格的左部 Right:表示标题放在表格的右部 |
<tr> | Bgcolor | 设置背景颜色 |
align | 设置垂直方向对齐方式 | |
valign | 设置水平方向对齐方式 | |
<td><th> | bgcolor | 设置单元格背景 |
align | 设置单元格对齐方式 | |
valign | 设置单元格垂直对齐方式 | |
width | 设置单元格宽度 | |
height | 设置单元格高度 | |
rowspan | 设置单元格所占行数 | |
colspan | 设置单元格所占列数 |
2.CSS
用来定义如何显示HTML元素,一般和HTNL配合使用。
内联样式表 | CSS直接写在HTML标记中,直接使用style属性改变样式 |
嵌入式样式表 | CSS样式代码写在<style type=”text/css”></style>标记之间,一般下嵌入式CSS样式写在<head></head>之间 |
外部样式表 | CSS写一个单独的外部文件中,在<head>中使用<link>标记将CSS样式文件链接到HTML文件中 |
CSS规则通常由选择器和一条或多条声明组成,选择器通常是需要改变的HTML元素,属性是希望设置的样式属性。
选择器定义:
HTML标记定义 |
|
ID选择器定义 | ID选择器可以为标有特定ID的HTML元素指定特定的样式 |
Class选择器定义 | Class选择器用于描述一组元素的样式,class选择器有别于ID选择器,它可以在多个元素中使用 |
2.1颜色属性
颜色名称 | Color:green |
十六进制 | Color:#ff6600 |
简写方式 | Color:#f60 |
RGB方式 | rgb(255,255,255) |
RGBA方式 | Color:rgba(255,255,255,1) |
2.2字体属性
Font-size | 定义字体大小 |
Font-family | 定义字体 |
Font-weight | 定义字体加粗 |
2.3背景属性
Background-color | 用来定义背景的颜色 |
Background-image | 用来定义背景图片 |
Background-repeat | 用来定义背景重复方式 |
Background-position | 用来定义背景位置 |
Background简写 | 背景颜色url重复位置 |
2.4文本属性
Text-align | 设置文本对齐方式,属性值可以取left、center、right |
Line-height | 设置文本行高,属性值可以取具体数值,来设置固定的行高值 |
Text-indent | 代表首行缩进 |
Letter-spacing | 用来设置字符间距 |
2.5列表
List-style-type | 指明列表项标记的类型 | |
None | 无标记 | |
Disc | 默认,标记是实心圆 | |
Circle | 标记是空心圆 | |
Square | 标记是实心方块 | |
Decimal | 标记是数字 | |
Decimal-leading-zero | 0开头的数字标记 | |
Lower-roman | 小写的罗马数字i,ii,iii,iv,v | |
Upper-alpha | 大写的英文字母 | |
List-style-position | 用来指明列表项中标记的位置 | |
List-style-image | 用来设置图像列表标记 |
3.javascript
直接插入代码 | 在<script></script>标记中编写代码 |
外部引用js文件 | 把代码放到单独的.js文件中,然后通过<script src=‘目标文件的URL’></script>方式来引入js文件 |
3.1JavaScript基本语法
1)忽略空格
2)语句以;结束
3)使用{……}形成一个块block,可以嵌套形成层级
4)注释分为单行注释和多行注释
3.2数据类型和变量
Number类型 | 不区分整数和浮点,统一使用Number表示 |
字符串类型 | 以单引号或双引号括起来的任意文本 |
布尔值类型 | 一个布尔值只有true、false |
数组类型 | 数组是一组按顺序排列的集合,集合的每个值称为元素 |
对象类型 | 是一组由健值组成的无序集合 |
3.3运算符合操作符
类别 | 操作符 | 示例 |
算术操作符 | +、-、*、/、% |
|
字符串操作符 | +(字符串连接)、+=(字符串连接复合) |
|
布尔操作符 | !、&&、|| |
|
一元操作符 | ++、--、+(一元加)、-(一元减) |
|
关系比较操作符 | <、<=、>、>=、!=、==、===、!= |
|
按位操作符 | ~(按位非)、&(按位与)、|(按位或)、^(按位异或)、<<(有符号左移)、>>(有符号左移) |
|
赋值操作符 | =、复合赋值(+=、-=、*=、%=) 复合按位赋值(~=、&=、|=、^=、<<=、>>=、>>>=) |
|
对象操作符 | .(属性访问)、[](属性或数组访问)、NEW(调用构造函数创建对象)、Delete(变量属性删除)、void(返回undefined)、In(判断属性)、instanceof(原型判断) |
|
其他操作符 | ?:(条件操作符)、,(逗号操作符)、()(分组操作)、typeof(类型操作符) |
|
3.4条件判断
If(){……}else{……}
3.5循环
For循环、一种是while循环
3.6函数
关键字function
4.1Xpath节点
七种类型的结点:元素、属性、文本、命名空间、处理指令、注释、文档节点。树的根被称为文档节点或根节点。
节点关系:父(parent)、子(children)、同胞(sibling)、先辈(ancestor)、后代(descendant)
4.2Xpath语法
节点是沿着路径(path)或者(steps)来选取的。
表达式 | 描述 |
Nodename | 选取此节点的所有子节点 |
/ | 从根节点选取 |
// | 选择任意位置的某个节点 |
. | 选取当前节点 |
.. | 选取当前节点的父节点 |
@ | 选取属性 |
节点选取示例
实现效果 | 路径表达式 |
选取classroom元素的所有子节点 | Classroom |
选取根元素classroom | /classroom |
选取属于classroom的子元素的所有student元素 | Classroom/student |
选取所有student子元素,而不管他们在文档中的位置 | //student |
选择属于classroom元素的后代的所有student元素,而不管它们位于classroom之下的什么位置 | Classroom//student |
选取名为lang的所有属性 | //@lang |
通配符“*”与“1”操作符
选取classroom元素的所有子元素 | /classroom/* |
选取文档中的所有元素 | //* |
选取所有带有属性的name元素 | //name[@*] |
选取student元素的所有name和age元素 | //student/name|//student/age |
选取属于classroom元素的student元素的所有name元素,以及文档所有age元素 | /classroom/student/name | //age |
4.3Xpath轴
轴名称 | 含义 |
child | 选取当前节点的所有子节点 |
parent | 选取当前节点的父节点 |
ancestor | 选取当前节点的所有先辈(父、祖父) |
ancestor-or-self | 选取当前节点的所有先辈以及当前节点本身 |
descendant | 选取当前节点的所有后代元素 |
Descendant-or-self | 选取当前节点的所有后代元素及当前节点本身 |
Preceding | 选取文档中当前节点的开始标记之前的所有节点 |
following | 选取文档中当前节点的结束标记之后的所有节点 |
Preceding-sibling | 选取当前节点之前的所有同级节点 |
Following-sibling | 选取当前节点之后的所有同级节点 |
self | 选取当前节点 |
attribute | 选取当前节点的所有属性 |
namespace | 选取当前节点的所有命名空间节点 |
4.4运算符
运算符 | 描述 | 实例 | 含义 |
| | 计算两个节点集 | /student/name|//student/age | 选取所有student元素的所有name和age元素 |
+ | 加法 | /classroom/student[age=19+1] | 选取classroom元素的所有student元素,且其中的age元素的值须等于20 |
- | 减法 | /classroom/student[age=21-1] | 同上 |
* | 乘法 | /classroom/student[age=4*5] | 同上 |
div | 除法 | /classroom/student[age=40 div 2] | 同上 |
= | 等于 | /classroom/student[age=20] | 同上 |
!= | 不等于 | /classroom/student[age!=20] | .. |
< | 小于 | /classroom/student[age<20] | .. |
<= | 小于等于 | /classroom/student[age<=20] | .. |
> | 大于 | /classroom/student[age>20] | .. |
>= | 大于等于 | /classroom/student[age>=20] | .. |
or | 或 | /classroom/student[age<20 or age>25] | .. |
and | 与 | /classroom/student[age>20 or age<25] | .. |
mod | 计算除法的余数 | 5 mode 2 | 1 |
5.1JSON
JSON名称/值对 | 名称/值对 |
JSON值 | 数字、字符串…… |
JSON对象 | .. |
JSON数组 | .. |