- <!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
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>