HTML5+CSS错误集锦（一）

最新推荐文章于 2022-11-28 21:30:01 发布

原创最新推荐文章于 2022-11-28 21:30:01 发布 · 756 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#错误集锦 #html5 #CSS #选择器浮动

WEB前端专栏收录该内容

15 篇文章

订阅专栏

HTML是大小写不敏感的，HTML与html utf-8 与UTF-8是一样的

1.p标签

错误：先写color后写size 两者都没有效果
<p style=" color:#FF0000"; font-size:5px; >这是一段文本</p>
正确：先写font-size,后写color 两者都有效果
<p style=" font-size:5px; color:#FF0000";>这是一段文本</p>

2.label 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

性别：
<label for="man">男</label><input type="radio" name="sex" id="man" value="男" checked="checked"/>
<label for="woman">女</label><input type="radio" name="sex" id="woman" value="女" />

3.input与input之间的间隔

margin-top等
<label>用户名：</label><input style="margin-top: 20px;" /><br>		
<label>密 &nbsp;&nbsp;&nbsp;码：</label><input type="password"  value="" style="margin-top: 20px; margin-bottom: 20px;"/>

4.文本之间的间隔

		<textarea rows="5" cols="30" style="line-height: 50px;"></textarea>

5.清除浮动的四种方法

使用额外元素：
	<div style="clear: both;"></div>
父级元素添加属性：
 	overflow为 hidden|auto|scroll  都可以实现。

使用伪元素清楚浮动：
	.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
使用双伪元素：
			.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
				/* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				*zoom: 1;//为了兼容IE6-7
			}

6.name和value的区别：

name是控件的名称（多个控件可以取同一个名称），value是控件的值；
并不是所有控件的value都会显示出来，比如 checkbox, radio, hidden；
定义控件的 name和value 就可以在服务器上获取这个控件和它的值；
你没看到 submit 的name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了 name，在服务器上一样可以得到它的 name 和 value；
控件不定义name/value也可以显示，只是为了方便在服务器接收和区别，才定义它的 name/value，当然按钮的 value 不光是存放它的值，也用来显示。

7.CSS选择器、CSS伪类、CSS伪元素区别（出自W3Cschool）

区别W3Cschool
CSS选择器
CSS中的元素选择器除了可以id（#）、class（.）、属性（[]）选取元素以外，还有很重要的一类，就是根据元素的状态来选取元素，包括伪类（pseudo-class）和伪元素(pseudo-element)。

这些传统的选择器，包括id选择器、class选择器、属性选择器、派生选择器等等，他们是直接从HTML文档的DOM树中获取元素的。而伪类和伪元素选择器是预定义的，且是独立文档元素的。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征，而是基于处于特殊状态的元素（伪类），或者是元素中特别的内容（伪元素）。当然，伪类：和伪元素：：的表示形式也使用:（或者::）与其它选择器相区分。

CSS伪类
什么叫伪类呢？

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

CSS的现有标准中，伪类包括：

:first-child 点我看手册，应用第一个子元素
:link 点我看手册，应用未访问过的链接
:visited 点我看手册，应用已访问过的链接
:hover 点我看手册，应用鼠标指针悬浮的元素
:active 点我看手册，应用活动的链接
:focus 点我看手册，应用聚焦的输入元素
:lang 点我看手册，伪类将应用于元素带有指定lang的情况，不常用
CSS伪元素
什么是伪元素呢？

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS的现有标准中，伪元素包括：

:first-letter 点我看手册，伪元素的样式将应用于元素文本的第一个字（母）
:first-line 点我看手册，伪元素的样式将应用于元素文本的第一行
:before 点我看手册，在元素内容的最前面添加新内容
:after 点我看手册，在元素内容的最后面添加新内容

两者之间区别：
首先说一下伪类和伪元素的相同之处，

伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

他们的不同之处：

伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

一句话总结不同之处就是，伪元素产生新对象，在DOM树中看不到，但是可以操作；伪类不产生新的对象，仅是DOM中一个元素的不同状态；