文章目录
一、HTML标记语言
1.文档结构
1.<html>标记
是HTML文件的开头，无实质性功能，但必不可少。不分大小写
2.<head>标记
HTML文件的头标记，作用是放置HTML的文件信息，如定义CSS样式的代码
3.<title>标记
是标题标记
4.<body>标记
是HTML页面的主体标记，页面中所有的内容都定义在body标记中。其本身也有控制页面的一些特性，如页面的背景图片与颜色
2.常用标记
1.换行标记<br>
不成对出现
2.段落标记<p>
段落标记以<p>开头，</p>结束。段落标记在短浅和断后各添加一个空行，而定义在段落标记中的内容不受该标记的影响
3.标题标记
<h1>~<h6>，一级到六级标题
4.居中标记<center>
5.文字列表标记
无序列表<u;>
有序列表<li>
3.表格标记
1.表格标记<table>
例如width属性用来设置表格的宽度，border属性是用来设置表格的边框，align属性用来设置表格的对齐方式，bgcolor设置表格的背景色
2.标题标记<caption>
3.表头标记<th>
也可通过align、background、colspan、valign等属性设置表头
4.表格行标记<tr>
一组<tr>标记表示表格中的一行，需要嵌套在<table>标记中使用，该标记也具有align、background等属性
5.单元格标记<td>
又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记，该标记也具有align、background、valign等属性
4.HTML表单标记
1.<form>…</form>表单标记
在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下：
<form action = "url" method ="get'|"post"name = 'name' onSubmit = ""target ="">
</form>
action属性：
该属性用来指定那个处理表单数据程序的URL地址
method属性：
该属性用来指定数据传送到服务器的方式：get与post。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post传输方式传送到服务器
name属性：
该属性指定表单的名称
onSubmit属性：
用于指定当用户单击提交按钮时触发的事件
target属性：
指定输入数据结果显示在哪个窗口中。_blank表示在新窗口中打开目标文件；_self表示在同一个窗口中打卡，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用； _top表示在浏览器的整个窗口中打开，忽略任何框架
2.<input>表单输入标记
它通过这个标记可以向页面中添加单行文本、多行文本、按钮等
<input type="image" disabled="disabled" checked="checked" width="digit" maxlength="digit" readonly=""size"digit" scr="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
<input>标记的属性如表所示
type属性<input>标记中非常重要的内容，决定了输入数据的类型。
3.<select>…</select>下拉列表框标记
<select>标记可以在页面中创建下拉列表框，此时的下拉列表框是一个空的列表，要使用<option>标记向列表中添加内容。
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
4.多行文本标记
<textarea cols="digit" rows="digit" name" disabled ="disabled" readonly="readonly" wrap="value">默认值
</textarea>
6.超链接与图片标记
1.超链接标
<a href =""></a>
2.图片标记<img>
<img src ="url" width="value" height="value" border="value" alt="提示文字">
src:用于指定图片的来源
width:图片的宽度
height:高度
border:用于指定图片外边框的宽度，默认值为0
alt:用于指定当图片无法显示时显示的文字
二、HTML5新增内容
1.新增的元素
1.<section>元素
表示页面中的一个区域，例如章节、页眉、也叫或页面中的其他部分。可以与和h1、h2、h3、h4等元素结合起来使用，标示文档结构
2.<article>元素
表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章、一段用户评论等。一个<article>通常有自己的标题、注脚等内容
3.<header>元素
页面中一个内容区域或整个页面的标题
4.<footer>元素
内容区域块的注脚
5.<aside>元素
表示当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等
2.新增的input元素类型
1.email
将input元素的类型设置为email，表示文本框必须输入Email地址
2.url
必须输入url地址
3.number
输入数值的文本框
4.range
必须输入一定范围内数字值的文本框
三、CSS样式表
1.CSS规则
选择符{属性：属性值；}
选择符:又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
属性:主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS属性的使用变得更加复杂。
属性值:为某属性的有效值。属性与属性值之间以“:”号分隔。当有多个属性时，使用“;”分隔。
2.CSS选择器
1.标记选择器
声明页面中哪些标记采用哪些CSS样式。例如a选择器，就是用于声明页面中所有<a>标记的样式风格
<style>
a{
font-size:9px;
color:#F93;
}
</style>
2.类别选择器
类别选择器的名称由用户自己定义，并以“."号开头。要应用类别选择器的HTML标记，只须使用class属性来声明即可。
//以下为定义的CSS样式
<style>
.one{
font-family:宋体;
font-size:24px;
color:red;
}
.two{
font-family:黑体;
font-size:16px;
color:red;
}
.three{
font-family:宋体;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h2 class="one"> 应用了选择器one</h2> //定义样式后页面会自动加载样式
<p> 正文内容1</p>
3.id选择器
通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同。但需要注意的是，由于html页面中不难包含两个相同的id标记，因此定义的id选择器也就只能被使用一次
命名id号要用#开始，后面加html标记中的id属性
<style>
#first{
font-size:18px
}
#second{
font-size:36px
}
#three{
font-size:36px
}
</style>
<body>
<p id="first">ID选择器1</p>
<p id="second">ID选择器2</p>
<p id="three">ID选择器3</p>
</body>
3.在页面中包含CSS
1.行内样式
是比较直接的一种样式，直接定义在HTML标记之内，通过style属性来实现，但灵活性不强。
<table width="200" border="1" align="center"> <!--在页面中定义表格-->
<tr>
<td><p style="color:#F00; font-size:36px;">行内样式一</p></td><!--在页面文字中定义CSS样式-->
</tr>
<tr>
<td><p style="color:#F00; font-size:24px;">行内样式二</p></td>
</tr>
<tr>
<td><p style="color:#F00; font-size:18px;">行内样式三</p></td>
</tr>
<tr>
<td><p style="color:#F00; font-size:14px;">行内样式四</p></td>
</tr>
</table>
2.内嵌式
就是在页面中使用标记将CSS样式包含在页面中
如上面类别选择器中的代码
内嵌式样式表的形式没有行内标记表现的直接，但是能够使页面更加规整。
与行内样式相比，内嵌式样式表更加便于维护。但是每个网站都不可能由一个页面构成，而每个页面中相同的HTML标记有要求相同的样式，此时使用内嵌式样式表则显得笨重。
3.链接式
链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过标记引用，是一种最为有效的使用CSS样式的方式
<link>标记的语法结构如下：
<link rel='stylesheet' href='path' type='text/css'>
参数说明：
rel：定义外部文档和调用文档间的关系
href：CSS文档的绝对或相对路径
type：指的是外部文件的MIME类型
ex：创建名称为css.css的样式表，在该样式表中定义页面<h1>``<h2>``<p>标记的样式
h1,h2,h3{ /*定义CSS样式 */
color:#6CFw;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p{
color:#F0Cs; /*定义颜色*/
font-weight:200;
font-size:24px; /*设置字体大小*/
}
在页面中通过<link>标记将CSS样式表引入页面中
<title>通过链接形式引入CSS样式</title>
<link href="css.css"/> <!--页面引入CSS样式表-->
</head>
<body>
<h2>页面文字一</h2> <!--在页面中添加文字-->
<p>页面文字二</p>
</body>
4.CSS3的新特征
1.模块与模块化结构
在CSS3中，并没有采用总体结构，而是采用了分工协作的模块化结构。采用这种模块化结构。采用这种模块化结构，是为了避免产生浏览器对于某个模块支持不完全的情况。如果把整体分成几个模块，各浏览器选择支持哪个模块，不支持哪个模块。
2.一个简单的CSS3实例
ex：在CSS2中使用DIV层对页面中的文字添加彩色边框
<title>使用CSS2对页面中的文字添加彩色边框</title>
<style>
#boarder {
margin:3px;
width:180px;
padding-left:14px;
border-width:5px;
border-color:blue;
border-style:solid;
height:104px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>
在CSS3中添加了一些新的样式，如下例中的边框，可以通过CSS3中的border-radius属性来实现。指定号圆角的半径，即可绘制圆角边框。
<style>
#boarder {
border:solid 5px blue;
border-radius:20px;
-moz-border-radius:20px;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>
如若多添加几行文字，运行结果发生变化。CSS3中的边框自动延长。
1984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
