您的位置：首页 > Web前端 > HTML

(转)排版常用HTML标签

2016-12-25 12:56 239 查看

原地址：http://blog.csdn.net/wuqinfei_cs/article/details/21299109

语言

重点是语法

什么是语法

语法就是“标点符号”

html语法

1）标签名用尖括号（<>）包含

2）标签成对出现（有开始有结束）

3）标签内用空格分隔属性，属性与值之间用等号（=）标识，值用引号包裹

4) 标签之间是嵌套关系

注意：所有符号都用半角（英文输入方式）

难点：标签名都是英文单词或缩写

DW

1）左尖括号提示标签名列表

2）结束标签输入斜线（/）直接匹配

3 ) 在设计视图中, 选不到子级对象: 父级既设置了overflow又设置了height

常用标签

页面结构标签

<html> 说明页面内容的最大结构

<head> 文档的头标记

<title> 显示文档标题

<body> 文档主体标签,所有网页内容要放在body标签内

示例

<html>

<head>

<title></title>

</head>

<body></body>

</html>

标签的关系

父子关系

兄弟关系

注意: 结构标签每一页只能出现一次

块级别标签

<div>

独占一行空间

display:block

最干净的标签 (缺省情况下没有任何修饰)

<h1> ~ <h6>

1) 独占一行空间

display:block

2) 有字体大小设置

font-size:32px

3) 有字体加粗

font-weight:700

4) 与上下文之间有较大的间距

margin-top: 21.4333px

margin-bottom: 21.4333px

<p>

1) 独占一行

display:block

2) 与上下文之间有较大的间距

margin-top: 16px

margin-bottom: 16px

<ul><li>

1) <ul>和<li>都独占一行空间

display:block

2) <ul>与上下文距离比较大,而<li>没有

margin-bottom: 16px

margin-top: 16px

3) <ul><li>必须一起使用

4) <li>前面有个修饰的点(项目符号, 列表的样式)

list-style-type: disc

5) <li>有文本缩进现象

ul { padding-left:40px; }

<dl><dt><dd>

1) <dl> <dt> <dd>都独占一行空间

display:block

2) <dl>与上下文之间有较大空间

margin-top: 16px

margin-bottom: 16px

3) <dl>必须, <dt><dd>可选

4) <dd>前面有文本缩进现象

dd { margin-left: 40px; }

内联标签

<a>

特点

1) href属性决定是否显示为链接样式

2) 文本颜色为蓝色

color: #0000EE

3) 文本有下划线修饰

text-decoration: underline

4) 手型的光标样式

cursor: pointer

注意: 当链接地址未知时, 给 href="#". # 代表当前文档

锚标记

放书签

<a id="书签名"></a>

找书签

<a href="#书签名"></a>

注

<a id="#"></a> 锚定顶部

不推荐使用name标识<a>,因为JS定位name不方便

<span>

文本内容修饰标签

最干净的标签

文本修饰标签

<b>

加粗, bold

<i>

倾斜, italic

<strong>

加粗

<em>

倾斜

<u>

下划线

<s>

删除线

<sup>

上标字

<sub>

下标字

注意

内联标签后如有空格或回车会出现一个字符的空格位置

元素标签

<br>

注: 请在内联标签间使用

<input>

<img>

插入图像

网页常用格式: jpg gif png

src属性来指定图片的位置

特殊符号

空格

® 注册商标

© 版权

总结

1) HTML里的属性不能重复使用, 即在一个标签内相同的属性名只能出现一次

2) HTML标签关系

通常

用块级别标签包含内联标签

用<div>包含其他块标签

父子标签, 子标签继承父级标签的某些可继承属性

<h1> 111 <span>222</span> 11 </h1>

标签的就近原则

单独为子标签设置的属性的优先级高于继承过来的

<table>

示例

<table>

<tr>

<td></td>

</tr>

</table>

<tr> 行标签

<td> 单元格标签

推荐

表格的控制用其本身的属性比较合理

用 DW 来设置表格, 特别是合并单元格

属性

table

cellspacing 单元格间距

cellpadding 单元格的填充

border

bordercolor

注意:

表格的每行, 总有一个单元格不设置宽(自动计算剩余的宽), 其他给固定值的宽

单元格的宽高按内容自动伸缩

1px的边框设置

<table>黑背景 cellspacing=1, <td>白背景, 产生1px的黑边框

<table width="100%" border="0" cellspacing="1">

table { background-color: black;}

td { background-color: white;}

注: 如果仅给 <table border="1">, 则会造成2px的边框, 因为 <td>会继承border

表单标签

<input>

text

password

radio

checked

name

checkbox

checked

file

<select></select>

示例

<select>

<option></option>

</select>

size

列表

selected (option)

<textarea></textarea>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航