HTML4.01
注：观看pink老师的视频写的笔记，侵权请联系删除
文本-》图片-》超链接-》表格-》列表-》表单
1.先听与看，再动手练习，分享交流。
聆听，沉淀，传播。
2.超文本的两层含义：超越文本限制，超级链接文本。
3.web标准的构成：结构，表现和行为，最佳体验方案：结构，样式，行为相分离。
4.双标签的关系分为包含关系和并列关系。
基础标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
中文网页：lang=“zh-CN”
5.标题标签h1-6：显示特点文字加粗，字号变大，独占一行。
6.段落标签p：显示特点：会根据浏览器窗口的大小自动换行，段落和段落之间有空隙。
6.换行标签br：单标签，显示特点：强制换行显示，没有空隙。
7.单标签一般要空一个空格写反斜杠。
8.文本格式化标签：加粗strong，倾斜em，删除线del，下划线ins
9.图像标签img：属性：src（必须），alt（替换文本），title（提示文本），width，height，border（一般在css的时候使用）宽度和高度只要设置数字，只设置宽度或高度让它等比例缩放，不会失真，不是裁剪
<img src="" alt="" />
<img src="" alt="" title="" />
<img src="" alt="" width="" height=""/>
10.目录文件夹和根目录
11.相对路径：以引用文件所在位置为参考基础，同一级不用写，下一级/，上一级…/，（用反斜杠），（从代码所在的这个文件出发，去寻找目标文件）。经常使用
12.绝对路劲：从盘符开始（用斜杠）或者完整的网络地址（用反斜杠）。
13.超链接标签a：属性：href（必须，url地址），target（打开窗口的方式，默认值当前窗口下划线self；新窗口_blank）
分类：外部链接（http://www.xxx.com），内部链接（页面名称），空连接（href="#"），下载链接（压缩包文件名字），网页元素超链接（各种网页元素都可以添加链接）,锚点链接（快速定位到页面的某个位置）
<a href=""></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"><img src="" /></a>
锚点链接：a.href的属性值#名字，b.目标位置标签添加id属性=刚才的名字(同一个页面)
<a href="#two"></a>
<h3 id="two">XXX</h3>
14.注释和特殊字符
注释，快捷键ctrl+/,便于开发人员理解和阅读代码，不会执行不显示
特殊字符：
空格 小于 < 大于 >
15.表格标签table>tr>td，table的属性（写在table里面）align（left，center，right），border（“数字”或默认“”），cellpadding（像素值，默认1px），cellspacing（像素值，默认2px），width（像素值或百分比），height（像素值或百分比），不用加px；通常通过css。
作用：显示，展示数据
显示特点：无边框，靠左
表头单元格：th，显示特点：加粗居中
合并单元格：a.跨行合并：rowspan=“个数”；跨列合并：colspan=“个数”。b.目标单元格：跨行：最上侧写合并代码；目标单元格：跨列：最左侧写合并代码。c.删除多余的单元格
<table>
<tr><td></td><td></td><td></td></tr>
</table>
<table>
<tr><th></th><th></th></tr>
<tr><td></td><td></td></tr>
</table>
<td colspan="2"></td>
<td rowspan="2"></td>
<table cellpadding="" cellspacing="">
<tr><th></th></tr>
<tr><td></td></tr>
</table>
表格结构标签thead（必须有tr）,tbody，放在table里面
使用场景：表格很长，为了更好的表示表格的语义，分割为表格的头部区域和表格的主体区域
<table>
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
16列表标签
作用：用来布局
显示特点：整齐，整洁，有序
分类：无序列表，有序列表和定义列表
A.无序列表ul>li（重点）
特点：没有顺序，并列，ul只能嵌套li，li可以容纳所有元素；会有自己的样式属性，通过css去掉
B.有序列表ol>li（很少用）
特点：有顺序，列表排序以数字来显示，ol只能嵌套li，li可以容纳所有元素；会有自己的样式属性，通过css去掉
C.定义列表dl>dt+dd+dd
作用：用于对术语或者名词进行解释和描述，没有列表项符号
特点：dl只能包含dt和dd，经常一个dt对于多个dd，dt和dd可以容纳所有元素
显示特点：dd前面有大空格
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
17.表单标签:
作用：为了收集用户信息
构成：表单域，表单控件（表单元素）和提示信息
A表单域：form，属性：action（服务器url地址），method（get、post），name（名称，区别不同的表单域）
是包含表单元素的区域，用户信息的收集和传递。
作用：把范围内的表单元素信息提交给服务器
<form action="" method="" name="">
</form>
B表单控件：允许用户在表单中输入或者选择的内容控件
分类：input输入表单元素，select下拉表单元素，textarea文本域表单元素。
B1输入表单元素input（单标签）：重要属性：type（见下），其他属性：name（名称，自定义，区别每个表单元素的不同）,value（值，自定义，单选复选value要相同）,checked（checked，首次加载被选中，主要针对单选和复选按钮）,maxlength（输入字段最大长度，正整数，较少，用正则表达式）
书写属性注意：name和value主要给后台人员使用，单选复选要有相同的name值
type属性值不同，控件类型不同：button（可点击按钮，用于通过javascript启动脚本，不提交数据，只做某件事情），checkbox（复选框），file（输入字段和浏览按钮），hidden（隐藏的输入字段），image（图像形式提交按钮），password（密码），radio（单选），reset（重置，清除表单所有元素，还原初始默认状态），submit（提交，表单域里面的表单元素的值提交给后台服务器），text（单行输入字段，默认宽度20个字符）。
<form>
用户名：<input type="text" /><br />
</form>
label标签经常和表单元素搭配使用：定义标注，绑定表单元素
label[for]+input[id]，属性值相同
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
文本：value直接可以在文本框看到效果
T: <input type="text" />
T: <input type="text" name="username" value="请输入用户名"/>
<label for="text1">T：</label><input type="text" name="" id="text1" value=""/>
密码
T: <input type="password"/>
T: <input type="password" name="pwd"/>
<label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" value=""/>
单选，圆形，必须有相同的名字name才能实现多选1
T: X<input type="radio" name="M" /> Y<input type="radio" name="M" />
性别: 男<input type="radio" name="sex" value=“男”/> 女<input type="radio" name="sex" value=“女”/>
T：<label for="r1">X</label><input type="radio" name="N" id="r1" value=""/> <label for="r2">Y</label><input type="radio" name="N" id="r2" value=""/>
多选，正方形，必须有相同的名字name才能实现多选
T: X<input type="checkbox" /> Y<input type="checkbox" /> Z<input type="checkbox" />
T: X<input type="checkbox" name="" value="L"/> Y<input type="checkbox" name="" value="M"/> Z<input type="checkbox" name="" value="N"/>
T：<label for="c1">X</label><input type="checkbox" name="N" id="c1" value=""/> <label for="c2">Y</label><input type="checkbox" name="N" id="c2" value=""/><label for="c3">Z</label><input type="checkbox" name="N" id="c3" value=""/>
提交：value默认是提交
<input type="submit">
<input type="submit" value="免费注册">
重置：value默认是重置
<input type="reset">
<input type="submit" value="重新填写">
普通按钮
<input type="button" />
<input type="button" value="获取短信验证码"/>
文件上传
T：<input type="file" />
<label for="f1">T：</label><input type="file" id="f1"/>
B2下拉表单元素select（包含在form里面）。子元素：option，属性：selected
使用场景：多个选项让用户选择，节约页面空间
注意：至少包含一对option，默认选中的是第一个，如果某项属性使用selected=”selected“设为默认选中项
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
B3文本域表单元素textarea（包含在form里面），属性（通常用css）：cols（每行的字符数），rows（显示的行数），
作用：定义多行文本输入的控件
使用场景：用户输入内容较多，常见于留言板，评论
注意：默认文字写在标签之间，单行文本框写在value属性
T：<textarea>XXX</textarea>
18.查阅文档
百度：http://www.baidu.com
W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN
|