- HTML：
- HTML是网页的内容的载体，内容就是网页作者放在页面上想要让用户流浪的信息，可以包含文字、图片、视频等。
- CSS：
- CSS样式是表现，就像网页的外衣，比如，标题字体，颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
- JavaScript
- JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点希望（新闻图片）的轮换。可以这么理解，有动画，有交互的一般都是JavaScript来实现的。
- HTML:<h1></h1>这是标题标签标签，<p></p>这是段落标签,<img src="xxxx.jpg">这个个图片
- html文件的基本结构:
- <html></html>称为根标签，所有的网页标签都在<html></html>中
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
- <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<imp>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
- <head></head>标签认识
- 文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
- 以下标签可以用在<head></head>部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head> - <title></title>：这是标题，主要用于告诉用户这个网页做啥的，搜索引擎可以通过网页标题，迅速的判断出网页的主题。因为每个的网页内容不同，所有标题也就应该不同
- <style></style>:可以设置一些标签的风格
- <body></body>标签，网页上的显示内容放在这里
- <p></p>段落标签，顾名思义，把文字显示称为段落的样式，一个标签内，只能放一段文字。
- <hx></hx>可以用于文章的标题：总共可以有六级分别为1~6。如：<h1>一级标签<h1>
- <strong></strong>、<em><em>:这两个标签都是可以表达强调的作用，strong比em更加强调。strong是粗体，em是斜体
- <span></span>这个标签没啥语义，它的作用就是为了设置单独的样式。文本放入标签之间，然后需要在头文件中<style>标签下，设置具体的样式eg：<style>span{具体样式，如颜色等}</style>
- <q></q>短文本引用标签（用于引用别人的话）。这里不要加双引号，浏览器会对q标签自动添加双引号
- <blockquote></blockquote>长文本引用标签,他会缩进。
- <br>标签:换行，使用，类似于/n直接放置于需换行的字符串的末尾即可.xhtml用<br />
-  :空格，每个空格后面需要跟分号
- <hr >水平横线：同<br>使用方法类似
- <address></address>为网页加入地址信息；
- <code></code>添加代码标签
- <pre></pre>添加大段代码标签
- ul-li标签：信息列表标签：如新闻列表，图片列表。使用方法：
- ol-li标签：有序信息列表标签:使用将会排序。方法和ul-li类似
- <div></div>标签：在网页的制作过程中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
- 独立逻辑部分：他是页面上相互关联的一组元素。如网页中的独立的栏目板块，就是一个典型的逻辑部分。
- 我们可以通过ID这个属性，给div命名 ，使他逻辑更好id是放在<div id="">
- <table></table>标签：里面有四个元素分别是：table、tbody、tr、th、td
- <table></table>整个表格以<table>标记开始，</table>标记结束
- <tbody></tbody>：当表格内容非常多的时，表格会加载一点显示一点，但是如果加上<tbody>标签后，这个表格就要等到表格内容全部下载完才会显示。
- <tr></tr>:表格的一行，所以有几对tr表格就有几行。
- <td></td>:表格的一个单元格，一行中包含几对td就说明一行中有几列。
- <th></th>:表格的头部的一个单元格，表格表头。默认粗体且居中显示
- table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。
- 使用css为表格添加表格线：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style> - <caption></caption>标签:给表格添加标题文本
- <table summary=""><table>，中summary就是摘要，添加代码可读性（语义化），但是在浏览器中不显示出来，可以使得搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容
- <a>标签，链接到另一个页面实现超链接的功能。语法使用如下：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
- 在新建浏览器窗口中打开链接：<a href="目标网址" target="_blank">click here!</a>
- target的其他属性：
- _blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
- _blank -- 在新窗口中打开链接
- 添加邮箱：
- Mailto后为收件人地址，cc后为抄送地址，bcc后为密件抄送地址，subject后为邮件的主题，body后为邮件的内容，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。下面是一个完整的实例:Mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容
- <img>标签，为网页插入图片。使用方法：<img src="图片地址" alt=“下载失败的替换文本” title="提示文本">
- <form></form>表单标签，用于用户交互。用法：<form method="传送方式" action="服务器文件">
- 以<form>开始，</form>结束
- method:get/post
- action：浏览者输入的数据被传送到的地方，比如一个php页面。
- 所有的表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签里面，否则提交不到服务器上面
- 文本输入框标签：
<form>
<input type="text/password" name="名称" value="文本" />
</form>- type:text是文本输入框，password是密码输入框
- name:为这个文本框命名，以备后台程序ASP，PHP使用
- value:为文本框设置默认值（主要用于提示）
- 文本域，支持多文本输入<textarea rows="行数" cols="列数">文本</textarea>,可用css中width代替cols，height代替rows
- 单选框，和复选框让用户选择：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
- type:redio时时单选框，checkbook时是复选框
- value:提交数据到服务器的值
- name：为控件命名
- checked：当设置checked=“checked”时，该选项被默认选中
- 如果是单选，则必须把那么设为一致。
- 提交按钮：将数据提交到服务器：
<input type="submit" value="提交">
- type：只有为sunbmit的时候才具有提交的功能
- value：按钮上显示的文字
- 重置按钮：具有重置的功能：<input type="reset" value="重置">
- type:只有为reset的时候，才具有重置的功能
- value:按钮上显示的文字
- <select></select>下拉选择框，如果再<select>标签中设置multiple="multiple"属性，就可以实现多选功能.
- 语法：
- <select multiple="multiple">
- <option value="看书">看书</option>
- <option value="旅游">旅游</option>
- <option value="运动">运动</option>
- <option value="购物">购物</option>
- </select>
- 语法：
- form表单中的label标签，它不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label标签内点击文本，就会触发此控件，就是说，当用户单击选中改label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和改label标签相关连的表单控件），标签中for属性中的值应该与相关控件的id属性值一定要相同：
<label for="控件id名称">
- 例子：
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
- 例子：
- html文件的基本结构:
- CSS全称为“层叠样式表（Cascading Style Sheets）”,它主要用于定义HTML内容在浏览器内的显示样式，如文字的大小，颜色，字体加粗等。eg：
p{//p是段落
font-size:12px;//字体大小
color:red;//字体颜色
font-weight:bold;//字体加粗
}- css样式由选择符和声明组成，而声明又由属性和值组成，如上面的例子，p是选择符，font-size这些是属性，冒号后面的是值 ，而属性和值就组成了声明。
- 选择符：又称选择器，指明网页中要应用样式规则的元素（在{}之前的部分），如上例中是网页中所有的段落
- 声明：在英文大括号内的就是声明，声明用分号区分
- css注释代码/css代码*/（html是用<!--注释语句-->）
- css样式可以写在什么地方呢，从CSS样式代码插入的形式来看，基本可以分为以下三种：内联式，嵌入式和外部式。
- 内联式CSS样式表就是把CSS代码直接写在现有的HTML标签中：
<p style="color:red">这里文字是红色。</p>
- 嵌入式,写在当前文件中：在<head>标签中有<style>标签，在这里写CSS样式：
<style type="text/css">
span{
color:red;
}
</style> - 外部式（外联式）CSS样式，写在单独的一个文件中，就是把CSS代码写一个单独的外部文件中，以.CSS为拓展名，在<head>（但是不在<staty>）内使用<link>标签将CSS样式链接到HTML文件内：<link href="base.css" rel="stylesheet" type="text/css" />。
- 注意点：
- CSS样式文件名称以有意义的英文字母命名，如main.css。
- rel="stylesheet" type="text/css"是固定写法不可修改
- <link>标签位置一般写在<head>标签之内。
- 注意点：
- 内联式，嵌入式，外部式三种设置CSS方法的优先级：内联式>嵌入式>外部式。
- 需要注意的是嵌入式>外部式有一个前提:嵌入式CSS样式的位置一定在外部式的后面。如果外部式CSS样式的位置在嵌入式的后面，则外部式的优先级就高于嵌入式，也就是，就近原则（在代码中的位子，距离元素的远近。）
- 内联式CSS样式表就是把CSS代码直接写在现有的HTML标签中：
- 选择器，结合之前所说的，选择器就是在{}之前的部分，且指明应用样式对象的元素，选择器分为标签选择器，类选择器
- 标签选择器：即{}前是标签eg如上列子：spam{color:red;}
- 类选择器：这是css样式编码中最常用到的语法：
.类选器名称{css样式代码;}
- 使用第一步:给合适的标签用class=""起一个类名
- 第二步：使用以上语法设置样式，注意，前面是有英文.的
- ID选择器：使用方法和类选择器类似，但是有所不同：
- 第一：为标签设置ID=""而不是class=""
- 第二：设置样式的时候，前面不再是英文的.（小圆点）。而是#
- eg：
- css样式由选择符和声明组成，而声明又由属性和值组成，如上面的例子，p是选择符，font-size这些是属性，冒号后面的是值 ，而属性和值就组成了声明。
#tj{
color: red;
}
-
-
- 类和ID选择器的区别：
- ID选择器只能在文档中使用一次：
- <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="" ="stress">勇气</span>来回答老师提出的问题。</p>这样写，第二个样式失效，但是不在一个标签内则可以
- 可以使用类选择器为一个元素同时设置多个样式：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
- ID选择器只能在文档中使用一次：
- 子选择器：用>表示，用于选择指定标签元素的第一代子元素eg：
.food >li{border:1px solid red;}/*表明样式作用于.food类名下的第一代子元素（第一层也可以这么理解）*/
- 包含(后代)选择器：用空格代替子选择器中的>即可：
.first span{color:red;}/*这个样式是作用在类名为first下的所有后代元素，不单单是第一代元素了*/
- 通用选择器：他使用*来指定，它的作用是匹配xml中所有表现元素。
- 伪类选择器：它允许个html不存在的标签（标签的某种状态）设置样式eg：
a:hover{color:red;}/*鼠标滑过设置字体颜色*/
- 分组选择符：如果想给多个标签元素设置同一个样式的时候，可以用分组选择符（也就是分号区分）,。不单单只是同一个标签eg：
.first,#second span{color:green;}
- 类和ID选择器的区别：
- 继承性：CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定的html标签元素，而且应用于后代。比如之前子选择器，用color:red属性的时候，就具有继承性，虽然子选择器是针对第一个代元素的，但实际效果却是全部的字变成了红色。但是，borde:1px solid red则不具有继承属性，所以，子选择器那，只有第一代元素有框，而非全部后代都有。
- 特殊性：当我们为同一个元素设置不同的CSS样式的代码的时候，会根据权值的大小选择选择效果，标签 1，类选择器 10 ，ID选择器最高为100 ,前面说到的继承也有权值但是是最小的，只有0.1eg:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/- 注意点，第一继承的权值为0.1最小，然后就是，内联式CSS样式表的比ID的权值要高。
- 层叠性：在html中对于同一个元素有多个具有相同权重值的CSS样表，这个时候就是之前有说到过的就近原则了。
- 重要性：把某些样式的权值设置为最高值，用!important来实现
- 文字排版--字体：
body{font-family:"宋体";}
- 文字排版--斜体：
p a{font-style:italic;}
- 文字排版--下划线：
p a{text-decoration:underline;}
- 文字排版--删除线：
.oldPrice{text-decoration:line-through;}
- 段落排版--缩进：
p{text-indent:2em;}/*缩进两个文字， 2em的意思就是文字的2倍大小 */
- 段落排版--行间距：
p{line-height:1.5em;}
- 段落排版--中文字间距、字母间距：
h1{
letter-spacing:50px;sss
}/*中文间距*/h1{
word-spacing:50px;
}/*字母间距*/ - 段落排版--对齐（可以为块状元素中的文本，图片设置居中等样式）：
h1{
text-align:center;/*center是居中，left是居左，right是居右*/
} - 元素分类：
- 块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
- 内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
- 内联块状元素：<img>、<input>
- 块状元素：常用的块级元素就如上面所写，或者使用以下代码将内联元素a转换为块级元素，从而使a元素具有块级元素特点：
a{display:block;}
- 特点：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
- 元素的高度，宽度，行高以及顶和底边距都可以设置。
- 元素宽度在不设置的情况下，和父元素的宽度一致，除非设定一个宽度。
- 特点：
- 内联元素：也称为行内元素块级元素可以通过以下代码设置为内联元素，从而具有内联元素的特点：
div{
display:inline;
}- 特点：
- 和其他元素都在一行上（块级元素是一个元素独占一行）
- 元素的高度，宽度以及顶部和底部边距不可设置（块级元素是可以的设置这些的）
- 元素的宽度就是他包含文字或图片的宽度，不可以改变
- 特点：
- 内联块状元素：就是同时具备内联元素，块级元素的特点，可以通过以下代码设置为内联块状元素：display:inline-block
- 盒子模型：规定了元素框处理元素内容，内边距，边框和外边距
- 内边距，边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值。
- 盒子模型可以理解为Android里面xml的控件。
- 边框：
- border-style(边框样式)：dashed(虚线)，dotted（点线），solid（实线）
- border-color（边框颜色）：可以用#xxx（16进制颜色代码，或者red这样的英文也可以）
- border-width（边框宽度）：一般是用像素，当然也可以用thin|medium|thick
- 用border-top:1px solid red这样的方式单独设置上边框（border :1px solid red 一期设置）
- 宽度和高度
- 宽度=边界+边框+填充+内容
-
div{
width:200px;/ 这里的宽度是内容的宽度/
padding:20px;
border:1px solid red;/边框线/
margin:10px;
}/所以宽度为（10+1+20）*2+200=260*/ - 填充：padding，用法和之前类似，但是他是有顺序的，上，右，下，左（顺时针的顺序）。eg：如果上下填充一样都是10px，左右填充一样都是20px那么可以写成
div{padding:10px 20px;}
- 边界（外边距）：用法和padding类似
- CSS布局模型
- 流动模型
- 流动模型(Flow)是默认网页布局模式，也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。特征如下：
- 块级元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，在默认状态下，块级元素的宽度都为100%.实际上，块级元素都会以行的形式占据位置。
- 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（不像块级元素那样独占一行）
- 流动模型(Flow)是默认网页布局模式，也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。特征如下：
- 浮动模型
- 块级元素默认独占一行，如有需求就是一行两个块级元素的话，那么我们就可以使用浮动模型
- 左对齐
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div> - 右对齐就是把left换成right
- 一左一右：
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{ float:left;}
#div2{ float:right;}
- 左对齐
- 块级元素默认独占一行，如有需求就是一行两个块级元素的话，那么我们就可以使用浮动模型
- 层模型
- 层布局模型就像图像软件Photoshop中的图层边际功能一样三种形式如下：
- 绝对定位（position：absolute）
- 绝对定位就是将元素从文档流中拖出来，先设置position：absolute然后使用left，right，top，botton属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在包含块，则相对于body也就是我们的浏览器窗口。一下显示了一个向右移动100px，向下移动50px：
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;/*相对于左边100px，可以理解为距离左边100px，下同*/
top:50px;
}
<div id="div1"></div>
- 绝对定位就是将元素从文档流中拖出来，先设置position：absolute然后使用left，right，top，botton属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在包含块，则相对于body也就是我们的浏览器窗口。一下显示了一个向右移动100px，向下移动50px：
- 相对定位（position：relative）
- 需要设置position：relative，然后通过left，right，top，bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left，right，top，bottom属性确定，偏移前的位置保留不动。相对于以前位置向下移动了50px，向右移动100pxeg
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>/*是相对之前的位置，但是如果，块级元素里面是含有内联元素的时候，块级元素会移动，但是内联元素不会移动,因为 偏移前的位置是保留不动的*/
- 需要设置position：relative，然后通过left，right，top，bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left，right，top，bottom属性确定，偏移前的位置保留不动。相对于以前位置向下移动了50px，向右移动100pxeg
- 固定定位（position：fixed）
- 与absolute（绝对定位）定位雷士，但是它的相对移动坐标是视图（屏幕内的网页窗口）固定定位的元素会始终位于浏览器窗口内视图的某个位置。不会受到文档流的影响。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}/*上下滚动也无法覆盖，类似小广告（）*/
- 与absolute（绝对定位）定位雷士，但是它的相对移动坐标是视图（屏幕内的网页窗口）固定定位的元素会始终位于浏览器窗口内视图的某个位置。不会受到文档流的影响。
- 绝对定位（position：absolute）
- 组合使用
- Relative与Absolute组合使用
- 参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>/*box1是参照定位元素*/ - 参照定位元素必须加入relative
#box1{
width:200px;
height:200px;
position:relative;
} - 定位元素加入absolute就可以使用top这些来进行偏移定位了。
- 参照定位的元素必须是相对定位元素的前辈元素：
- Relative与Absolute组合使用
- 层布局模型就像图像软件Photoshop中的图层边际功能一样三种形式如下：
- 流动模型
- 缩写
- 盒模型的缩写：
- 填充：padding，用法和之前类似，但是他是有顺序的，上，右，下，左（顺时针的顺序）。eg：如果上下填充一样都是10px，左右填充一样都是20px那么可以写成
div{padding:10px 20px;}
- 填充：padding，用法和之前类似，但是他是有顺序的，上，右，下，左（顺时针的顺序）。eg：如果上下填充一样都是10px，左右填充一样都是20px那么可以写成
- 颜色的缩写
- 当设置的颜色是16进制的色彩值时如果每两位的值相同，可以缩写一半。eg：
- p{color:#000000}=p{color:#000}
- p{color:#112233}=p{color:123}
- 当设置的颜色是16进制的色彩值时如果每两位的值相同，可以缩写一半。eg：
- 字体的缩写
-
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
} - 可以缩写为
body{
font:italic small-caps bold 12px/1.5em/*size和height中间要加入/*/ "宋体",sans-serif;
} - 使用简写，至少需要指定font-size和font-family，其余属性，未指定，那么就将自动使用默认值
-
- 盒模型的缩写：
- 颜色值
- 英文命令颜色
- p{color:red;}
- RGB颜色
- p{color:rgb(133,45,200)}
- p{color:rgb(20%,33%,25%)}
- 十六进制颜色
- p{color:#00ffff}
- 英文命令颜色
- 长度值
- 像素
- CSS规范中假设90px=1英寸但是，实际上，浏览器会使用显示器的时间像素
- em
- 就是font-size值，如果，font-size为14px，那么1em=14px。而如果font-size为12px，那么1em=12px。
- 特例 size的单位为em的时候：
- HTML
<p>以这个<span>例子</span>为例。</p>
- CSS
p{font-size:14px}
span{font-size:0.8em;} - 那么span中字体的大小就为11.2(12*0.8=11.2)
- HTML
- 百分比
p{font-size:12px;line-height:130%}/* 12px*1.3=16.6px*/
- 像素
-
- CSS样式设置小技巧
- 水平居中设置-行内元素：我们可以通过text-align:center来实现
- html
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body> - CSS
<style>
.txtCenter{
text-align:center;
}
</style>
- html
- 水平居中设置-定宽块级元素(块级元素的宽度width为固定值)：我们就可以通过设置margin-left:20px auto;来实现eg:
- html
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body> - CSS
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px; /*定宽*/
margin:20px auto; /* margin-left 与 margin-right 设置为 auto，这是缩写 */
}
- html
- 水平居中-不定宽块级元素方法
- 不定宽度的块级元素有三种方法居中
- 加入table标签
- table标签可以长度自适应，也就是说，table的长度就是根据，其内文本长度决定，因此加入table之后，这元素就可是看做是一个定宽的块级元素了然后和之前的定宽跨级元素设置居中的方法一样。eg
- html
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div> - CSS
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
- html
- table标签可以长度自适应，也就是说，table的长度就是根据，其内文本长度决定，因此加入table之后，这元素就可是看做是一个定宽的块级元素了然后和之前的定宽跨级元素设置居中的方法一样。eg
- 设置display:inline方法：显示类型设为行内元素，进行不定宽元素的属性设置
- 设置display:inline（设置为行内元素）,然后用text-align:center来实现居中效果
- html
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> - CSS
<style>
.container{
text-align:center;
}
/* m argin:0;padding:0 （消除文本与 div 边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* m argin-right:8px （设置 li 文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
- html
- 设置display:inline（设置为行内元素）,然后用text-align:center来实现居中效果
- 设置position:relativa，left:50%：利用相对定位，接着使元素，左移50%，完成居中
- 通过给父元素设置float，然后给父元素设置position:relative和left:50%
- html
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> - CSS
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
- html
- 通过给父元素设置float，然后给父元素设置position:relative和left:50%
- 加入table标签
- 不定宽度的块级元素有三种方法居中
- 垂直居中-父元素高度确定的单行文本
- 通过设置父元素的height和line-height高度一致来实现的。(height:改元素的高度，line-height:行高)。eg：
- html
<div class="container">
hi,java!
</div> - CSS
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
- html
- 通过设置父元素的height和line-height高度一致来实现的。(height:改元素的高度，line-height:行高)。eg：
- 垂直居中-父元素高度确定的多行文本
- 父元素高度确定的多行文本，图片等的竖直居中有两种方法：
- 方法一:使用table（包括tbody,tr,rd）标签，同时设置vertical-align:middle，在父元素设置该样式的时候，会对inline-block类型的子元素都有用。eg
- html
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body> - CSS
table td{height:500px;background:#ccc}/*td标签默认情况下设置了 vertical-align:middle */
- html
- 方法二：改方法兼容性比较差，不推荐使用。在chrome、firefox以及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表单单元显示），激活vertical-align属性，但是IE6，IE7不支持这个方法
- html
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div> - CSS
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style> - 优点是不用添加多余的无意义的标签，缺点就是兼容性太差，而且，display的block变成了table-cell，破坏了原有的块级元素的性质。
- html
- 方法一:使用table（包括tbody,tr,rd）标签，同时设置vertical-align:middle，在父元素设置该样式的时候，会对inline-block类型的子元素都有用。eg
- 父元素高度确定的多行文本，图片等的竖直居中有两种方法：
- 隐性改变display类型
- 当元素（不管之前是什么类型的元素，display:none除外）设置以下2个句子之一：
- position:absolute
- float:left（right）
- 只要html中出现以上两个句子之一的时候，元素的display显示类型就会自动变成display:inline-block（块级元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。eg：
- html
<div class="container">
<a href="#" title="">a标签时行内元素不能设置宽度，但是在CSS中设置absolute之后就可以设置宽度了</a>
</div> - CSS
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
- html
- 当元素（不管之前是什么类型的元素，display:none除外）设置以下2个句子之一：
- 水平居中设置-行内元素：我们可以通过text-align:center来实现
- JavaScript：所有主流浏览器都支持JavaScript，全世界大部分网页都使用JavaScript，他可以让网页呈现各种动态效果。
- 入门篇
- 如何插入JS：我们使用<script></script>JavaScript代码放在标签之间。eg:
- <script type="text/javascript">/* type="text/javascript 表示<scipt>之间的是文本类型，然后用使用的JavaScript语言*/
- 引用JS外部文件
- 我们可以通过<script>标签在html中写JavaScript代码，但是我们也可以像CSS中外部式一样，单独新建一个JavaScript文件，其后缀通常为.js。我们在js文件中不需要写<script>标签，直接编写JavaScript代码就可以了，然后使用<script src="script.js"></script>嵌入到HTML中即可。eg：
- js
- document.write("引用JS文件!");
- html
- <script src="script.js"></script>
- js
- 我们可以通过<script>标签在html中写JavaScript代码，但是我们也可以像CSS中外部式一样，单独新建一个JavaScript文件，其后缀通常为.js。我们在js文件中不需要写<script>标签，直接编写JavaScript代码就可以了，然后使用<script src="script.js"></script>嵌入到HTML中即可。eg：
- JS在页面中的位置
- 我们可以将JavaScript代码放在HTML中的任何一个位置，但是我们一般放在网页的head和body部分。
- 放在<head>部分
- 最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分
- 放在<body>部分
- JavaScript代码在网页中读取到该语句的时候，就会执行
- 注意：JavaScript作为一种脚本语言，可以放在HTML中的任何位置，但是浏览器在解释HTMl是按先后顺序的，所以在前面的Script就会被先执行。比如页面显示初始化的js必须放在head里面，因为初始化都要求提前进行(如给页面body设置CSS等)；而如果是通过事件调用执行的function那么对位置没什么要求
- 放在<head>部分
- 我们可以将JavaScript代码放在HTML中的任何一个位置，但是我们一般放在网页的head和body部分。
- JS的代码格式：js语句;eg：
-
<script type="text/javascript">
alert("hello!");/*alert("hello")是一个js语句，而分号用作与表示语句的结束。代码都应该在应为状态下*/
</script>
-
- JS的注释：前面说到HTML的时候，说他们的注释是/**/，在JavaScript中，有两种注释
- //单行注释
- /**/多行注释
- 变量：变量就是用于存储某种数值的存储器，
- 定义变量
-
var 变量名
-
- 按理说，变量名是可以取任意的，但是为了代码的可阅读性，应该遵循以下规则
- 变量必须使用字母、下划线_或者是美元符号$开始
- 然后可以使用任意多个英文字母，数字，下划线，或者美元符号
- 不能使用JavaScript关键字与保留字
- 变量需要先声明 ，再使用，虽然在JavaScript中可以先使用再声明，但是，这样做不规范
- 定义变量
- 判断语句if…else
- 同java一样
- 函数：可以理解为java中的方法。语法如下：
function 函数名()
{
函数代码;
}- function是定义函数的关键字
- 函数名是为这个函数取的名字
- 函数代码就是实现的逻辑代码
- 函数的调用如下： <input type="button" value="点击我" οnclick=" dy " />（在head中有名为dy的js函数）。
- 输出内容:document.write()
- 我们可以通过上面的代码实现输出内容，这个输出，和java中的print用法类似，但是，但是write可以输出html的标签，docunment.weite("hello"+"<br>")/*输出hello后，输出一个换行符*/
- 输出空格:html标签 实现。eg：document.write(" "+"1"+" "+"23");
- 使用CSS样式输出空格eg： document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
- 警告：在访网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击确定就无法对网页做任何操作，这个小窗口就是使用alert是实现的，也就是警告。eg：
alert(字符串或变量);
- 对话框，confirm（包含一个确定，和一个取消按钮）eg:
confirm(str);//str：在消息框中要显示的文本，返回值是布尔类型的。
- 在使用上和警告有所区别，eg
- <script type="text/javascript">
- function rec(){
- var mymessage=confirm ("你是妹子吗?") ;
- if(mymessage==true)
- {
- document.write("你是女士!");
- }
- else
- {
- document.write("你是男士!");
- }
- }
- </script>
- 在使用上和警告有所区别，eg
- 提问（prompt）：弹出消息对话框，通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮，取消按钮与一个文本输入框)：
prompt(str1, str2);
- str1：要显示在消息对话框中的文本，不可修改
- str2：文本框中的内容，可以修改（用户输入的内容）
- 返回值：点击确定按钮，文本框中的内容将作为函数返回值，点击取消按钮，将会返回null
- 打开新窗口（window.open）open()方法可以查找一个已经存在或者新建的浏览器窗口。
window.open([URL], [窗口名称], [参数字符串])
- URL：可选择参数，在窗口中要显示的网址或路径，如果省略这个参数，或者设置它的值是空字符串，那么窗口就不显示任何文档。
- 窗口名称：可选参数，被打开窗口的名称。该名称由字母，数字和下划线组成，"_top","_blank","_self"具有特殊意义的名称，_top：框架网页中在上部窗口中显示目标网页，_self：在当前窗口中显示目标网页，_blakk:在新窗口显示目标网页。相同name的窗口只能创建一个，要创建多个窗口，则name不能相同。
- 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
- 如何插入JS：我们使用<script></script>JavaScript代码放在标签之间。eg:
- 入门篇
-
-
-
-
- 关闭窗口，window.close();或者是<窗口对象>.close();（窗口对象;var mywin=window.open()）.
- DOM: 文档对象模型定义 访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素，属性和文本的树结构。
- 通过ID获取元素：document.getElementById(“id”)
- innerHTML属性：用于获取或替换HTML元素的内容：Object.innerHTML（Object是获取或替换HTML元素的内容）。eg.：
- <script type="text/javascript">
- var mychar= document.getElementById("con") ;
- document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
- mychar.innerHTML="Hello world";
- document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
- </script>
- 改变HTML样式
Object.style.property=new style;
-
-
-
-
-
-
-
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar. style.color="red";
mychar. style.fontSize="20";
mychar. style.backgroundColor ="blue";
</script>
- 显示和隐藏(display)
Object.style. display = value//value=none 此元素不会被显示（隐藏） value=block 显示
- <script type="text/javascript">
- function hidetext()
- {
- var mychar = document.getElementById("con");
- mychar.style.display="none";
- }
- function showtext()
- {
- var mychar = document.getElementById("con");
- mychar.style.display="block";
- }
- </script>
- 控制类名：
object.className = classname//获取元素的calss属性，为网页内的某个元素指定一个css样式来更改该元素的外观
- <script type="text/javascript">
- function add(){
- var p1 = document.getElementById("p1");
- p1.className = "one";
- }
- function modify(){
- var p2 = document.getElementById("p2");
- p2.className = "two";
- }
- </script>
-
-
-
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
