1.HTML基础内容_html创建下面的无序列表,应该使用的代码-CSDN博客

本文链接：https://blog.csdn.net/qq_52394518/article/details/120494601

本文档介绍了HTML的基础知识，包括HTML的结构、自结束标签、注释、标签属性、实体、元数据设置、行内元素与块元素的区别、语义化标签的使用，以及超链接、图片、音频和视频的插入方法。内容详细且实用，适合初学者复习和巩固。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 笔记

注：本文章为复习笔记，更多具体请参照文档，欢迎交流，指出错误，虚心请教
HTML 用于描述页面的结构

一个最基本的HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面名称</title>
	</head>
	<body>
	</body>
</html>

自结束标签和注释

标签一般成对出现，但是也存在一些自结束标签
<img>自结束标签
<p></p>成对标签

<!-- 我是注释
注释内容会被浏览器所忽略，不会在网页中直接显示，
但是可以在源码中查看注释
注释用来对代码进行解释说明的
注释还可以将一些不希望显示的内容隐藏
 -->

标签中的属性

在标签中，（开始标签或自结束标签）还可以设置属性
属性是一个名值对(x=y)
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写
有些属性有属性值，有些没有。如果有属性值属性值应该使用引号引起来

<h1>
	color是属性
	<font color="red">红色</font>red是属性值，红色
</h1>

在这里插入图片描述

实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一个特殊符号
比如：多个连续的空格，比如字母两侧的大于和小于号

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

meat标签

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

charset指定网页的字符集
name指定的数据名称
content指定的数据的内容

keywords表示网站的关键字，可以同时指定多个关键字，关键字用,隔开
用于引擎分类搜索
在这里插入图片描述
descripttion用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中

title标签的内容会作为搜索结果的超链接上的文字显示
<meta http-equiv="refresh" confent="3;url=https: //www.baidu.com">
将页面重定向到另一个网站

行内元素与块元素

块元素（block element)

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

行内元素（inline element)

行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素

语义化标签

<!--
        标题标签
        h1~h6 一共有六级标签
        从h1~h6重要性递减,h1最重要,h6最不重要
        h1在网页中的重要性仅次于title标签，一般情况下页面中只有一个h1
        在页面中独占一行的称为块元素
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

<p>段落标签,我也是块级元素</p>
`<hgroup>
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
    <h1>一级标签</h1>
    <h2>二级标题</h2>
</hgroup>`

<em>斜体标签</em>
em标签用于表示语音语调的一个加重不会独占一行的行内元素
<strong>重要内容强调</strong>
strong表示强调,重要内容!
<br>换行标签

区块的表示

<header>头部标签</header> 表示网页的头部
<main>主体部分</main> 表示网页的主体部分(一个网页中只会有一个main)
<footer>网页底部</footer>
<nav>导航</nav> 表示网页中的导航
<aside>侧边栏</aside> 和主体相关的其他内容(侧边栏)
<article></article> 表示一个独立的文章
<section></section>表示一个独立的区块，上边的标签都不能表示时使用section

主流表示

<div></div>没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
<span></span> 行内元素，没有任何的语义，一般用于在网页中选中文字

列表

在html中也可以创建列表，html列表一共有三种:

有序列表
无序列表
定义列表

无序列表，使用ul标签来创建无序列表
有序列表，使用ol标签来创建有序列表

使用li表示列表项

无序列表:
<ul>
   <li>结构</li>
   <li>表现</li>
   <li>行为</li>
</ul>
有序列表:
<ol>
   <li>结构</li>
   <li>表现</li>
   <li>行为</li>
</ol>

在这里插入图片描述

定义列表，使用dl标签来创建一个定义列表

使用dt表示定义的内容
使用dd来对内容进行解释说明

<dl>
  <dt>哇塞</dt>
  <dd>哇塞表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

在这里插入图片描述
列表之间可以互相嵌套

超链接 a

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
超链接也是一个行内元素，在a标签内可以嵌套任何元素

属性herf 指定跳转的目标路径
可以跳转到一个指定的网址也可以内部内面的地址

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

当我们需要跳转服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或…开头
./ 相当于当先文件所在目录
../
./可以省略不写，如果不写./也不写…/则就相当于写了./

<a href="./01index.html">百度</a>
<a href="../path/02index.html">百度</a>

target属性，用来指定找链接打开的位置
可选值

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

<a href="http://www.baidu.com" target='_blank'>百度</a>

可以直接将超链接的href属性设置为#，这样点击插链接以后
页面不会发生跳转，而是赚到当前页面的顶部位置

<a href="#">回到顶部</a>
// 没有任何功能的超链接
<a href="javascript:;">回到顶部</a>

图片图标

图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片,img标签是一个自结束标签
属性：

scr 属性指定的是外部图片的路径(路径规则和超链接一样的)
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示(图片显示不出来会加载字) 搜索引擎会根据alt中的内容来识别图片
width图片的宽度(单位是像素)
height图片的高度--------宽度和高度中如果只修改了一个，则另一个会等比例缩放
pc端不建议修改图片大小

<img src="./img/1.gif" alt="">
<!--
外部网站图片
-->
<img src="https://img2.baidu.com/it/u=3043039063,2684560819&fm=26&fmt=auto" alt="">

音视频播放器

audio 标签用来想页面中播放音频，如需在 HTML5 中播放音频，你需要使用以下代码：

<audio src="" controls autoplay loop></audio>

controls 是否允许用户控制播放
autoplay 音频文件是否自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
插入视频：

<video controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
</video>

与插入音频方法相似