H5+CSS3笔记

标签分为三大类

• 内联标签：大小由内容决定，不独占一行（span、label、a）
• 块级标签：大小由自己决定，独占一行（h1-h6、p、div、hr、ul、li、form、table）
• 行内块级标签：大小自拟，不独占一行（input、select、img）

路径问题

“./”代表目前所在目录
“../”代表上一级目录
“/”代表根目录

target属性的取值范围

• _blank：在新窗口中打开链接文档
• _self：默认在当前浏览器窗口中打开被链接文档
• _parent：在父框架中打开被链接文档
• _top：在当前网页的最顶层框架中打开被链接文档
• _framename：在指定的框架中打开被链接文档

src与href的区别

• src（source)的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分(引入)，一般用作非文本引入方式。
• href表示超文本引用（hypertext reference)，在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用）。一般用作文本引入方式。

readonly和disabled的区别

1.作用元素不同：

• readonly只针对input（text/password）和textarea有效
• disabled对于所有的表单元素都有效，包括select，radio，checkbox，button等

2.使用场景不同:

• readonly表示只读，用户拥有查阅权限，但无操作权限
• disabled表示元素不具备使用条件，用户此时查阅信息无效（通过爬虫也无法获取信息）

3.外观不同:

• 用disabled修饰的标签默认颜色为灰色

get和post的区别（重要）

1. get请求的参数浏览器地址栏可见；而post的不可见
2. get相对不安全，post相对安全
3. get请求携带的参数有长度限制（255字符），而post请求无限制
4. get会把请求头和数据一起发送，而post会分开发送
5. get一般用于获取浏览器数据，但其中包含静态文件的内容，会要求浏览器自动缓存静态文件，而post不会自动缓存

enctype="multipart/form-data"表示当前表单数据将会转换为二进制（字节流）传输（文件上传）。

语义化

html语义化在使用html编程时，根据内容选择合适的标签（代码语义化)，增加可读性与SEO。

为什么要语义化（优点）

• 为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构
• 提高用户体验
• 有利于SEO
• 方便其他设备渲染网页
• 便于团队开发和维护

表格的对齐方式

• align：表格内文字水平位置，属性可选值包括left、center、right
• valign：表格内文字的垂直位置，属性可选值包括top、niddle、botton
• cellpadding(填充)属性：设置单元格之间的距离
• cellspacing(间距)属性：设置单元格边框与内容之间的距离

1em = 16px
！important的优先级最高
display: none; //物理隐藏,占用空间消失
visibility: hidden; //视图隐藏,占用空间还在

计数器：

h2::before{
			content: "第"counter(test)"页";
}
h2{
	counter-increment: test;  //声明计数器
}

position属性:

position: relative;//相对定位：参照物是原来的位置，只是视图位置发生了偏移
position: absolute;//绝对定位：参照物是原来的位置，但物理位置不存在了（脱离了文档流）
position: fixed;//固定定位
z-index: 3;//设置层叠顺序，值越大元素越在上面显示

• 1个字符默认大小为16px，8em=128px（8×16=128px）

textarea：

<style>
		textarea{
				resize: none;//设置不可拖动
			}
		</style>
		<textarea cols="100" rows="8" readonly disabled>

模态框：

<script>
		var closeBtn = document.querySelector(".close-btn");
		var agreeBtn = document.querySelector(".modal_input");
		var modal = document.querySelector(".modal");
		function toggleModal() {
			modal.classList.toggle("show-modal");//toggle没有则添加类，有则消除类
		}
		closeBtn.addEventListener("click", toggleModal);
		agreeBtn.addEventListener("click", toggleModal);
</script>

AJAX

异步发送请求和同步的区别如下：

1. 异步发送请求不会阻塞页面，而同步发送请求会阻塞页面。
2. 异步发送请求可以在后台进行，不需要等待服务器的响应，而同步发送请求必须等待服务器的响应才能进行下一步操作。
3. 异步发送请求可以同时处理多个请求，而同步发送请求只能处理一个请求。
4. 异步发送请求的响应结果可以在页面上实时更新，而同步发送请求需要等待服务器响应后才能更新页面。

总的来说，异步发送请求可以提高页面的响应速度和用户体验，而同步发送请求则适用于需要等待服务器响应后才能进行下一步操作的情况。