语言
重点是语法
什么是语法
语法就是“标点符号”
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>