H5学习笔记
HTML-Hyper Text Markup Language
1. p 和 br
p是定义段落，行间距比较大 （paragraph）
br仅仅换行，没有留行间距 （break）
2. div 和 span （division）
div会自动换行
span 不会换行
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
3. 格式化标签
b 和 strong 加粗
i 和 em 倾斜
s 和 del 删除线
u 和 ins
4. HTML中的单标签
br （break）
hr （horizon line）
img （image）
alt（alter）：当图片URL不能显示时，alt属性用文字描述替换
title：当鼠标浮动到图片上，显示提示信息
width、height：可以同时指定像素，也可以只填一个另一个等比缩放
base
应用在head标签内，实现该html 所有链接都在新窗口打开，而不用在每个a链接上都设置target
<head>
<title>这是一个测试标题</title>
<base target="_blank_">
</head>
当只有个别不需要新开的时候，只需要在个别的a上设置target="_self" 注意是单下划线
meta
<meta charset="utf-8">
input
见9. 表单部分
link
可以用于引用css样式文件
<link rel="stylesheet" type="text/css" href="testcss/test.css">
5. 超链接标签 a （anchor）
外部跳转：一定要加上http://
<a href="http://www.baidu.com">test link</a>
内部跳转
<a href="02 html.html">sdfsdfsadf</a>
预留未开发的页面：在href内任意填一串字符
<a href="##">TBD</a>
不仅能添加URL链接，还能添加图片、音频链接
<a href="D:\chun.jpg">TBD</a>
跳转时新开页面
<a href="02 html.html" target="_blank_">sdfsdfsadf</a>
页面内锚点定位
<a href="#first">首集</a>
<a href="#two">第2集</a>
……
<h3 id="first">首集</h3>
……
<p id="two">第2集</p>
……
6. HTML转义字符对照表
有些是键盘敲不出来的
https://tool.oschina.net/commons?type=2
7. 列表
7.1 ul（unorder list） 与 li（list） 配合无序列表
如果不加<ul>， 则没有向后缩进效果。一般都是有一个标题下接向后缩进列表
<ul></ul> 中只放li标签（确切的说是ul的1级子标签只能为li标签），放其他标签是不规范的
PS:无序列表一般用css来实现其样式
7.2 ol（order list） 与 li 配合有序列表
ol与ul的不同是在于前面是排列的数字还是相同的符号而已
PS: 同理，前面的数字有序列表前面的数字依然用css来实现其显示
7.3 dl（define list） 与 dt（define title） 与 （define data）配合自定义列表
不要被名字迷惑，就是用来实现列表多层缩进的
8. 表格
可与表单配合做信息采集
8.1 基础表格
table、tr（table row）、td（table data）配合使用，没有列的概念，都由行和单元格组成
开发过程中一般border，cellpadding，cellspacing三参归零。用css实现样式
三参归零，以后都是用div+Css动态生成，了解即可
8.2 表格相关属性
公共属性用css实现
8.3 th（table head） thead tbody 标签
th标签默认加粗并居中
8.4 表格标题 caption
置于table顶部居中的文字，描述表格的title
8.5 合并单元格 colspan rowspan
9. 表单 input单标签 与 form
表单组成：表单控件（输入区域）、表单信息（输入提示）、表单域（点提交会提交的表单区域）
input可以嵌入table做表单
表单类型查询：https://www.w3school.com.cn/tags/tag_input.asp
9.1 input的type属性
9.1.1 文本
文本type="text" value可以设置默认值
maxlength="12" #设置最大输入的字符个数，一个中文也算一个
9.1.2 密码
type="password" 密文输入
9.1.3 单选框
type=“radio” 搭配name使用，属于同一组的所有单选按钮必须有相同的name，这样才能实现单选
checked="checked" #可设置设置默认选择的选项
9.1.4 复选框
type="checkbox" 同单选框一样，必须要有相同的name
checked="checked" #可设置设置默认选择的选项
9.1.5 按钮控件
type="button" value="免费注册" #与value搭配，一般用于弹出框
type="submit" value="提交" #与value搭配，用于提交表单域
type="reset" value="重置" #与value搭配，重置表单域
type="image" src="" #与src搭配，指定自定义图片作为按钮控件
9.1.6 上传文件
type="file"
9.2 label 标签
一般仅用于文本输入框
用于加强用户体验，例如当用户点击“用户名”，就能直接将光标focus到用户名的输入框，而不是仅仅只能点击用户名的输入框才能focus光标.
常规跳转
使用for属性 和 input的id属性 结合使用：指定跳转到哪个input表单
9.3 文本域
9.4 下拉菜单
9.5 表单域 form标签
9.6 综合例子
模拟一个世纪佳缘注册页
<table width="500" cellpadding="0" cellspacing="0">
<caption align="center"><h4>青春不常在</h3></caption>
<tr height = "50">
<td>性别</td>
<td>男<input type="radio" name="sex" checked="checked">
女<input type="radio" name="sex">
</td>
</tr>
<tr height = "50">
<td>生日</td>
<td>
<select name="year">
<option value="">年</option>
<option value="">1990</option>
<option value="">1989</option>
<option value="">1988</option>
<option value="">1987</option>
<option value="">1986</option>
<option value="">1985</option>
<option value="" selected="selected">1984</option>
</select>
<select name="month">
<option value="">月</option>
<option value="">1月</option>
<option value="">2月</option>
<option value="">3月</option>
<option value="">4月</option>
<option value="">5月</option>
<option value=""selected="selected">6月</option>
<option value="">7月</option>
<option value="">8月</option>
<option value="">9月</option>
<option value="">10月</option>
<option value="">11月</option>
<option value="">12月</option>
</select>
</td>
</tr>
<tr height = "50">
<td>所在地区</td>
<td><input type="text" name="area" value="四川省" maxlength="6"></td>
</tr>
<tr height = "50">
<td>婚姻状况</td>
<td>未婚<input type="radio" name="marry" checked="checked">
离婚<input type="radio" name="marry">
丧偶<input type="radio" name="marry">
</td>
</tr>
<tr height = "50">
<td>学历</td>
<td><input type="text" value="本科" maxlength="6"></td>
</tr>
<tr height = "50">
<td>月薪</td>
<td><input type="text" value="5000-8000" maxlength="16"></td>
</tr>
<tr height = "50">
<td>手机号</td>
<td><input type="text" maxlength="11"></td>
</tr>
<tr height = "50">
<td>昵称</td>
<td><input type="text" maxlength="12"></td>
</tr>
<tr height = "50">
<td>喜欢的类型</td>
<td>
妩媚<input type="checkbox" name="type">
柔美<input type="checkbox" name="type">
可爱<input type="checkbox" name="type">
小鲜肉<input type="checkbox" name="type">
型男<input type="checkbox" name="type">
气质<input type="checkbox" name="type">
</td>
</tr>
<tr height = "50">
<td><label for="self">自我介绍</label></td>
<td><textarea cols="50" rows="5" id="self">我来自</textarea></td>
</tr>
<tr height = "50">
<td></td>
<td>
<!-- <input type="button" value="免费注册"> -->
<!-- <input type="submit" value="提交"> -->
<!-- <input type="reset" value="重置"> -->
<input type="image" src="..\素材\综合案例\images\btn.png">
</td>
</tr>
<tr height = "50">
<td></td>
<td>
<input type="checkbox" name="type">我同意注册条款和会员加入标准
</td>
</tr>
<tr height = "50">
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr height = "50">
<td></td>
<td>
<h4>我承诺</h4>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
10. 相关文档地址
