常用HTML元素与CSS属性

2024-01-18 13:41 小编

最容易的网页结构应该是如许：

<!DOCTYPE html>
<html>
<head>
<title>问题</title>
</head>
<body>
</body>
</html>

在body标签内出现的，等于网页的具体内容，较常见的html标签有上面这些：

1. div标签——主要用于网页结构的结构，通常采取id与class判别差别的div，例如界说一个网页的底部版权音讯，可以写为：

<div class="copy">XXX 版权全体</div>
2. p标签——浮现段落，比喻公司简介的笔墨可以写为：

<p>本公司设立于2005年，首要供应xxxx等营业。</p>
3. h1--h6标签——问题标签，权重由h1到h6顺次递增，h1存在仅有性，每一个页面只呈现一次，例如，可以将网页主标题放在h1里，副问题放在h2里，相干内容放在h3里，等等……

4. ul标签——显示列表，与li标签配合运用，例如：

<ul><li>产品1</li><li>产品2</li><li>产品3</li></ul>
类似的还有有序列表ol，用法相似，一般网页的导航菜单就应用列表标签来实现……

5. img标签——图片显露，在网页中展示图片的时分用。如：

6. span标签——透露表现行内元素，譬如：

<p>支解手机：<span>88888888</span></p>
文本中的某一部分加上了span标签，便于在CSS中给它零丁定义花样……

7. a标签——透露表现链接，例如：

<a href="http://www.css5.com.cn">CSS5</a>
意义是给“CSS5”这几个字加之对应的链接。假定是给图片加之链接，则应当写为：

8. strong和em标签——表示虚夸，在文章中某个环节词或某句话比拟必要，可以加上此标签，在没界说格局的状况下，一样平常比较张扬的文本会显示粗体或斜体。

9. 别的尚有一些标签，如表格标签table，以及体现音频或视频的标签audio和video等等，在网页模板顶用的较少的标签这里就再也不赘述，将以上标签使用灵动的话，制作网页模板就基本够用了，其他的标签再慢慢研讨就能够了。

对付CSS，也有不少界说种种花色的“代码”：

1. background——显现布景，例如给名为top的p标签界说布景，我们可以写为：

#top {background:#ccc;}
这闪现后援是浅灰色，要是要用图片作为后援，则应写作：

#top {background: #00FF00 url(bg.png) no-repeat;}
这里的no-repeat闪现不反复显示配景，假如需要频频，则去掉该属性就可；

2. text-align——显现文本居左、居右和居中的设置装备摆设，最经常使用的：

p {text-align:center}
意思即是将这段文本居中；

text-align:left
文本形式靠左居左

text-align:right
文本模式靠右居右

3. font——定义字体与字号，例如：

#one {font:bold 12px/20px arial}
显示笔墨为粗体，12px大小，行间距为20px，字体为arial，如需单独界说字号和字体，则写为：

font-size:14px;font-family:arial;
零丁界说是否加粗，则使用：

font-weight:bold;
font-weight:normal
零丁设置装备摆设行间距，则应用:

line-height:24px;
line-height:150%;

4. padding与margin——别离定义内边距和外边距，例如:

#two {padding:0 5px 0 6px;margin:10px;}
显示two标签的内边距别离为0，5px，0，6px，四边外边据都为10px，当别离定义四边边距的时分，依据上、右、下、左的顺序，只界说两个数字，则闪现凹凸，左右，只定义一个数字，则展示四边相通隔绝距离；

5. border——展现边框，通常写为:

#xxx {border:1px solid #eee}
则显现边框宽度为1px，颜色为#eee，若是单独定义下边框，则写为border-bottom，其他四边亦然；

6. 链接技俩：咱们可以分袂界说链接文本的样式与鼠标指向链接时的花式，例如:

a {text-decoration: none;color:red;}
a:hover {text-decoration: underline;color:blue;}
意思是链接文本不显示下划线，色调为赤色，当鼠标指向时显示下划线，并显示为蓝色。其余还有a:visited标签界说曾经拜访过的链接技俩，可以本身试一下；

7. 上述text-decoration界说翰墨可否加下划线，纷歧定针对链接使用，要是将给普通文本加下划线也是可以的，至于a:hover表示鼠标指向链接时的技俩，一样的，也可运用p:hover展现鼠标指向该段落时的花样；

8. height与width——显露高度与宽度，例如:

img {height:50px;width:200px;}
则定义了图片的宽与高，假设width:100%则表现宽度为整个屏幕的宽度；

9. float:left和float:right——经常运用来构造的浮动标签，它表现元素的运动左袒，例如float:left展现向左浮动，下方的元素就会积极显示在左侧；

10. display——定义元素的类型，最常用的display:none闪现暗藏该元素，display:inline展现元素熟手内显示，display:block显露元素以块状显示；

11. clear:both——表现拔除浮动，不指望元素有浮动功效，则可以给元素加上此界说。

12. position:absolute与position:relative——浮现相对于定位，通常是父级定义position:relative，子级定义position:absolute绝对定位属性，子级应用left或right和top或bottom发展绝对定位。对于初学者来讲这个或者不易大白，长期可以不作研究，其实不是每一个网页模板城市用到相对定位。

Tag： html

返回首页上一篇：宝塔如何开启ssi让shtml网页内include正常显示下一篇：font-style 属性最经常使用于划定规矩斜体文本