1.html和css的关系
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
2.html标签
<h1><
<p> </p>是段落标签
网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成<img src="1.jpg">
标签的语法
1. 标签由英文尖括号"<",">"括起来，如就是一个标签。
2.html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
3.标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：div里嵌套p，那么/p必须放在/div的前面。
4.HTML标签不区分大小写，h1和H1是一样的，但建议小写，因为大部分程序员都以小写为准。
3.html的基本结构
html文件的结构：一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
1. html称为根标签，所有的网页标签都在html中。
2. head标签用于定义文档的头部，它是所有头部元素的容器。头部元素有title、script、 style、link、meta等标签，头部标签在下一小节中会有详细介绍。
3.在bod>和/body标签之间的内容是网页的主要内容，h1、p、a、img等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
4.标签
<title> 浏览器的标题栏
代码注释<!--注释文字 -->
标签的用途：语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
在后面的章节会带领大家学习了解html中每个标签的语义（用途）。
em和strong
语法：
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
span
span标签是没有语义的，它的作用就是为了设置单独的样式用的。
<span>文本</span>
<style>
span {
color: bule;
}
</style>
q
网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么q标签是你所需要的。
语法：
<q>引用文本</q>
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
注意这里用q标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
blockquote
引用别人的文本。但它是对
br标签分行显示文本
在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入</br>
空格
<hr/>标签，添加水平横线
<hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
address
定义地址，电子邮件地址、签名或者文档的作者身份
比如<address>北京西城</address>
code和pre
当代码为一行代码时，你就可以使用code标签了，如下面例子：<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代码时不能使用code标签了。
语法：<code>代码语言</code>
注：如果是多行代码，可以使用pre标签。
代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入br签，空格需要输入
注意：pre标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是pre标签的一个常见应用就是用来展示计算机的源代码。
ul,ol和li
网页上有很多信息的列表，如新闻列表、图片列表可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
语法：
<ul>
</ul>
使用ol标签来制作有序列表来展示。ol在网页中显示的默认样式一般为：每项li前都自带一个序号，序号默认从1开始，列表前是有顺序的数字。
div
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个
标签中，这个
from
标签的作用就相当于一个容器。
<div>
用id属性来为
提供唯一的名称
table
创建表格的四个元素：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以table标记开始、/table标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上tbody标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对td.../td，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。表头，文本默认为粗体并且居中显示
6、表格中列的个数，取决于一行中数据单元格的个数。
用css样式，为表格加入边框
Table表格在没有添加css样式之前，是没有边框的,为它添加边框。
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>为th，td单元格添加粗细为一个象素的黑色边框。
<caption>标签，为表格添加标题和摘要
table summary="表格简介文本"
a
可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。例如：
<a
设置（a{color:#000})可改变点击效果
target="_blank"
mailto
使用mailto能让访问者便捷向网站管理者发送电子邮件
如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
img
<img src = "myimage.gif" alt = "My Image" title = "My Image"/>
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
from
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
form标签是成对存在，action是浏览者输入诗句被传送到的地方，如java中Servlet的方法。method是传送方式
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上哦！）。
语法：
<form method="传送方式" action="服务器文件">
form标签是成对存在，action是浏览者输入诗句被传送到的地方，如java中Servlet的方法。method是传送方式
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上哦！）。
文本输入框
<fron>
<input type="text/password" name="名称" value="文本"/>
</from>
<input type="text/password" name="名称" value="文本"/>
</from>
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)
value：为文本输入框设置默认值。(一般起到提示作用)
文本域
<textarea rows="行数" cols="列数">文本默认值</textarea>
单选，复选框
<from>
<input type="radio(单选)/checkbox(复选)" name="名称" value="值"checked="checked"/>
</from>
<input type="radio(单选)/checkbox(复选)" name="名称" value="值"checked="checked"/>
</from>
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
<label>性别:</label>
<label>男</label>
<
<input type="radio" value="2"
<input type="radio" value="2"
设置男女的单选框，同一个单选框或者复选框的name要一样
下拉列表框
<select>
<option value="向服务器提交值"
……
</select>
在select中添加multiple="multiple" 就可以实现多选功能，在 widows操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
提交按钮：<input type="submit" value="提交">
只有当type值设置为submit时，按钮才有提交作用
value是按钮显示的文字
当type的值设置为reset时，按钮才有重置功能
form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<lable for=“控件ID名称”>
<form>
</form>
</form>
5.CSS
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
为了使用样式更加容易阅读，可以将每条代码写在一个新行内
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
为了使用样式更加容易阅读，可以将每条代码写在一个新行内
css的注释
内联式<p style="color:red">这里的文字是红色</p>
嵌入式
style type="text/css"
span{
color:red;
}
/style
span{
color:red;
}
/style
外部式<link href="base.css(css文件名)" rel="stylesheet"type="text/css" />一般写在head之间
优先级：内联式>嵌入式>外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如<link href="style.css">代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
标签选择器p{
类选择器
ID选择器
ID和class
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID 词列表）。
<span class="stress bigsize(2个类名)"></span>而id 只能是一个id名
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID 词列表）。
<span class="stress bigsize(2个类名)"></span>而id 只能是一个id名
子选择器：还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solidred;}这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
.food>li{border:1px solidred;}这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。>作用于元素的第一代后代，空格作用于元素的所有后代。
例如.first>span将body定义为first，然后在p中包含一个span这时span就不会相应.first>span，如果是.firstspan就会相应
例如.first>span将body定义为first，然后在p中包含一个span这时span就不会相应.first>span，如果是.firstspan就会相应
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
* {color:red;}
伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
分组选择器
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
权值：权值越大越容易显示
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;}
p span{color:green;}
.warning{color:white;}
p span.warning{color:purple;}
#footer .note p{color:yellow;}
p{color:red;}
p span{color:green;}
.warning{color:white;}
p span.warning{color:purple;}
#footer .note p{color:yellow;}
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠
就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
important
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 <用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
7048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
