9.04学习笔记

#在手机上测试页面效果步骤

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:[email protected]">发邮件</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修饰的元素

猜你喜欢