学习分享html {2}

最新推荐文章于 2024-10-11 17:04:33 发布

天天捡破烂

最新推荐文章于 2024-10-11 17:04:33 发布

阅读量56

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_18219159/article/details/127910332

版权

学习目标：

1:常用的语义标签，明白语义是什么?至少记忆6-8个

2:熟悉有序列表，无序列表，定义列表的用法

3:行内元素与块元素的基本区别，并各举三个常用的块，行内元素

4:a标签的属性有哪些，其中target属性，有哪些属性值，能达到什么效果

a标签的路径问题，./和../

5:img标签的常用属性有哪些

6:常用的图片格式，简单知道各自的优势在哪里

7:音视频标签及常用属性

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!-- html 搭建网页的结构

大部分的网站头部主体底部导航文章等等

-->

<!-- 布局标签（结构化标签）用来布局的标签都是块元素

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个 ,

用来代替div

-->

</body>

</html>

元素分类

块元素（block element）用来布局

特点：

1、会独占一行

2、默认情况下，块元素的宽度是视口的100%

3、默认情况下，块元素的高度是被内容撑开的

常用块元素：div、p、h1-h6、header、main、footer、nav

行内元素（inline element）用来包裹文字

特点：

1、不会独占一行

2、宽高是被内容撑开的，内容有多宽它就多宽

常用行内元素：span、strong、em、del等

行内块元素

特点：

兼具块元素和行内元素特点

常用行内块元素：img

注意：

1、块元素主要是用来布局，里面可以放任何元素,块元素、行内元素、行内块元素

2、行内元素主要用来包裹文字的，一般情况下不能放块元素

3、p标签是个特殊的块元素，它里面不能放块元素

4、a标签是个特殊的行内元素，它里面什么都能放

<!--

列表：如果页面中，出现结构、样式，功能等都比较雷同的部分，

就可以用列表

列表（list）一组一组

1:有序列表用ol创建列表，li表示列表项

2:无序列表用ul创建列表，li表示列表项

3:定义列表用dl创建列表，dt表示下定义，dd表示对定义的解释

类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释

注意：1、列表之间是可以互相嵌套的，ul，ol，li是块元素

2、可以使用type属性更改项目符号

ol 它的项目符号：1、a、A、I 等，默认项目符号是‘1’

ul 它的项目符号:

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3、默认样式，li前有项目符号，上下左右有间距

4、最常用ol、ul，在实际的使用中，一般不做有顺序或者无顺序区分

5、ol，li

ul，li

dl，dt，dd

都是配套使用，就像cp

-->

<!--

不要混合使用

<div>

</div>

<ol>

<p></p>

</ol> -->

<!--

超链接:可以是一个字，可以是一个块元素，可以是图片，可以是任何内容,

特殊的行内元素，可以包裹任何元素，除了它自己

默认样式：字体有一定颜色，有下划线

功能：1、从一个页面跳到另一个页面

2、在当前页面进行跳转（楼梯导航/锚点功能）

3、下载

属性：

href属性指向跳转的地址

绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对

相对地址：它的地址值跟超链接的html文件位置相关

./ 当前目录下跳转 ./可省略，默认是./

注意：很多路径规则都是一样，包括图片、音视频跳转等

target属性指定超链接页面打开的方式

可选值：

_self 在当前页面打开超链接默认值一般情况下，国外网站常用

_blank 新开页面打开超链接一般情况下，国内常用

具体用哪种方式，根据项目需求来的

锚点功能实现

去顶部 href属性值设置为#

去任意的位置先给要去的位置打个标记 id属性='id属性值'

在href里填写标记 href='#id属性值'

注意： id属性值：你起的名字

不以数字开头

一般不用汉字

一般不能重复使用

补充：空链接的写法

有关的代码实现如下

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <h1 id="gg">歌曲推荐</h1>
        <hr>
        <h2>光字片</h2>
        <a href="#">周深<br></a>
        <a href="#abd">去第二张照片</a>
        <br>
        <strong>
            <p>当阳光亮堂堂
            </p>
            <p>照在院子里</p>
            <p>照在旧瓦片上</p>
            <p>照在旧屋脊</p>
            <p>总有一些小麻雀</p>
            <p>在院子里蹦跳又逃去</p>
            <p>炒菜的香味 在脑海里</p>
            <p>当冬天第一场雪花又飘起</p>
            <p>自行车的铃声和嘴角的哈气</p>
            <p>在这下雪的胡同里</p>
            <p>曾经一串串脚印</p>
            <img src="人世间1.jpeg" alt="人世间1">
            <p>那是红围巾和你</p>
            <p>冷风吹过 早晨雾起昨夜想到你</p>
            <p>那是一起走过街道 树林和田野</p>
            <p>还剩下多少</p>
            <p>没有忘掉 不变的风景</p>
            <p>人世间里 找到你</p>
            <p>当微风吹过后墙上的野花</p>
            <p>吹过木栅栏和头上的发夹</p>
            <p>远处孩子放学回家</p>
            <p>叽叽又喳喳</p>
            <p>处处是炊烟</p>
            <p>想起妈妈</p>
            <p>冷风吹过 早晨雾起昨夜想到你</p>
            <p>那是一起走过森林 土地和田野</p>
            <p>还剩下多少</p>
            <p>没有忘掉</p>
            <img id="abd" src="人世间2.jpeg" alt="人世间2" width="650">
            <p>不变的风景</p>
            <p>人世间里找到你</p>
            <p>冷风吹过 早晨雾起昨夜想到你</p>
            <p>那是一起走过街道 树林和田野</p>
            <p>还剩下多少</p>
            <p>没有忘掉</p>
            <p>不变的风景</p>
            <p>人世间里找到你</p>
            <p>还剩下多少没忘掉</p>
            <strong>
                <hr>
                <h3>友情链接 <a href="#">A网站</a>|<a href="#">B网站</a>|<a href="#">C网站</a>
                    <h4><a href="#gg">回到顶部</a>|<a href="#">联系我们</a></h4>






























    </center>
</body>

</html>