UID-排版常用HTML标签

￡神魔★判官ぃ 2022-08-25 15:54 226阅读 0赞

![SouthEast][]

# 语言 #

重点是语法  
什么是语法  
语法就是“标点符号”

# 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>

[SouthEast]: /images/20220824/00c797d3f08f414ea5f304a35e571a02.png