前端基础内容（二）

最新推荐文章于 2024-07-08 16:01:05 发布

vinoMamba0908

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量315

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_38091402/article/details/106225751

版权

前端基础内容（二）

1、实体

&实体的名字;
https://www.w3school.com.cn/tags/html_ref_entities.html

2、meta标签

设置网页的元数据
https://www.w3school.com.cn/tags/tag_meta.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        meta标签主要设置网页的元数据 
            charset：指定网页的字符集
            name:指定数据的名称
            content：指定数据的内容
    -->
    <meta charset="UTF-8">
    <meta name="keywords" content="html5,css3">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、
    电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <title>Document</title>
</head>
<body>
    <p>五月天  自传</p>
</body>
</html>

3、语义化标签

html用来负责网页的结构，所以在使用html标签时，应该更关注标签的语义，而不是它的样式

1、标题标签（h1~h6）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        标题标签h1~h6
            -重要性一次递减
            -h1在网页中的重要性仅次于title标签
            -一般情况下一个页面中只有一个h1
            -一般情况下只会使用到h1~h3(h4~h6基本上不怎么使用)
        块元素：会在页面中独占一行的称为块元素（block elemenet）
    -->
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
</body>
</html>

2、段落标签§

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        p标签表示页面中的一个段落；
        p标签是块元素
     -->
    <p>我是一个段落标签</p>
</body>
</html>

3、hgroup标签

标签用于对网页或区段（section）的标题进行组合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <hgroup>
        <h1>自传</h1>
        <h2>如果我们不曾相遇</h2>
    </hgroup>
</body>
</html>

4、blockquote标签（块级元素）

表示一个长引用，块级元素会换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>kobe:</p>
    <blockquote>
        你见过凌晨4点的洛杉矶吗
    </blockquote>
</body>
</html>

5、q标签（行内元素）

本质上域blockquote是一样的，表示的是一个短引用，行内元素不会换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <span>kobe:</span>
    <q>你见过凌晨4点的洛杉矶吗</q>
</body>
</html>

4、块元素和行内元素

块元素（block element）
- 在网页中通过块元素进行布局
- 一般情况下会在块元素中放行内元素，但不会反过来
- p元素中不能放任何块元素
行内元素（inline element）
- 行内元素主要用来包裹文字

5、结构化语义标签

1、header标签

header 标签定义文档的页眉（介绍信息）

2、main标签

表示网页的主体部分（一个页面中只会有一个main）

3、footer标签

4、nav标签（相对用的较多）

5、aside标签

表示和主体相关的其他内容（侧边栏）

6、article标签

表示一个独立的文章

7、section标签

表示一个独立的区块，上面的标签都不能表示的时候使用section

8、div标签

块级元素
目前使用最多的标签
没有语义，就是来表示一个区块

9、span标签

行内元素
没有任何语义，一般用于在网页中选中文字

6、列表标签

1、有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>
</body>
</html>

2、无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
</body>
</html>

tips：一般情况下ul和ol标签语义上区别不大，主要使用的还是ul无须列表要多一些

3、自定义列表(使用的比较少)

使用***dl***标签来创建自定义列表
使用***dt***来表示定义的内容
使用***dd***来对内容进行解释说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>五月天</dt>
        <dd>人生无限公司</dd>
        <dd>自传</dd>
    </dl>
</body>
</html>

7、超链接(a标签)

<a href="http://baidu.com"></a>

行内元素
- 在a标签中可以嵌套任何元素
- 但不能嵌套自己
可以跳转到其他页面
也可以跳转到当前页面的其他位置

tips:路径

相对路径
- 同一目录下：src=“logo.png”
- 图片在上一级目录：src="…/logo.png"
- 图片在下一级目录：src=“文件夹名/logo.png”
绝对路径
- src=“D:/index/img/logo.png”

其他用法

1、target属性

_self 默认值，在当前页面打开的位置
_blank 在一个新的页面中打开超链接

2、超链接属性可以跳转到当前页面的其他位置

#：href="#"，直接回到页面的顶部
#id：跳转到指定id的地方去

8、img标签（图片标签）

<img src="" alt="">

自结束标签
属于替换元素，块和行内元素之间，具有两种元素的特点
src:图片路径，也可以是图片链接
alt:当图片不显示时，图片代替文本
- 搜索引擎会通过alt属性来搜索该图片
width：图片的宽度
height：图片的高度
- 如果宽高度只修改了一个，则另外一个会等比例缩放

tips:

一般情况下pc端，不建议修改图片的大小
但是在移动端会经常对图片进行缩放

图片的格式

jpg
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 适合表示颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明（专为网页而生的）
webp
- 谷歌新推出的专门用来表示网页中的图片的格式
- 它具备了其他格式图片的所有优点
- 缺点就是兼容性不好
base64
- 将图片使用base64进行编码，可以直接将图片转换为字符，通过字符的形式引用
- 一般都是一些需要和网页一起加载的图片才会使用

原则：效果一样，用小的，效果不一样，用效果好的

9、iframe内联框架(基本上不怎使用了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe src="https://baidu.com" frameborder="0" width="800px" height="700px"></iframe>
</body>
</html>

10、音视频标签（暂时先空着）

vinoMamba0908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础内容（二）

前端基础内容（二）1、实体&实体的名字;https://www.w3school.com.cn/tags/html_ref_entities.html2、meta标签设置网页的元数据https://www.w3school.com.cn/tags/tag_meta.asp<!DOCTYPE html><html lang="en"><head> <!-- meta标签主要设置网页的元数据
复制链接

扫一扫