前端-5-小总结_前端活动小总结-CSDN博客

本文链接：https://blog.csdn.net/qq_38328762/article/details/99768882

当执行代码时，css去找标签，并且css样式路径写的越清晰，找的速度越快
标签可以使用多个选择器，以空格分割
```
<div class="div01 div02"></div>
```
布局div 内的内容必须有div包含着，即
```
     <img....>

     <p>...</p>

 </div>
```
标准文档流
1. 脱离标准文档流
```
position:absolute;
position:fixed;
float;
```
2. 未脱离标准文档流
```
position:relative;
position:static;
```
3. 整体布局必须用文档流
可以用margin:auto居中的
```
position:relative;
position:static;
```

解决高度塌陷的方法

1. 给父元素添加overflow：hidden;
2. 脱离标准文档流：使用绝对定位position:absolute;
				float；
3. 就拿东西去填充分隔它们。比如padding 和 borde

h5 和 html5区别

h5是webapp的设计思想。。；html5行业标准（包括css3、js等）

SEO搜索引擎优化
meta：编码；meta：搜索优化；

 <meta name="robots" content="index,follow"> 遵循百度的规则，可以搜到

html5改变

html5新增的语义标记（无样式，只是语义）

区块标签：article、section、nav（导航）、aside（侧边栏）、header、footer
内容分组标签：figure（插图）、figcaption、main
文本级别标签：time

	<body>
	    <div class="container">
	        <header></header>
	        <section>
	            <div class="center">
	                <main>
	                    <header></header>
	                    <article></article>
	                </main>
	            </div>
	        </section>
	        <footer></footer>
	    </div>
	</body>
	```

智能表单

<form action="" id="my_form" name="login_form" method="get" enctype="application/x-www-form-urlencoded">

action为空表示交给自己
后台根据 name 获取数据
outline:none;设置无外边框，点击无抖动

minlength和maxlength：

<input type="text" id="my_name" name="login_name" class="input-user-name" maxlength="12" minlength="6">

新增input类型

1. <input type="email">
2.  <input type="date">
3. <input type="number" min="1" max="100" step="5">
	必须为数字，min最小值，max最大值，step步长
4. <input type="range" max="100" min="0" step="1" id="input_range" onchange="rng_v.value=this.value"><input type="text" id="rng_v">
	滑动条

5. <input type="color"> 颜色盘
6. <progress value="50" min="0" max="100"></progress>进度条

属性

<form action="" id="my_form1" name="login_form" method="get" enctype="application/x-www-form-urlencoded">
    <!--form 中的novalidate属性是不验证提交-->
    <input type="text" required> <!--非空验证-->
    <input type="text" placeholder="请输入姓名"><!--提示文字-->
    <input type="text" autofocus><!--自动聚焦：光标位置-->
    <input type="text" pattern="1[345678]\d{9}"><!--正则表达式-->
</form>

input配合datalist

<form action="">
    <input type="text" list="search" placeholder="选择省份">
    <datalist id="search">
        <option value=""></option>
    </datalist>
</form>