Web：HTML的使用

最新推荐文章于 2022-09-19 17:03:16 发布

尔玉先生

最新推荐文章于 2022-09-19 17:03:16 发布

阅读量429

点赞数

分类专栏： Web 文章标签： html html5 web

本文链接：https://blog.csdn.net/weixin_44330955/article/details/108073771

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r4r8sI2E-1597722105641)(F:\JianShu_material\Web前端\图片\html的使用\HTML的使用.png)]$

1. HTML概述

1.1 HTML简介

HTML（Hypertext Markup Language）超文本标记语言
它负责网页的三个要素之中的结构
HTML使用标签的的形式来标识网页中的不同组成部分
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

1.2 HTML的标签(元素)、属性和注释

标签(元素)

HTML中的标记指的就是标签，也叫做元素
HTML使用标记标签来描述网页
标签分为两种：成对出现标签与自结束标签

成对出现标签：<标签名>标签内容</标签名>
自结束标签：<标签名/>

属性

可以为HTML标签设置属性
通过属性为HTML元素提供附加信息
属性需要设置在开始标签或自结束标签中
属性总是以名称/值对的形式出现
比如：name=“value”
有些属性可以是任意值，有些则必须是指定值

<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />

注释

HTML注释中的内容不会在网页中显示
HTML中注释不能嵌套

<!-- 注释内容 -->

1.3 HTML固定结构

在编写HTML时，不能随意的进行编写，HTML有着其固定结构，每个HTML文件都有着这一固定内容：

文档声明：声明当前网页的版本
< html >：是根标签（元素），网页中的所有内容都要写根元素的里边，也用于告诉浏览器这个文档中包含的信息是用HTML编写的
< head >：是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
< title >：其中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容
< body >：是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

	<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
	<head>

		<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
		<meta charset="utf-8">
		
		<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
		<title>网页的标题</title>

	</head>

	<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
	<body>

		<!-- h1网页的一级标题 -->
		<h1>网页的大标题</h1>

	</body>

</html>

2. HTML的基本使用

2.1 实体(转义字符)

在HTML中有些时候，我们不能直接书写一些特殊符号

比如，当我们在网页中编写多个空格时，默认情况下会自动被浏览器解析为一个空格；当我们需要在字母两侧使用大于号和小于号时，可能会被识别为标签

因此如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体(转义字符)

实体的语法结构：&实体的名字;

例如：

&nbsp; 空格
&gt; 大于号
&lt; 小于号
&copy; 版权符号

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDdH7EDl-1597722105653)(F:\JianShu_material\Web前端\图片\html的使用\001.png)]$

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>test01</title>
</head>
<body>
    <p>这里有3个空格&nbsp;&nbsp;&nbsp;。</p>
    <p>a&lt;b&gt;c</p>
    <p>我有100&yen;</p>
</body>
</html>

2.2 meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的

mata标签的属性有：

设置页面的字符集：< meta charset=“utf-8” >
设置网页的描述：< meta name=“description” content="" >
设置网页的关键字：< meta name=“keywords” content="" >
请求的重定向：< meta http-equiv=“refresh” content=“5;url=地址”/ >

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="HTML5,前端,CSS3">
        <meta name="description" content="这是一个非常不错的网站">
        
        <title>前端之家</title>
    </head>

    <body>
        
    </body>
</html>

2.3 语义化标签

块元素与行内元素

块元素：在网页中一般通过块元素来对网页进行布局

行内元素：行内元素主要用来包裹文字

注意：

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本什么都能放
p元素中不能放任何的块元素

语义化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        标题标签 
        h1-h6一共有六级标题，重要性递减，h1最重要，h6最不重要
        一般情况下一个页面中只会有一个h1
        一般情况下标题标签只会使用h1-h3，h4-h6很少使用

        标题标签都是块元素
     -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 
        hgroup标签用来为标题分组，可以将一组相关标题同时放入hgroup
     -->
    <hgroup>
        <h1>静夜思</h1>
        <h2>李白</h2>
    </hgroup>

    <!-- 
        em标签用于表示语音语调的加重
        strong表示强调，重要内容
        blockquote表示一个长引用
        q表示一个短引用
        br表示页面中的换行
     -->
     <p>今天天气<em>真</em>不错！</p>
     <p>你今天必须<strong>完成作业</strong>！</p>
     鲁迅说：
     <blockquote>
         这不是我说的
     </blockquote>
     子曰
     <q>学而时习之，不亦乐乎</q>
     <br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        布局标签
     -->
     <!-- 
         header 表示网页的头部
         main 表示网页的主体部分（一个网页中只会有一个main）
         footer 表示网页的底部
         nav 表示网页的导航
         aside 和主体相关的其他内容（侧边栏）
         section 表示一个独立的区块，上边标签不能表示时使用section
         
         div 没有语义，就用来表示一个区块，目前div还是主要的布局元素
         span 行内元素，没有语义，一般用于在网页中选中文字
      -->
      <header></header>
      <main></main>
      <footer></footer>
      <nav></nav>
      <aside></aside>
      <article></article>
      <section></section>

      <div></div>
      <span></span>
</body>
</html>

2.4 列表

在html中可以创建列表，html列表一共有三种：有序列表、无序列表、定义列表
有序列表，使用ol标签来创建有序列表，使用li表示列表项
无序列表，使用ul标签来创建无序列表，使用li表示列表项
定义列表，使用dl标签来创建定义列表，使用dt来表示定义内容，使用dd来对内容进行解释说明
同种列表，不同列表之间可以相互嵌套

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

    <!-- 有序列表 -->
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中的内容</dd>
    </dl>

    <!-- 列表间的嵌套 -->
    <ul>
        <li>结构</li>
        <ul>
            <li>结构的作用</li>
        </ul>
    </ul>
</body>
</html>

2.5 超链接

超链接可以让我们从一个页面跳转到其它页面，或是当前页面的其他位置
使用a标签定义超链接，其属性href指定链接的目标路径
- 值可以是一个外部网站地址，即绝对路径
- 也可以是一个内部网页的地址，即相对路径
超链接是一个行内元素，在a标签中可以嵌套除它自身以外的任何元素
在超链接中还可以设置打开页面方式、跳转页面位置、页面占位符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        若在路径前加'./'，则代表当前目录下，不加时默认也为这种
        若在路径前加'../'，则代表当前目录的上一目录下
    -->
    <a href="https://www.baidu.com">超链接1</a>
    <a href="test05.html">超链接2</a>

    <!-- 
        tatget属性，用来指定超链接打开位置
        可选值：_self 默认值，在当前页面中打开超链接
               _blank 在一个新的页面中打开超链接
     -->
     <a href="https://www.baidu.com" target="_self">超链接3</a>
     <a href="https://www.baidu.com" target="_blank">超链接4</a>

     <!-- 
         id属性（唯一不重复的）
            1.每个标签都可以添加一个id属性
            2.id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

        可以通过id属性跳转到页面任意位置，设置href为#目标元素的id属性值
      -->
    <a href="#bottom">去指定位置标签</a>

    <!-- 可以将超链接的href属性设置为#，这样点击超链接后页面不发生跳转，而是转到当前页面的顶部位置 -->
    <a id="bottom" href="#">回到顶部</a>

    <!-- 
        在开发中，可以将javascript:;来作为超链接路径的占位符
        作为href的属性，此时点击这个超链接什么也不会发生
     -->
     <a href="javascript:;">这是一个空的超链接</a>
</body>
</html>

2.6 图片标签

图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img是一个自结束标签
img的属性有src、alt、width、height等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定外部图片的路径(路径规则与超链接相同)
        alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
            搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎收录
        
        width 图片的宽度(单位是像素)
        height 图片的高度(单位是像素)
     -->
     <img width='200'src="JavaIO流目录.png" alt="IO流">
     
</body>
</html>

2.7 内联框架

内联框架用于向当前页面中引入一个其他页面
有src、frameborder、width、height属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定要引入的网页的路径
        frameborder 指定内联框架的边框，0或1
        width 指定内联框架的宽
        height 指定内联框架的高
     -->
     <iframe width="800" height="600" src="https://www.qq.com" frameborder="0"></iframe>
</body>
</html>

2.8 音视频播放

音频

audio标签用来向页面中引入一个外部的音频文件
音频文件引入时，默认情况下不允许用户自己控制播放停止
有src、controls、autoplay、loop等属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定文件路径
        controls 是否允许用户控制播放
        autoplay 音频文件是否自动播放
        loop 音乐是否循环
     -->
     <audio src="音乐.mp3" controls autoplay loop></audio>

     <!-- 
         除了通过src来指定外部文件的路径外，还可以通过source来指定文件路径
      -->
      <audio controls>
          <source src="音乐.mp3">
      </audio>
</body>
</html>

视频

video标签用来向页面中引入一个外部的视频文件
video用法与audio基本相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src 指定文件路径
        controls 是否允许用户控制播放
        autoplay 视频文件是否自动播放
        loop 视频是否循环
     -->
    <video src="视频.mp4" controls autoplay loop></video>

    <video controls>
        <source src="视频.mp3">
    </video>
</body>
</html>

尔玉先生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web：HTML的使用

1. HTML概述1.1 HTML简介HTML（Hypertext Markup Language）超文本标记语言它负责网页的三个要素之中的结构HTML使用标签的的形式来标识网页中的不同组成部分所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面1.2 HTML的标签(元素)、属性和注释标签(元素)HTML中的标记指的就是标签，也叫做元素HTML使用标记标签来描述网页标签分为两种：成对出现标签与自结束标签成对出现标签：<标签名>标签内容&lt.
复制链接

扫一扫