设为首页 加入收藏

TOP

HTML的基本结构与标签的初步了解(二)
2017-10-13 10:49:58 】 浏览:3013
Tags:HTML 基本 结构 标签 初步 了解
lt;dt>一般只有一项</dt> (列表标题)
       <dd>可以有很多项</dd> (列表描述项)
       <dd>132</dd>
       <dd>123</dd>
     </dl>

g.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。
     <figure>
       <img/> 图片
       <figcaption></figcaption> 图片的标题。
     </figure>

k.分区标签

     <div></div>  可以包裹任何标签,也可以被包裹进任何标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML基本块级标签</title>
    </head>
    
    
    <body>
        <ul>
            <li>这是无序列表第一项</li>
            <li>这是无序列表第二项</li>
            <li>这是无序列表第三项</li>
            <li>这是无序列表第四项</li>
        </ul>
        
        
        <ol>
            <li>这是无序列表第一项</li>
            <li>这是无序列表第二项</li>
            <li>这是无序列表第三项</li>
            <li>这是无序列表第四项</li>
        </ol>
        
        
        <dl>
            <dt>这是dl列表的标题</dt>
            <dd>这是dl列表的描述项1</dd>
            <dd>这是dl列表的描述项2</dd>
            <dd>这是dl列表的描述项3</dd>
        </dl>
        
        
        <figure>
            <img src="img/icon.jpg" />
            <figcaption>图片的描述标题</figcaption>
        </figure>
        
        
        <div style="width: 500px; height: 100px; background-color: yellow;">
            这是div里面的文字!!!
            <p>11111</p>
        </div>
        
                
        <div style="height: 500px;"></div>
        
    </body>
    
</html>

3)行级标签

常见的行级标签:

 

(1)文本标签span

① span标签只是包裹作用,没有任何其他含义;
② span作用与div类似,需配合CSS使用。只不过div是块级标签、span是行级标签


(2)强调标签em与strong;倾斜标签i;加粗标签b;四个之间的区别

① em和i都能倾斜。strong和b都能加粗!但是,i和b仅仅是单纯的倾斜加粗,而em和Strong多了强调的语义。
② em和strong都表示强调,但是strong强调的级别更高!!
注意:
1、强调的目的:让搜索引擎知道网页重点强调的内容!便于搜索引擎显示!
2、Strong和em都可以多层嵌套,表示强调程度的递增!

 

(3)短引用标签q:表示短引用 。       cite属性:用于声明引用的来源。

常用的引用标签】
<blockquote>用于引用一段内容</blockquote>
<q>用于引用一句话</q>
<cite>常用于引用作品名、书画名等</cite>

相同点:三个引用标签,都用cite属性表示引用来源
不同点:① 引用的内容不同。      blockquote->一段话,q->一句话,cite->作品名
② 显示的默认效果不同。    blockquote->默认整段向右缩进;     q->默认加引号;   cite->默认倾斜!

 

(4)缩小标签small:将字体缩小一号;big标签:将字体放大一号。

注意:
① small和big可以多层嵌套,直到字体达到最小或最大为止;
② 这俩标签已经被淘汰,并不建议使用。

(5)图片标签img 

① src属性:表示图片的路径
[图片路径的合法方式]
A.网络链接:由于图片在其他网站,如果其他网站删除图片,我们也不能访问,所以不建议使用这种方式;
<img src="https://www.baidu.com/img/bd_logo1.png" />


B.绝对路径:使用绝对路径的图片,只有在本机使用file协议才能访问!所以,严禁使用这种方式!
<img src="file:///E:/icon.jpg" />


C.相对路径:
a、 图片与当前文档在同一层文件夹:直接写图片名
<img src="icon.jpg" />
b、图片在当前文档的下一层文件夹:文件夹名/图片名
<img src="img/icon.jpg" />
c、 图片在当前文档的上一层文件夹: ../图片名 (../表示后退一层)
<img src="../icon.jpg" />
但是,一定要注意:图片必须包含在项目里面,不能访问项目外的图片。


② height:图片的高度 width:图片的宽度
<img src="img/icon.jpg" height="500" width="10" />

③ title:图片的标题,也就是鼠标指上后看到的提示文字
<img src="img/icon.jpg" title="鼠标指上后看到的提示文字" />

④ alt: 图片无法加载时显示的文字
<img src="img/icon.jpg" alt="图片无法加载时显示的文字" />

⑤ align:图片周围的文字相对于图片如何对齐。
可选值:to

首页 上一页 1 2 3 4 下一页 尾页 2/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇div+css模拟select下拉框 下一篇web开发之菜鸟的代码规范

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目