我的HTML学习笔记（二）

最新推荐文章于 2023-07-24 00:15:30 发布

比尔盖茨接班人班长

最新推荐文章于 2023-07-24 00:15:30 发布

阅读量292

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/m0_56424512/article/details/127909967

版权

我的html基础学习笔记

摘要由CSDN通过智能技术生成

01.结构标签

html 搭建网页的结构

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

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>
    <!-- html 搭建网页的结构
     大部分的网站  头部 主体  底部  导航  文章等等
    -->
<!-- html5  新增的标签，语义化更强 网站的性能也会更好-->

    <!-- 布局标签（结构化标签） 用来布局的标签都是块元素
    header  网页的头部
    main  网页的主体部分（一般就一个）
    footer 网页的底部
    nav  网页的导航
    aside  和主体相关的内容，侧边栏
    article  文章之类的
    section 独立的区块，上面的标签都不合适，就用这个  ,
        用来代替div
-->
<header></header>
<main></main>
<footer></footer>    
<nav></nav>
<aside></aside>
<article></article>
<section></section>






</body>
</html>

02.行内与块元素

元素分类

块元素（block element）用来布局

特点：

1.会独占一行

2.块元素的宽度默认情况下是浏览器视口的百分百

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

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

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

特点：

1.不会独占一行

常用行内元素：span.strong.em.del

行内块元素

特点：

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

常用行内块元素：img

注意：

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>
    <!-- 
        元素分类
        块元素（block element）用来布局
        特点：
        1.会独占一行
        2.块元素的宽度默认情况下是浏览器视口的百分百
        3.默认情况下，块元素的高度是被内容撑开的
        常用块元素：div.p.h1-h6.header.main.footer.nav
        行内元素（inline element）用来包裹文字
        特点：
        1.不会独占一行
        常用行内元素：span.strong.em.del

        行内块元素
        特点：
        兼具块元素和行内元素的特点
        常用行内块元素：img
        注意：
        1.块元素主要用来布局，里面可以放任何元素，块元素，行内元素，行内块元素
        2.行内元素主要用来包裹文字，一般情况下不能放块元素
        3.p标签是特殊的块元素，他里面不能放块元素
        4.a标签是个特殊的行内元素他里面什么都能放

     -->
     <div>光斯想日未瞠实，皇。</div>
    
</body>
</html>

03.列表标签

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

就可以用列表

列表（list）一组一组

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

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

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

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

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

注意：

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

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

ol 他的项目符号:1，a，A。I等

ul 他的默认项目符号是阿拉伯数字，实心的圆

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3，默认样式，li有项目符号，上下外边距，左内边距，上下左右有间距

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

5.ol li

ul li

dl dt dd

都是配套使用

<!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>
    <!-- 
        列表：如果页面中，出现结构，样式，功能等都比较雷同的部分
        就可以用列表


        列表（list）一组一组
        1：有序列表   用ol创建列表  li表示列表项
        2：无序列表   用ul创建列表  li表示列表项
              disc，默认值，实心的圆点
              square，实心的方块
              circle，空心的圆
        3：定义列表   用dl创建列表,dt表示下定义，dd表示对定义的解释
        类似：大列表里面有就很多小列表，每个列表都有标题，都有对应的解释
        注意：
        1，列表之间是可以互相嵌套的，ul，ol，li是块元素
        2，可以使用type属性  更改项目符号
        ol 他的项目符号:1，a，A。I等
        ul 他的默认项目符号是阿拉伯数字，实心的圆
            disc，默认值，实心的圆点
            square，实心的方块
            circle，空心的圆
        3，默认样式，li有项目符号，上下外边距，左内边距，上下左右有间距
        4.最常用的ol，ul，实际使用中，一般不做有无顺序区分
        5.ol  li
          ul  li
          dl  dt  dd
          都是配套使用


     -->
     <h1>我最喜欢的三件事</h1>
     <ol>
         <li>刷牙</li>
         <li>洗脸</li>
         <li>吃饭</li>

     </ol>
     <ul>
        <li>刷牙</li>
        <li>洗脸</li>
        <li>吃饭</li>

     </ul>
    <dl>
        <dt>下定义</dt>
        <dd>网页三剑客</dd>
        <dd>vue2/ve3</dd>
        <dd>react</dd>

        <dt>下定义</dt>
        <dd>网页三剑客</dd>
        <dd>vue2/ve3</dd>
        <dd>react</dd>


    </dl>
</body>
</html>

04.超链接

html 超文本语言 -->

<!--

超链接：可以是任何内容

是一个特殊的行内元素，可以包括任何元素，除了他本身

功能: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>
    <!-- html 超文本语言 -->
    <!-- 超链接:2个功能，2个属性，1个补充 -->
    <!-- 
        超链接：可以是任何内容
              是一个特殊的行内元素，可以包括任何元素，除了他本身
        功能:1.从一个页面跳到另一个页面
             2.在当前页面跳转（楼梯导航/锚点功能）
             3.下载
        属性：href属性   指向跳转的地址
                      绝对地址：不管html文件在哪里，超链接去的地方是绝对的
                      相对地址：他的地址跟超链接的html文件的位置相关
                      ./ 当前目录下跳转  ./可省略，默认为./
                      ../跳出当前目录，来到上一级目录
                      注意：很多路径规则都是一样的，包括图片，音频视频
              target属性   指定超链接打开的方式
                     可选值：
                     _self  在当前页面打开超链接，一般情况下，默认这个
                     _blank  新开页面打开超链接
                     具体用哪种，根据项目需求来
                锚点功能实现：
                    去顶部：在href中属性值设置为#
                    去任意位置：  先给要去的位置打个标记 id属性=“id属性值”
                                 在href里填写标记 
                                 href里属性值为#id属性值
                           id属性值：  你起的名字
                             注意： 一般不以数字开头
                                   一般不用汉字
                                   不能重复使用
                补充：空链接的写法   
                <a href="#">空链接1</a>   
                <a href="javascript:;">空链接2</a>

        
 
     -->
     <a href="#">空链接1</a>
     <a href="javascript:;">空链接2</a>

   

     <a href=""></a>







    
</body>
</html>

05.图片标签

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

src alt width height

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片标签</title>
  </head>
  <body>
  <!-- 
			使用img标签来向网页中引入一个外部图片，（掌握4个属性）
      src  alt  width  height
	-->
  <!-- <img src="./img/gif/hz.gif" alt=""> -->
  <img src="../1116源码以及作业/hg.gif" alt="">
  <img src="" alt="">
  </body>
</html>

06.图片格式

图片的格式

JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

-->

<!-- 网页加载流程

第一次请求：加载网页本身

第二次之后请求，加载外部资源 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片标签</title>
  </head>
  <body>
    <!--
			图片的格式
				JPEG(JPG)
					- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
					- 一般用来保存照片等颜色丰富的图片
					
				GIF
					- GIF支持的颜色少，只支持简单的透明，支持动态图
					- 图片颜色单一或者是动态图时可以使用gif
				
				PNG
					- PNG支持的颜色多，并且支持复杂的透明，不支持动图
					- 可以用来显示颜色复杂的透明的图片
					  专为网页而生的

			    webp
				   -谷歌新推出的专门用来表示网页的一种格式
				   -它具有其他图片格式的所有优点，而且文件格式还很小
				   -缺点：兼容性不好
				   
				base64 
				   -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
				   -一般都是需要和网页一起加载的图片才会使用base64


			图片的使用原则：
				效果不一致，使用效果好的
				效果一致，使用小的
		-->
    <!-- 网页加载流程
		       第一次请求：加载网页本身
			   第二次之后请求，加载外部资源 -->
  </body>
</html>

07.音视频

audio标签

用来向页面中引入一个外部的音频文件 -->

<!--

src 引入音视频的路径

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

autoplay 自动播放（基本被废止，也是考虑到用户的体验，除了ie9以下）

loop 循环播放

<!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标签 用来向页面中引入一个外部的音频文件 -->
    <!-- video标签来向页面中引入一个视频，使用方式跟音频基本上一样的 -->
    <!-- 
      src  引入音视频的路径
      controls   控制用户是否可以播放,默认是不能播放
      autoplay  自动播放   （基本被废止，也是考虑到用户的体验，除了ie9以下）
      loop     循环播放
     -->
     <audio src="./source/达拉崩吧.mp3" controls autoplay loop></audio>
     <video src="./source/绝地逢生.mp4" controls></video>
    
</body>
</html>