前端笔试基础知识扫盲---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会默认加粗的标签


<html>
<head>
	<title>title>
	<style type="text/css">
		
	style>
head>
<body>
	
	<div >
		<strong>Strong Tagstrong>
	div>
	
	<div>
		<table>
			<tr>
				<th>th Tagth>
			tr>
		table>
	div>
	
	<div>
		<dl>
            <dt>dt Roledt>
            <dd>dt is speakingdd>
		dl>
	div>
	
	<div>
		<hr>
	div>

body>
html>

效果展示
strong和th会默认加粗 dt和hr不会
前端笔试基础知识扫盲---html/css_第1张图片

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

你可能感兴趣的:(笔试面试复习,html,css3)