前端笔试基础知识扫盲---html/css
1.H5新元素
1.1 新的表单元素
例子来自W3School
//定义input可能的值 list属性和datalist的绑定同一个 <input list="review" /> <datalist id="review"> <option value="复习操作系统"> <option value="复习计算机网络"> </datalist> //规定用于表单的密钥生成器字段 <form action="/example/html5/demo_form.asp" method="get"> 用户名：<input type="text" name="usr_name" /> 加密：<keygen name="security" /> <input type="submit" /> </form> //定义不同类型的输出 <form action="form_action.asp" method="get" name="sumform"> <output name="sum"></output> </form>
1.2 Server-Sent 事件
允许网页从服务器获得更新
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
EventSource对象用于接收服务器发送事件通知，接收更新时会发生onmessage事件 referencfe: W3School
1.3会默认加粗的标签
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<!-- 加粗 -->
<div >
<strong>Strong Tag</strong>
</div>
<!-- table表头 -->
<div>
<table>
<tr>
<th>th Tag</th>
</tr>
</table>
</div>
<!-- dt定义会话的角色 -->
<div>
<dl>
<dt>dt Role</dt>
<dd>dt is speaking</dd>
</dl>
</div>
<!--hr创建水平分割线 -->
<div>
<hr>
</div>
</body>
</html>
效果展示 strong和th会默认加粗 dt和hr不会
2.盒子模型
2.1box-sizing
content-box:定义显示内容的区域，不包括padding和border border-box:包括padding和border content宽度=width-padding-border
3.元素嵌套
ul和ol都和li搭配；dl和dt/dd搭配
4.置换元素
内容不受css视觉格式化模式控制，css渲染模型并不考虑对此内容的渲染，例如 非置换元素就是不可替换的元素（大多数元素都是）
5.不熟悉的标签
background-attachment:fixed;用来固定背景图片
6.脱离文档流
文档流：窗体自上而下分成很多行，在行中从左到右排放元素 脱离文档流：不再占据空间，处于浮动状态，其他元素会忽略该元素 三种脱离文档流的方法： 1）float 2) absolute:会相对于父元素定位，父元素不是static 3) fixed：相当于浏览器窗口定位 https://www.cnblogs.com/ning123/p/11011845.html
7.块级元素 vs 行级元素
块级 每个独占一行，其后的会另起一行
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
行级 不必另起一行，高度宽度边距不可设
<em><sub><sup><textarea><img><label><input><br>
转换 块转行：display:inline 行转块：display:block
上一篇：
Java基础知识总结（2021版）