Python学习 Day 039 - html - body中标签的分类

body中标签的分类

1.行内标签
2.块级标签

1.行内标签

(1)常用的行内标签

<span> <a> <em> <i> <strong> <b>

特点:

在一行内显示,不换行
不能设置宽高,如果不设置宽高,默认是内容的宽高

**行内块标签: img input

特点:

行内显示
可以设置宽高

(2) <span> 标签

span 表达"小区域,小跨度" 是一个文本级标签

span里面只能放置文字,图片,表单元素.span里面不能放p,h,ui,dl,ol.div

(3)<a> 标签

   <a href="https://image.baidu.com/">点击进入百度图片</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语hypertext reference超文本地址的缩写

返回顶部

 <a href="#">跳转到顶部</a>

超链接的属性

href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

(4)<img> 标签

能插入的图片类型

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai

src属性：图片的相对路径和绝对路径

相对路径:相对当前页面所在的路径, 两个标记 . 和 .. 分表代表当前目录和父路径。

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

img 是image“图片”的简写，src 是英语source“资源”的缩写。

<img src="images/1.jpg">
#当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

绝对路径

网络路径

<img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg" height = "100">

width：宽度
height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

另外:

注意事项：

如果要想保证图片等比例缩放，请只设置width和height中其中一个。
如果想实现图文混排的效果，请使用align属性，取值为left或right

点击图片的时候跳转到某个链接，应该是：

       <a href="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg">
            <img src="./图片/fengjing.jpg" alt="风景" height = "100">
            <img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b12ec0dd93510fb367197197e932c893/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg" height = "100">
        </a>

(4) <em> <i> <strong> <b>

斜体标签 <em> <i>
粗体标签 <strong> <b>

倚天图屠龙记
<b>倚天图屠龙记</b>
<strong>倚天图屠龙记</strong>

2. 块级标签

(1)常用块级标签

h1 - h6 <div> <p> <ul> <ol> <dl> <table> <form> <input>

特点:

独占一行
可以设置宽高,如果不设置,默认是父盒子宽的100%

(2)h1 - h6

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

    倚天屠龙记
    <!--h1 只允许页面中只有一个:为了seo和爬虫-->
    <h1>倚天屠龙记</h1>
    <h2>倚天屠龙记</h2>
    <h3>倚天屠龙记</h3>
    <h4>倚天屠龙记</h4>
    <h5>倚天屠龙记</h5>
    <h6>倚天屠龙记</h6>

(3) div

div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

div标签的属性：

align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

Python学习 Day 039 - html - body中标签的分类

猜你喜欢