2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > HTMLCSS学习笔记(三)----标签类型转换 样式重置

HTMLCSS学习笔记(三)----标签类型转换 样式重置

时间:2023-03-19 13:51:47

相关推荐

HTMLCSS学习笔记(三)----标签类型转换 样式重置

标签默认样式值重置 (css reset)

<body></body>内默认有8px的外边距

<p></p>段落有上下默认36px外边距

<hx></hx>标题也有默认外边距

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;}利用群组清掉默认外边距

<ol></ol> <ul></ul> 有默认的列表样式

ol,ul { list-style:none; margin: 0 ; padding: 0 ; } 清掉列表的默认项

a{text-decoration:none;}清掉a标签的文本默认样式

/* font-fanmily:XX ;*/

img 标签不是所有浏览器都有

img { border: none ; } 清掉img标签的默认样式

*{}通配符,包含所有的标签(不经常使用)

标签基本特性和转换

<body><a href="#">a标签(链接,下载,锚点)</a><img src="img/pp.jpg" alt="flower"><span>区分样式</span><strong>强调(粗体)</strong><em>强调(斜体)</em>

<!--

内联,内嵌,行内属性标签:

1.默认同行可以继续跟同类型标签。

2.内容撑开宽度。

3.不支持宽高。

4.不支持上下的margin和padding。

5.代码换行被解析。

块属性标签:

1.默认独占一行显示。

2.没有宽度时,默认撑满一排。

3.支持所有css命令

-->

<p>段落</p><div>块</div><h1>标题一</h1><h6>标题六</h6><ol><li>列表项</li><li>列表项</li><li>列表项</li></ol><ul><li>列表项2</li><li>列表项2</li><li>列表项2</li></ul><dl><dt>定义列表标题</dt><dd>定义列表项</dd><dd>定义列表项</dd><dd>定义列表项</dd></dt></body>

display:block 显示为块

display:inline 显示为内嵌

inline-block特性和应用

inline-block 一行内的块

特性:

1.块在一行显示;

2.行内属性标签支持宽高;

3.没有宽度的时候内容撑开宽度

(<img>)

存在问题:

1.代码换行被解析

2.ie6 ie7不支持块属性标签的inline-block

前端书写规范

1、所有书写均在英文半角状态下的小写;

2、id,class必须以字母开头;

3、所有标签必须闭合;

4、html标签用tab键缩进;

5、属性值必须带引号;

6、<!-- html注释 -->(--后一定要有空格

7、/* css注释 */ (*后必须加空格

8、ul,li/ ol,li/ dl,dt,dd拥有父子级关系的标签;

9、p,dt,h标签 里面不能嵌套块属性标签;(标题内只有标题

10、a标签不能嵌套a;

11、内联元素不能嵌套块;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。