页面结构标签
head文档头标签
title显示文档标题
body文档主体标签:所有网页内容要放在body标签内
示例:
<html>
<head>
<title></title>
</head>
<body> </body>
</html>
重中之重:标签的关系——家庭关系 父子关系 同辈关系
注:结构标签每一页只出现一次
2.
块级别标签
div标签:独占一行空间。
小结:div标签是最干净的标签 例:<div>输入文字</div>
h1-h6标题字标签:
1、独占一行空间
2、标题字有字体大小设置
3、标题字有字体加粗(着重突出)功能
4、与上下文之间有较大的间距 例:<h1>输入标题</h1>
p段落标签:
1、独占一行空间
2、与上下文之间有较大的间距 例:<p>输入段落</p>
ul li无序列表标签:
1、ul和li都独占一行空间
2、ul标签与上下文之间有较大的间距
3、上阵不离父子兵(ul li必须一起使用)
4、li前面有个修饰的点(列表样式)
5、li有文本缩进现象
例:<ul>
<li>输入标签</li>
<li>输入标签</li>
<li>输入标签</li>
</ul>
dl dt dd定义列表标签:
1、dl、dt和dd都独占一行空间
2、dl标签与上下文之间有较大的间距
3、上阵不离父子兵(dl dt dd一起用或dl dt一起用或dl dd一起用)
4、dd前面有文本缩进现象
例:
<dl>
<dd><a href="#">监控系列</a></dd>
<dd><a href="#">视频系列</a></dd>
<dd><a href="#">硬盘系列</a></dd>
<dd><a href="#">视频系列</a></dd>
<dd><a href="#">支架系列</a></dd>
<dd><a href="#">显示系列</a></dd>
</dl>
或者
<dl>
<dt><a href="#">监控系列</a></dt>
<dt><a href="#">视频系列</a></dt>
<dt><a href="#">硬盘系列</a></dt>
<dt><a href="#">视频系列</a></dt>
<dt><a href="#">支架系列</a></dt>
<dt><a href="#">显示系列</a></dt>
</dl>
或者
<dl>
<dt><a href="#">监控系列</a></dt>
<dd><a href="#">视频系列</a></dd>
<dd><a href="#">硬盘系列</a></dd>
<dd><a href="#">视频系列</a></dd>
<dd><a href="#">支架系列</a></dd>
<dd><a href="#">显示系列</a></dd>
</dl>
3.
内联标签:
a链接标签:
1、href属性决定显示为链接样式
2、文本颜色变为蓝色
3、文本出现了下划线修饰
4、鼠标指向会出现手形光标样式
注:当链接地址未知时,在href对应的值里面写"#"号
深入理解:
链接时相对关系的重要(相对路径)
制作锚标记(书签):
放书签:<a id="书签名"></a> 找书签:<a href="#书签名"></a>
span文本内容修饰标签:最干净的标签 例:<span>修饰标签</span>
文本修饰标签:
b 加粗标签(bold) i 倾斜标签(italic) strong 加粗标签 em 倾斜标签
u 下划线标签 s 删除线标签 sup 上标字标签 sub 下标字标签
例:
<u>下划线标签</u> <i>倾斜标签</i> <strong>加粗标签</strong> <em>倾斜标签</em>
<b>加粗标签(bold)</b>
大家可以打开Dreamweaver在里输入试试效果
注:内联标签后如有空格或回车会出现“一个英文字符”的空格位置
元素(单个使用)
br 换行符标签: 注:只在内联标签间使用
input输入标签
img图像标签,插入图像
详细讲解:
图像在哪?用src属性来指向
注:在使用图片前,先将图片拷贝在网站站点内(根文件夹)
网页常用图格式:jpg gif png
图像色彩模式不能是CMYK,用images文件夹来整理图片文件
特殊符号:
1. 空格符号 2.®注册商标 3.©版权信息
html里的属性不能重复使用
深刻理解html标签关系:
通常用块级别标签包含内联标签
父子之间,子级继承父级的关系(注意哪些属性不被继承,哪些可以继承)
子级标签属性优先级高于父级(标签就近原则)