一、W3C --- web标准
W3C标准 即万维网联盟标准。 在线教程
W3C 表针 对 web 开发，进行一系列的标准化定义
网页的三层结构：html（结构）、css（表现）、javaScript（行为）
符合 W3C 标准的页面是什么样的？
后续更新
二、HTML 基础
1. HTML 是一门 超文本标记语言，运行在浏览器上，由浏览器解析
全拼：HyperText Markup Language
.htm.html都是静态网页文件的扩展名
推荐使用 html 后缀名
htm 是历史遗留的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名
HTML 是一种标记语言，而不是一种编程语言
HTML 是使用标签来描述网页的一种语言
web浏览器来读取HTML文件，并将其作为网页显示
2. HTML 结构
- 一个简单的 html 文档
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
- html5 文档
<!DOCTYPE html> 声明文档类型
<html> 页面根元素
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
(1) <!DOCTYPE html> 标签 声明是 html5 文档类型
<!DOCTYPE html>声明为 HTML5 文档，html5只有一种声明方式HTML4 有三种声明格式（ 不再使用 ）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
(2) <html></html> 标签 根元素
(3) <head></head> 标签 定义文档的头部，是所有头部元素的容器
- 下面这些标签可用在 head 部分：
<base>, <link>, <meta>, <script>, <style>, <title>
(4) <body></body> 标签 定义文档的主体
(5) <title></title> 标题 双标签，是 <head></head> 标签中唯一必须的元素
在 HTML / XHTML 文档中是必须的
定义了浏览器工具栏的标题、
默认显示在收藏夹中的标题、
搜索引擎结果页的标题（搜索引擎）
(6) <meta> head中 单标签 描述了元数据 参考资料
-
元数据不会显示在页面，但会被浏览器解析，作用如下：
为搜索引擎定义关键词
为网页定义描述内容
定义网页作者
每30秒中刷新当前页面
<meta name="keywords" content="搜索引擎定义关键词">
<meta name="description" content="网页 描述内容">
<meta name="author" content="组这名字">
<meta http-equiv="refresh" content="30">
(7) <base> head中 单标签 为页面上的所有链接 规定默认地址、打开方式
<a>、<img>、<link>、<form>标签中的 URL 不再生效属性
href=""页面所有链接的跳转地址属性
target=""打开时方式：_self默认本网页中打开；_blank默认新网页中打开
(8) <link> 单标签 引入外部资源 （ 引入css样式、引入浏览器工具栏图标）
属性
href=“ ”外部资源地址-
属性
rel=“ ”规定当前文档 与 被连接文档间的对应关系- 值
stylesheet：表示引入css样式 - 值
shortcut icon： 表示引入图标 - 值 有多个
- 值
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="shortcut icon" href="http://www.cifi.com.cn/static/default/images/favicon.ico"> // 路径必须使用绝对路径
(9) <style></style> 双标签 引入外部css样式、包含css样式
属性
type="text/scc"定义内容为 css 类型h5 属性
scoped="scoped"样式仅仅应用到 style 元素的父元素及其子元素引入外部样式 不推荐
<style src="mystyle.css"></style>； 需使用<link>引入
(10) <script></script> 双标签 引入外部脚本、包含脚本代码；新增异步属性
属性
src=""规定外部脚本文件的 URL， 该属性 具有跨域请求能力属性 type = "text/javascript" 默认属性，可忽略
-
异步属性：--- 仅适用于外部脚本
属性
async或async="async"被立即下载、解析、执行（异步完成，与页面渲染同时进行）；若置于顶端引入外部js脚本，有可能出现解析不到元素报错的情况属性
defer或defer="defer"脚本被立即下载（异步完成，与页面渲染同时进行），但 解析、执行 是等到整个页面全部解析完成 再解析、执行不添加 异步属性：浏览器解析到
script标签时会停止其他元素的渲染，只是下载、解析、执行 js 完成后，在继续解析渲染页面
三、元素 类型
1. 块级元素 （block element）
- 块级元素 独占一行
- 块级元素 可设置宽高
- 可容纳块级元素、行内元素...
- div 、 p 、 h1 、 ul 、 li 、 table 系列、 form 表单
2. 行内元素（内联元素） (inline element）
- 块级元素 一行可多个行内、行内块元素
- 块级元素 不可设置宽高；但可以设置：
margin左右、padding左右 - 只能容纳 行内元素/行内块...
- a 、 span 、 img 、 input 、 select 、textarea、 b、 p、i 、 sub、 sup
3. 块级元素、行内元素的 的重要区别：
块级元素单行显示；可设置宽高；
行内元素一行显示；不可设置宽高；但可设置
margin左右、padding左右、line-height
4. 行内块 元素
行内块元素：行内元素转化的一种类别
-
特性：
- 行内块：可设置宽高
- 行内块：一行可现实多个
-
vertical-align对齐属性：- 默认 以父元素的基线对齐；
-
middle值：在父元素的中部； -
top值：以行中最高元素的顶端对齐； -
bottom值：以行中最低元素的顶端对齐；
5. 行内元素、行内块元素（ 都属于 内联元素 ） 及 存在间隙的bug
-
内联元素 存在间隙原因：
- 元素之间有空格 或 回车等
-
解决方案：
- margin-right: -4px;
- float: left;
- 外层容器 font-size: 0px; 行内块 再单独设置 font-size;
四、常用标签
1. a 标签
-
属性：
href=" "页面跳转的地址-
target=""-
target="_self"在本窗口中打开，【默认】 -
target="_blank"在新窗口中打开
-
download="filename"该属性也可以设置一个值来规定下载文件的名称
-
a 标签优化：
- head 中写
<base target=”_blank”>决定了 页面中所有a标签链接 在新窗口中打开
- head 中写
-
锚点链接
- 设置锚点：
id = “” - 链接到锚点
<a href = "#id值"></a> - 空连接
<a href = "#"></a>默认的锚是#top 也就是网页的最上端
- 设置锚点：
-
下载压缩包等资源文件
<a href="a.zip">下载</a><a href="a.rar">下载</a>
-
阻止 a 标签默认跳转 的 4种方式：
<a href="javascript:void(0);" onclick= "myjs( )">void是一个操作符，void(0)返回undefined，地址不发生跳转 、页面不会移动<a href="#">页面不跳转，但页面会移动到顶端a 标签 被点击执行的函数中
return falsee.preventDefault()阻止 与 事件关联的默认动作，IE 不支持，兼容代码如下：
<body>
<a href="http://www.baidu.com" id="test"> Click Me </a>
</body>
<script>
var test = document.getElementById('test');
function stopDefault(e) {
if (e && e.preventDefault)
e.preventDefault();
else {
window.event.returnValue = false;
}
}
test.onclick = function(e) {
stopDefault(e);
}
</script>
2. img 标签
-
必需属性：
-
src=""图片路径: 绝对路径 / 相对路径 -
alt=""替换文本，图片不显示的时候显示文字
-
-
属性：
width="" height=""设置图片的宽高- 只设置一个则成比例放大缩小
- 两个都设置图片会变形
-
属性：
align=""图像被环绕的方式- left / right 多行文字环绕 图片
- top / bottom / middle 单行文字环绕 图片
- 但实现 文本环绕图片 的常见形式： 给图片设置
float： left
3. ul ol dl 等 列表标签
去除每一项的序号 或圆点，设置：
list-style: none-
无序列表： ul li
- ul 的
type属性： -
disc默认值 实心小圆圈 -
circle空心小圆圈 -
square小方块
- ul 的
-
有序列表： ol li
- ol 的
type属性： -
1默认值 1、2、3 -
a： a 、 b 、 c -
A： A 、 B 、 C -
i： i 、 ii 、 iii -
I： I 、 II 、 III
- ol 的
无序列表：dl dt dd
4. table 系列标签
-
tablethead-
tbody-
tr行-
th列（表头） -
td列
-
-
基本结构如下：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>张新</td>
<td>18</td>
<td>帅</td>
</tr>
</tbody>
</table>
-
table标签上的属性 （属性值 为 number 类型，不带单位）cellspacing=" "单元格 与 单元格 之间的距离，默认值为 2cellpadding=" "表格中内容距边框的距离width=" "表格宽height=" "表格高border=" "表格边框的宽度align="center / left / right"整个表格的水平对齐方式
-
th / td标签上的属性 （属性值 为 number 类型，表示合并几个单元格）colspan=" "水平方向上 合并单元格rowspan=" "垂直方向上 合并单元格align="center / left / right"每个单元格中内容 水平对齐方式
- 创建一个红色边框 1px 宽的表格（制作假边框：用边框间距离 当做边框的宽度）
- 表格 边框 宽度设为0
- 边框间距离为 1px
- 整体table的 背景颜色 定位 红色
- 每个单元格原色 定位 白色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style media="screen">
table {
width: 200px;
height: 100px;
background-color: red;
}
th, td {
background-color: #fff;
}
</style>
</head>
<body>
<table cellspacing="1" border="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td >张新</td>
<td>18</td>
<td>帅</td>
</tr>
</tbody>
</table>
</body>
</html>
5. 易忽略标签汇总
<h1></h1> 标题标签 --- 利于搜索引擎
- 搜索引擎使用标题为您的网页的结构和内容编制索引
- h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
<font size="6"></font> 一号标题 对应 6号字体，依次类推
<br> 换行
<hr> 定义水平线
<q>引用文本</q> 它的语义：引用别人的话, 不单单是加了双引号
空格（分号不能少）
<pre></pre> 保留原格式（对空行和空格进行控制）
<b></b> <strong></strong> 加粗
<i></i> <em></em> 斜体
<del></del> <s></s> 删除文本标签
<ins></ins> <u></u> 下划线
<sub></sub> 上标
<sup></sup> 下标
<small></small> 缩小
<code></code> 电脑自动输出
五、表单控件
1. 表单构成：表单域、提示信息、表单控件
2. 表单标签 <form> </form>
- 属性：
-
action="url"规定提交表单 向何处发送数据 -
method="get / post 等值"规定用于发送 form-data 的 HTTP 方法 -
name=" "表单的名称
-
3. 文本输入框 <input type="text">
- 属性：
-
type=" "根据不用的type值，输入字段有很多种形式 -
name=" "输入内容的键名 -
value=" "默认内容值 -
autocomplete="on / off"是否启动自动记忆补全功能，浏览器基于之前键入过的值 -
required必填的表单项 -
readonly输入框，只读模式 -
disabled未激活 -
autofocus自动获取光标焦点 -
placeholder=" "占位符的值，仅适用于 input 标签；此属性仅适用于：属性适用于以下的type类型：text, search, url, telephone, email 以及 password。设置占位符内容的样式，如下：
-
<style>
input::placeholder {
color: green;
}
</style>
4. 密码输入框 <input type="password">
- 文本输入框的所有属性值，对于密码输入框都有效
5. 单选框 <input type="radio"> 圆形选项
-
属性：
-
type="radio"单选框属性 -
checked或checked="checked"默认选中项 -
name=" "单选框名称 -
required必填的表单项
-
要想保证单选效果，
name属性值 必须相同
6. 多选框 <input type="checkbox"> 方形选项
-
属性：
-
type="checkbox"多选框属性 -
checked或checked="checked"默认选中项 -
name=" "多选框名称 -
required必填的表单项
-
name属性设置同样的值，也不能单选
7. 提交按钮 <input type="submit">
8. 下拉列表 <select> <option> tab1 </option></select>
<select> </select>标签可创建：单选 或 多选下拉框-
select标签属性：-
name=" "下拉列表的名称 -
multiple下拉列表可多选 size=" "-
disabled规定禁用该下拉列表 -
required必填项
-
-
option标签属性：-
selected选中项 （不设置该属性，默认选中第一个） -
value=" "定义送往服务器的选项值
-
- 下拉列表分组显示：
<select> <optgroup> <option> <option> </optgroup> </select>
<select>
<optgroup label="北京市">
<option value="33">1</option>
<option value="22">2</option>
<option value="11">3</option>
</optgroup>
<optgroup label="天津市">
<option value="33">4</option>
<option value="22">5</option>
<option value="11">6</option>
</optgroup>
</select>
-
optgroup标签属性-
label分组选项组名
-
9. 文本域 <textarea> </textarea>
- 属性：
-
rows=" "输入的行数 ；值为 number -
cols=" "输入的字符数 ；值为 number ； 字符数可理解为：以阿拉伯数字个数为准
-
10. 文件上传控件 <input type="file">
11. 隐藏域 <input type="hidden" value=""> 收集 或 发送信息
- 隐藏域的作用：
-
value=" "属性 存储数据，可在提交表单时一起发送给服务器
-
12. <label></label> 标签，被点击时 出发相应表单控件
- label 元素不会向用户呈现任何特殊效果；但 在 label 元素内点击文本，就会触发此控件
- 属性：
for=" "关联 表单控件的id=" "属性
13. 完整的表单提交代码【待实现】
六、常用的全局属性（含h5）
1. title=" " 显示提示信息
- 鼠标移动到元素上时，会显示一段提示文本（
title属性值）
2. class=" " 规定标签类名
3. style=" " 规定行内样式
4. id=" " 规定元素id，作为唯一标识
5. data-属性名 = " " （h5）自定义属性，用于 存储数据
属性名：其中不应该含大写字母
数据存储在标签DOM对象的
dataset数据集中；访问数据DOM.dataset.属性名示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11</title>
</head>
<body>
<button type="button" data-id="888">按钮</button>
</body>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', function (e) {
console.log(e.target.dataset.id); // '888'
});
</script>
</html>
6. draggable="true / false / auto" （h5）元素是否可以被拖动， 默认值 auto 使用浏览器默认行为
- 拖拽示例：
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
<script type="text/javascript">
function allowDrop(e) {
// 阻止默认事件
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e) {
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
}
</script>
</html>
七、路径
相对路径：相对当前文件所在位置的路径
"./"：代表目前所在的目录。
"../"：代表上一层目录。
以"/"开头：代表根目录。
绝对路径
盘符路径：
c:/apache/cgi-bin 下的不建议使用服务器路径：以http开头的链接
根目录
- 是相对子目录来说的，在文件系统建立时即已被创建
- 打开“我的电脑”，双击C盘就进入C盘的根目录，双击D盘就进入D盘的根目录；其它类推。
八、link 标签引入 浏览器工具栏图标；制作 .ico 格式的图标
关于网站图标favicon.ico
favicon.ico 制作工具
-
图标大小
- 三种尺寸：16 × 16、32 × 32、48 × 48
- 32*32 最佳，再大了某些浏览器会不显示
引入方式
<link rel="shortcut icon" href="http://www.cifi.com.cn/static/default/images/favicon.ico">
