前端培训资料
软件测试学习交流群：925205234HTML (Hyper Text Markup Language)HTML版本版本年份HTML1991HTML+1993HTML 2.01995HTML 3.21997HTML 4.011999XHTML 1.02000HTML52012XHTML52013HTML和XHTMLHTML<!DOCTYPE> 常见声明HTML5: <!DOCTYPE html>HTML 4.01: <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd">XHTML 1.0: <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML文档结构<!DOCTYPE html><html><head><!- <title>标题 -><!- <meta>描述、关键词、文档的作者、html文档编码 -><!- <link>样式引入、<style>内部样式、<script>脚本引入 -></head><body><!- 文档的内容 -></body></html>HTML标签HTML常用标签: <div>、<p>、<h1>.<h6>、<ol>、<ul>、<dl>、<table>、<form>、<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<cite>、<img>、<input>HTML所有标签: HTML 元素语法· HTML 元素以开始标签起始· HTML 元素以结束标签终止· 元素的内容是开始标签与结束标签之间的内容· 某些 HTML 元素具有空内容（empty content）· 空元素在开始标签中进行关闭（以开始标签的结束而结束）· 大多数 HTML 元素可拥有属性开始标签元素内容结束标签<p>This is a paragraph</p><a href="default.htm" >This is a link</a><br />HTML标签属性大全: HTML标签分类块级元素: 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。<div>、<p>、<h1>.<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>行内元素:1、和其他元素都在一行上；2、元素的高度、宽度、行高及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变；<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>内联块状元素: 1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置<img>、<input>HTML5/HTML 4.01/XHTML 元素和有效的 DTD各html标签在不用类型的HTML文档中使用情况: CSS层叠样式表CSS 语法selector property: valueselector 选择器 property 属性 value 属性值h1 color:red; font-size:14px;CSS常见选择器选择器例子例子描述.class.intro选择 class="intro" 的所有元素。#id#firstname选择 id="firstname" 的所有元素。*选择所有元素。elementp选择所有 <p> 元素。element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。element elementdiv p选择 <div> 元素内部的所有 <p> 元素。element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。element+elementdiv+p选择紧接在 <div> 元素之后的所有 <p> 元素。attributetarget选择带有 target 属性所有元素。attribute=valuetarget=_blank选择 target="_blank" 的所有元素。:linka:link选择所有未被访问的链接。:visiteda:visited选择所有已被访问的链接。:activea:active选择活动链接。:hovera:hover选择鼠标指针位于其上的链接。:focusinput:focus选择获得焦点的 input 元素。所有CSS选择器: 所有CSS属性:HTML引入样式方式1. 外部样式表<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>2. 内部样式表（位于 <head> 标签内部）<head><style type="text/css"> hr color: sienna !important; p margin-left: 20px; body background-image: url("images/back40.gif");</style></head>3. 内联样式（在 HTML 元素内部）<p style="color: sienna; margin-left: 20px; margin-left: 10px; ">This is a paragraph</p>!important > 内联 > 内部 > 外联CSS 框模型(盒子模型)CSS 外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者CSS定位(position 属性)position 属性值的含义：static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块使用absolute绝对定位时注意，用top，right，bottom，left属性调整位置，需要根据哪个父级元素来定位，默认是body标签，如需根据其他父级元素定位，则把该父级元素的position属性设置为relativeCSS 浮动float 属性 (float: left | right | none | inherit)当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”清除浮动因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间.clear clear: both; 其他清除浮动方式display: table;width: 100%或者overflow: hiddenJavaScriptHTML DOM 树HTML DOM访问· 通过使用 getElementById() 方法· 通过使用 getElementsByTagName() 方法· 通过使用 getElementsByClassName() 方法HTML DOM - 修改 HTML 内容<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="New text!"</script></body></html>HTML DOM Element 对象操作: JsonJSON：JavaScript 对象表示法（JavaScript Object Notation）。JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。var json = "employees": "firstName":"Bill" , "lastName":"Gates" , "firstName":"George" , "lastName":"Bush" , "firstName":"Thomas" , "lastName":"Carter" ,person: "names":"Bill", "age":"14"获取json数据的格式:json.person/"names":"Bill", "age":"14"json'person'/"names":"Bill", "age":"14"json'person''na
