一、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;"