一、Web标准
web标准是网页制作的标准，他不是一个标准，是由一系列标准组成；
a）W3C——万维网联盟，制定了结构和表现的标准
b）ECMA——欧洲电脑厂商联合会，制定了行为标准
1.结构（HTML）
2.表现（CSS）
3.行为（Javascript）
相关概念
注：html和xhtml的区别:xhtml并没有增加任何新的标签,只是语法要求更加严格,例如标签必须闭合,标记名必须小写等.
1.html—超文本标记语言
2.xhtml—可拓展的超文本标记语言
3.html5—html的第五次重大修改
HTML基本结构
1.文档声明
作用:
告知浏览器使用哪种html或xhtml规范
语法:
<!DOCTYPE html>|<!doctype HTML>|<!doctype html>
2.网页根元素（html）
所有的标记和网页内容必须放在<html></html>标签之间.
- head
用来设置编码字符、网页标题、关键词、标述、引入一些外部文件
- body
放置所有需要在网页中显示的内容以及内容的标记
HTML基本语法
1.常规标记
语法:<标记 属性="属性值" >xxx</标记>
注:
a)标记名称必须小写,属性和属性值之间用等号连接,属性值需要加双引号.
b)所有标点符号都必须是英文状态下的
c)多个属性之间用空格隔开
2.空标记
语法:<标记 属性="属性值" />
html常用标记
1.网页内容标题
语法:<hx></hx>
x代表1-6;
2.段落文本
语法:<p> </p>
3.转义字符
4.强制换行
<br />
5.加粗文本
<strong></strong>;
<b></b>
6.倾斜文本
<em></em>;
<i> </i>
7.水平分割线
8.上标和下标
上标
下标
9.列表
-
1.有序列表
-
语法:
-
<ol>
-
<li>列表项内容</li> -
<li>列表项内容</li> -
</ol>
-
2.无序列表
-
<ul>
-
<li>列表项内容</li> -
<li>列表项内容</li> -
</ul>
-
3.自定义列表
-
语法:
-
<dl>
-
<dt>名词</dt> -
<dd>解释</dd> -
</dl>
10.插入图片
<img src="目标文件路径" title="提示文本" alt="图片替换文本" />
alt和title的区别
title是当鼠标悬停在图片上时显示的提示信息
alt是当图片由于某些原因加载失败时显示的替换信息
11.超链接
<a href="链接" target="_blank" title="提示信息”>文本或图片</a>
target="_blank" 设置超链接在新窗口打开
target="_self"设置超链接在本窗口打开
12.表格
语法:
<table>
<tr>
<td></td>
</tr>
</table>
说明:--tr表示行;--td表示列
<th></th>定义表格的表头(有居中加粗效果)
<caption>表格标题</caption>
-
标签
-
<caption>标题</caption>
-
<th>表头</th>
-
<tr>行</tr>
-
<td>列<td/>
-
主题<tbody>
-
页眉<thead>
-
页脚<tfoot>
-
-
属性
-
width
-
宽度
-
height
-
高度
-
border
-
给表格添加边框
-
bordercolor
-
边框颜色
-
cellspacing
-
设置单元格间距
-
cellpadding
-
设置内容和单元格之间的间距
-
colspan
-
合并列
-
rowspan
-
合并行
-
align
-
设置单元格内容的水平对齐方式
-
14.div
作用:无语义标签,主要用于布局和划分版块
语法:<div></div>
说明:<div>标签可以把文档分割成独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记<div>,那么该标签的作用会变得更加有效。
15.span
语法：
<span></span>
说明：<span></span>文本节点可以是某一小段文本，或是某一个字。
16.iframe框架
作用：将外部文件的内容嵌入到本页面中的某个位置。
语法：<iframe src="文件路径" width="宽度值" heigh="高度值" frameborder="边框大小数值"
注：如何去掉或隐藏iframe的滚动条：
scrolling=“no”
17.HTML注释
概要: 拓展：href和src的区别
-
src是将某个外部文件嵌入到本页面中标签所在的位置，常用的有：img、script
-
href表示超文本引用，用来建立当前元素和文档之间的链接。常用的有a、link
表单
语法：<form method="传送方式" action="服务器端文件"></form>
作用：搜集用户信息
注:所有表单都要放在form标签中
拓展：get和post的区别：
a）get用来获取数据，post用来发送数据；
b）get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送数据，用户看不到这个过程。
c）get可以传送的数据量较小，一般不能超过2kb，post可以传送的数据量更大，理论上没有限制。
d）get安全性较低，post安全性更高。
1.文本框
<input type="text" value="默认值" placeholder="提示文本"/>
2.密码框
<input type="password" placeholder="提示文本"/>
3.提交按钮
<input type="submit" value="按钮内容"/>
4.重置按钮
<input type="reset" value="按钮内容"/>
5.单选按钮
<input type="radiobutton" name="" checked=” checked“/>
注：一组中的单选按钮设置一致的name属性值可以达到多选其一的效果。
6.复选按钮
<input type="checkbox" name="" checked=” checked“/>
7.普通按钮
<input type="button" value=”按钮文字“/>
注：普通按钮不具备提交功能，通常结合JS点击事件来使用
普通按钮默认文字内容为空，可通过value属性值设置
8.下拉列表
语法：
＜select>
<option>列表项1</option>
<option>列表项2</option>
......
＜/select>
注：selected改变默认选中项
9.文本域
语法：
<textarea rows="行数" cols="字符宽度"></textarea>
拓展：禁止用户拖拽改变文本域大小，需添加属性 style="resize:none;"
网友评论