自学从零开始的HTML基础课程（day2）

黄豆粉面包

已于 2022-12-03 09:16:27 修改

阅读量225

点赞数 1

文章标签： html css 前端

于 2022-11-17 19:31:20 首次发布

本文链接：https://blog.csdn.net/qq_59779414/article/details/127909742

版权

注：文章基于VSCode

一、结构标签

1.1、 html 搭建网页结构

1.2、html5 新增的标签，语义化更强

一、结构标签

<!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>剩余的常用标签</title>    
</head>
<body>
     <center> 
        <header>
           <h1> 欢迎来到阴阳师</h1>
        </header>
    </center>  
        <main>请选择你的英雄</main>
        <footer>defeat</footer>
        <nav></nav>
        <aside></aside>
        <section></section>
</body>

</html>

1.1、 html 搭建网页结构

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

1.2、html5 新增的标签，语义化更强

布局标签（结构化标签）

header 网页头部

main 主体部分一般一个

footer 网页底部

nav 网页的导航

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

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个，用来代替div

二、行内与块元素

<!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>
        <div>王藏商事如貂太当皇。<div>
</body>
</html>

2.1、元素分类

块元素（block element）用来布局

特点：1.会独占一行

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

3.默认情况下，块元素的高度是内容的高度

常用：div p h1-h6 header main footer nav

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

特点：1.不会独占一行

2.宽度是被内容撑开的，内容有多宽就有多宽

常用: span strong em del

行内块元素

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

常用行内块元素：img

2.2、注意：

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

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

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

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

三、列表

<!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>
     <ul>
         <li>
             <ol>
                 <li></li>
             </ol>
         </li>
     </ul>

     <h1>我最喜欢的三个游戏</h1>
     <ol>
         <li>阴阳师</li>
         <li>原神</li>
         <li>王者</li>
     </ol>
     <h1>我最喜欢的三件事</h1>
     <ul type="circle">
        <li>阴阳师</li>
        <li>原神</li>
        <li>王者</li>
     </ul>
     <dl>
         <dt>web前端课程体系</dt>
         <dd>网页三剑客</dd>
         <dd>react</dd>
         <dt>Java架构</dt>
         <dd>Java基础</dd>
         <dd>三大框架</dd>
     </dl>

</body>

</html>

3.1、列表：

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

列表（list）一组一组

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

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

disc 默认值，实心的圆点

square 实心的方块

circle 空心的圆

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

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

3.2、注意：

1、列表之间可以相互嵌套,ul ol li 是块元素

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

ol 的项目符号：1、a、A、I等，默认是“1”

ul 的项目符号默认是实心的圆

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

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

5、ol,li

ul,li

dl dt dd 都是配套使用的，就像cp

四、超链接

<!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>超链接</title>
</head>

<body>
<a href="#">空链接1</a>
<a href="JavaScript:;">空链接2</a>

<hr>

<a href="#">去顶部</a>

<a href="#abc">去底部</a>
<a href="#" id="abc"></a>

<hr>

    <a href="http://t.csdn.cn/Wx3BS" target="_blank">
        <div>HTML基础</div>
    </a><br>
    <a href="./03.列表.html">
        列表
    </a><br>
    <a href="../day1/07.实体.html">
        实体
    </a><br>
    <a href="../作业1/book.jpg">
        图片
    </a>


</body>

</html>

4.1、定义：

html 超文本语言

超链接： 2个功能，2个属性，1个补充

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

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

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

4.2、功能

1、从一个页面跳到另一个页面

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

3、下载

锚点功能实现：

去顶部：只需要href属性值设为#

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

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

id属性值：你起的名字

一般不以数字开头

一般不用汉字

不能重复使用

4.3、属性

href属性指向要跳转的地址

绝对地址：不管你的html文件在哪，超链接去的位置是绝对的

相对地址：它的地址值跟超链接的html文件位置有关 ./开头当前目录跳转

../开头跳出当前目录，来到上一级目录默认是./ 可以省略

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

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

可选值：

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

_blank 新开页面打开超链接国内常用

具体根据需求来

注意：

空链接的写法（2种）

五、图片标签与图片格式

5.1、图片标签

<!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>
    <img src="" alt="">

</body>

</html>

使用img标签向网页引入一个外部图片，（掌握4个属性）

5.2、图片格式

图片的格式

JPEG（JPG）

颜色比较丰富，一般保存照片

GIF

颜色较少，一般保存动图

PNG

显示效果好，网页专用，支持颜色多，内存大，不支持动图，支持透明

webp

什么都好，缺点：兼容性不好

base64

将图片转成字符，图片以字符形式出现，一般都是需要和网页一起加载的图片才会使用

图片使用规则：

效果不一致，效果优先

效果一致的，使用小的

六、音视频

<!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>
    <audio src=""> controls autoplay loop</audio>
    <video src=""></video>
</body>

</html>

audio标签用来向页面中引入一个外部音频文件

video标签用来向页面中引入一个视频，使用方式跟音频基本一样

src 引入音视频路径

controls 控制用户是否可以播放，默认不能播放

autoplay 自动播放(基本废止)

loop 循环播放