标签类型转换、样式重置笔记

来源：互联网发布：数控铣床编程四叶草编辑：程序博客网时间：2024/06/15 03:09

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

阅读全文

1 0