- <!DOCTYPE html> 文档声明头：告诉浏览器你要用h5标准来解析当前html文档
- 属性 用来描述同一类型标签的不同表现形式：既包含了样式方面，又包含了功能方面；属性和标签名是不区别大小写的。
- a 不能设置宽高，其内容多少决定了标签的大小。
--href:指定超链接的目标网址（如果是线上地址，必须是以http开头的完整路径）
--target:指定了目标链接的打开方式 target="_blank" 有下划线 - / 进入文件夹
./ 表示当前文件夹
../ 表示上一层文件夹 - 行为：结构层、表现层、行为层。
6.1 锚点：页内跳转，地址栏上会拼接上targetId：
<a href="#targetId">锚点测试</a> 和 <div id="targetId"></div> 一起使用
6.2 手机上点击直接拨号，需要将电脑的IP地址设置链接手机上热点：<a href="tel:13902396243">点击联系我</a>
6.3 <a href="sms:13902396243">发送短信</a>
6.4 <a href="mailto:13902396243">发邮箱</a>
6.5 <a href="./img/paidaxing.jpg">下载图片</a>
- background是CSS中的属性，bgcolor只定义背景颜色，bgcolor是HTML中<table>的静态背景色，而background-color是JS里标签的背景色，不能混用。
- tr 表示 table 的一行
<tr><th>字体粗，一般作为表头</th></tr>
<tr><td>字体正常，一般作为内容</td></tr> - --9.1无序列表 ul 中 li 前面的标记符号改成 实体方块
<ul type="square">
<li>内容</li>
</ul>
--9.2有序列表（start 开始下标、type 指定序列号类型，默认123）
<ol start="4" type="a" reversed="reversed">
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
<li>条目4</li>
</ol>
会变成：
d.条目1
c.条目2
b.条目3
a.条目4
image.png
11.form表单 块级元素
作用：前后端数据传输（可能是为了将本地数据传到后台，也可能是为了从后台获取数据。
<form align="center" method="get" action="http://192.168.199.141:3000/test.js" enctype="multipart/form-data"></form>
restful API 规范标准 getInfo/id get ***高薪必学***
form
action-链接后台
指定服务器（后台/接收数据）地址
method
指定通讯的方法（常用get/post/put/delete）
get与post 请求的区别
1.传值方式不同，get会把传递的值以url查询字符串的方式显示到地址栏里面，
而post是把要传递的值放在了 请求体 里面，相对来说post会更安全 一点，千万不要把带有密码的内容以get方式传递。（get 收藏夹后会完整保存信息）
2.传输数据量的大小，因为get的内容是放在地址栏的，但是地址栏能够传输数据大小是有限制的，
所以get方式传输数据大小是有限制的（3000字符左右），post方式理论上说没有大小限制的（一般服务器会设置上限）。
3.一般情况下需要从服务端 获取数据时 用到get方式，向服务端发送数据时用post请求。
4.当需要向后台传递文件信息（如头像）时必须 post 请求，同时修改 enctype 为 “multipart/form-data”，否则只能上传文本信息而不能上传文件。
12.input
<form method="get" action="http://192.168.199.141:3000/test.js" enctype="multipart/form-data">
<div>
<!--input
name 告诉后台数据的名称
***name 属性：指定向后台传值的字段（后台通过这个字段来获取用户输入）***
name的值应该同后台联系好定义什么，方便识别
placeholder 空内容时提示内容
value 可以指定input的默认值
autofocus 自动聚焦输入位置 （可写成 autofocus 或者 autofocus="autofocus"）
autocomplete 自动提示之前提交过的内容（也可以写在form里面） 自动默认是“on”
required 该字段是必填的，否则无法提交
readonly 只读 （不可修改）
disabled 禁用
accpet 指定选定文件类型
step 步幅
multiple 设置多选
image/* 选择相册 或者 相机
-->
姓名：<input type="text" name="userName" placeholder="请输入你的大名" value="某某某" autofocus="autofocus" autocomplete="on" required="required" readonly="readonly" disabled="disabled" style="color:red"/>
</div>
<div>
密码：<input type="password" name="psw" />
</div>
<div>
头像：<input type="file" name="avatar" accpet="image/*" multiple="multiple"/>
</div>
<div>
年龄：<input type="number" name="age" step="3" value="1"/>
</div>
<!--type:number 并不是说你只能输入数字，而是html会将内容尽量转为数字，
它在移动端时是非常有意义的，例如电话号码输入框（弹出数字键盘）
-->
<div>
性别：
<label><input type="radio" name="gender" value="0"/>男</label>
<input id="girl" type="radio" name="gender" value="1"/>
<label for="girl">女</label>
<!--
radio 单选 但是要加 name
checkbox 默认选中
label 点击文字也可以选中-->
</div>
<div>
爱好：
<label><input type="checkbox" name="fav" value="a"/>凤姐</label>
<label><input type="checkbox" name="fav" value="b"/>芙蓉姐姐</label>
<label><input type="checkbox" name="fav" value="c"/>看凤姐大片</label>
<label><input type="checkbox" name="fav" value="d"/>看芙蓉打牌</label>
<!--
checkbox 多选
a b c d 方便后台识别-->
</div>
<input type="hidden" value="哈哈" />
<!--一般后台需要用的,用于提交， 不需要前端看到-->
<button>button按钮</button>
<!--写在form表单会默认成 提交按钮-->
<input type="button" value="一个按钮"/>
<input type="reset" value="重新输入"/>
<input type="submit" value="登陆"/>
<!--如用户名是bgg,密码是bgg123,在提交后网址后面会变成 userName=bgg&psw=bgg123
-->
</form>
网友评论