默认样式重置(css reset):
第一种方法(推荐这种方式,虽然不方便,但是稳定性和性能很好,提倡!还需要重置字的颜色,字体等):
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px; /*font-family:XX字体;*/}
ol,ul{ list-style:none;padding:0; margin:0;}
a{ text-decoration:none;}
img{border:none;}
第二种方法(这种方法虽然简便,但是稳定性和性能非常不好,非常不提倡!):
*{ margin:0;padding:0;}
Why css reset?
- 因为,市面上流行着各式各样的浏览器,它们每家每户的默认样式都不同,如果不进行重置,会让我们写的代码对各个浏览器出现不兼容的现象。因此,需要对默认样式进行重置。再自己将样式进行描绘。
行内标签,即内联标签或内嵌标签,包含
<a>
标签、<b>
标签、<img>
标签、<span>
标签、<strong>
标签、<em>
标签、<br>
标签、<button>
标签、<input>
标签、<select>
标签、<label>
标签、<textarea>
标签等标签。他们具有如下属性:- 默认同行可以继续跟同类型标签(指的是同为内嵌标签类型);
- 内容撑开宽度;
- 不支持代码定义宽高;
- 不支持上下的 margin 和上下的 padding ;
- 代码换行和空格会被解析。
块属性标签,包含
<p>
标签、<div>
标签、<h1>~<h6>
标签、<ol>-<li>
有序列表、<ul>-<li>
无序列表、<dl>-<dt>-<dd>
自带标题列表、<pre>
标签、<hr>
标签等标签。他们具有如下属性:- 默认独占一行;
- 没有宽度时,默认撑满一排;
- 支持所有 css 命令。
块与内嵌的类型转换:
display:block;
——显示为块;display:inline;
——显示为内嵌。比如如下命令将块元素 div 转换成行内元素:div{ display:inline;}
。inline-block 特性:
- 块在一行内显示;
- 行内属性标签支持宽高;
- 没有宽度的时候内容撑开宽度;
<img>
标签是有着类似于inline-block
类型(一行内的块)的标签,其本身是行内标签。
html 解析问题:
- 代码换行或空格会被解析(实际上就是默认样式重置里字体像素大小的一半);
- IE6 和 IE7 不支持块属性标签的 inline-block。
其他标签与属性:
<abbr></abbr>
表示定义缩写;title=“”
表示元素的额外提示信息(可加在任何一个标签上);<cite></cite>
表示作者;<q></q>
表示引用,具体表现为两个双引号。
前端规范:
- 所有书写均在英文半角状态下的小写;
- id、class 必须以字母开头;
- 所有标签必须闭合,包括双标签和单标签;
- html 标签用 tab 键缩进;
- 属性值必须用引号,比如
id=
后面就必须加上两个双引号; <!-- html注释 -->
在两个--
之间必须的有两个空格;/* css注释 */
同样在两个*
之间必须的有两个空格;<ul>-<li>
,<ol>-<li>
,<dl>-<dt>-<dd>
是拥有父子级关系的标签;<p>
,<dt>
,<h1>~<h6>
标签里面不能嵌套块属性标签;<a>
标签不能嵌套<a>
标签;- 内联元素不能嵌套块;
标签类型转换、样式重置笔记
最新推荐文章于 2022-10-27 21:38:37 发布