页面结构标签

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.&nbsp;空格符号     2.&reg;注册商标    3.&copy;版权信息

 

 

html里的属性不能重复使用

深刻理解html标签关系:

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

父子之间,子级继承父级的关系(注意哪些属性不被继承,哪些可以继承)

子级标签属性优先级高于父级(标签就近原则)