9.4学习笔记
在手机上测试页面效果步骤
1. 页面要以服务器形式启动,也就是说以http://域名: 端口号
用HBuilder,WebStorm即可
2. 开始->搜索：CMD ,输入：ipconfig就会显示当前设备的网络信息
找到IPV4地址就是你的IP了
Win8/Win10: win+r:CMD
3. 将页面上的域名：127.0.0.1 / localhost 替换成你的IP(第二部获取)
4. 让手机和电脑保持在一个网络环境下(局域网)
5. 复制电脑上URL到：草料二维码 生成一个二维码
6. 用手机到扫一扫即可
A标签
<a href="http://www.baidu.com">百度</a>
<a href="002A.html">跳到02页面</a>
<a href="javascript:void(0);">死链接1</a>
<a href="javascript:;">死链接2</a>
<a href="tel:18682920673">打电话</a>
<a href="sms:18682920673">发短信</a>
<a href="mailto:154580967@qq.com">发邮件</a>
<a href="http://www.ifeng.com/wd#et">儿童</a>
<a href="#js">军事</a>
<a href="#xz">星座</a>
em
<em>倾斜效果，同时有语义强调</em>
strong
<strong>加粗效果，同时有语义强调</strong>
列表
无序列表(爱好,技能)
<ul type="circle/disc/square">
<li>学习</li>
<li>看书</li>
</ul>
有序列表
<ol type="1/a/A/i/I">
<li>冰箱门打开</li>
<li>大象塞进去</li>
<li>冰箱门关上</li>
</ol>
自定义列表
<dl>
<dt>第一步</dt>
<dd>冰箱门打开</dd>
<dt>第二步</dt>
<dd>冰箱门关上</dd>
</dl>
span:替换font修饰文字,但是自身不带有样式语法,还是需要使用CSS
我爱<span style="color:red;">北京</span>天安门
表格
<table border="1" width="50%" align="center"
cellpadding="20" cellspacing="15">
<tr align="center">
<td>1</td>
<td>2</td>
</tr>
</table>
border:边框宽度
cellpadding:单元t格填充（内边距）-内容到边框的距离
cellspacing:单元格间距（外边距）-格子与格子之间的距离
align:对齐方式
width:宽度
colspan:跨列(column)
rowspan:跨行(row)
小练习
使用表格实现：九宫格
#表单:用户和服务器交互的桥梁
<form name="myform" action="数据要发送的目标地址"
method="get/post">
..........
</form>
method:默认GET
GET与POST的区别:
GET：在URL地址中传输数据,http://www.xx.com/w?id=123&sex=boy
不安全，浏览器中对URL长度有限制
去服务器获取商品列表等一些信息
POST：以文件形式发送，在URL地址中看不到数据，长度无限制
去服务器删除，新增，修改
表单元素
<fieldset>
<legend>注册</legend>
账号：<input type="text"><br>
密码：<input type="password"><br>
确认密码：<input type="password"><br>
年龄：<input type="number" min="18" max="120"><br>
性别：
<label>
<input type="radio" checked name="sex">男
</label>
<label>
<input type="radio" name="sex">女
</label>
<br>
手机号：<input type="number" min="11111111111" max="1999999999"><br>
邮箱：<input type="email"><br>
学历：
<select multiple>
<option value="">研究生</option>
<option value="">本科</option>
<option value="">大专</option>
<option value="">中学</option>
<option value="">小学</option>
</select><br>
技能：
<label><input type="checkbox">HTML</label>
<label><input type="checkbox">CSS</label>
<label><input type="checkbox">JavaScript</label>
<label><input type="checkbox" checked>PHP</label>
<label><input type="checkbox" checked>JSP</label>
<label><input type="checkbox" checked>ASP</label>
<br>
<button>提交</button>
<button>取消</button>
</fieldset>
块元素与行内元素(内联元素)
块元素：独占一行，可以设置宽高,宽度默认100%。
DIV,P,h1-h6,LI,UL,OL
内联元素：内容有多少就占多大地方，不能设置宽高
a,b,i,s,u,span,input
#disabled与readonly的区别？
1. 外观有一点区别
2. 只读可以复制
3. 提交表单的时候不会提交disabled修饰的元素
===
<body>
不常用
文件域：<input type="file"><br>
隐藏域：<input type="hidden" value="789"><br>
图像域：<input type="image" src="../img/flower8.jpg" /><br>
html5新增：
年月日 <input type="date"><br>
时间 <input type="time"><br>
年月日+时间 <input type="datetime-local"><br>
颜色： <input type="color">
搜索：<input type="search">
range: <input type="range">
禁用：<input type="text" disabled value="123"><br>
只读：<input type="text" value="456" readonly><br>
<select name="" id="">
<optgroup label="主食">
<option value="">凉皮</option>
<option value="">米线</option>
</optgroup>
<optgroup label="零食">
<option value="">薯片</option>
<option value="">辣条</option>
</optgroup>
<optgroup label="饮料">
<option value="">脉动</option>
<option value="">凉白开</option>
<option value="" selected>无糖可乐</option>
</optgroup>
</select><br>
</body>
select选项中默认的option
<option selected>选项</option>
checked:checkbox,radio
selected:select
