本文详细介绍了HTML的基础知识，包括HTML5的声明、元数据设置、常用标签如标题、段落、链接、图片、列表、内联框架、音视频播放的使用方法，以及CSS的样式设置方式。内容涵盖了HTML结构、样式控制和交互功能，是学习HTML入门的全面指南。
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言
笔记–网页源代码：
<!Doctype HTML> <!-- 告诉浏览器是HTML5版本-->
<br lang="zg">
<!-- html的根标签(元素),网页中的所有内容都要写在根元素当中-->
<html>
<head>
<!-- meta标签用来设置网页的元数据,设置网页的字符集，避免乱码问题-->
<meta charset="utf-8">
<title>Arthur`s note</title>
<meta name="keywords" content="HTML 笔记">
<meta name="description" content="这是Arthur的笔记">
<link rel="stylesheet" href="./style.css">
</head>
<!-- body是HTML的子元素,表示网页的主体,网页中所有可见内容都应该写在body里-->
<!--h1 网页的一级标题 -->
<h1>Notes</h1>
<!-- 注释，标签一般成对出现，但是也存在一些自结束标签
<img />
<input />
-->
<h1>1.标签的属性 </h1>
<h>可以改变字体<font color="red" >颜色 </font> <font size = 5>大小 </font>等</h>
<h1>2.实体 </h1>
<br>
<br>实体的语法：</br>
& + "nbsp" ：空格;
<br>& + "gt"：大于号;</br>
& + "lt"：小于号;
<br>& + "copy"：版本符号.</br>
</p>
<P>今天 的天气真好</P>
<p>a<b>c</p>
<h1>3.meta标签</h1>
<br>
<br><strong>meta主要用于设置网页中的一些元数据，元数据不给用户看</strong></br>
<strong>charset</strong> 指定网页的字符集
<br><strong>name</strong> 指定数据的名称</br>
<strong>content</strong> 指定数据的内容
<br></br>
<br>
keywords 表示网站的关键字，可以同时使用多个关键字
meta name="keywords"
content="HTML 笔记"</br>
<br> description 用于指定网站的描述
meta name="description"
content="这是Arthur的笔记"</br>
<br>http-equiv将页面重定向
meta http-equiv = "refresh" content = "3; url=http://baidu.com"</br>
</p>
<!--
在网页中，HTML专门负责网页的结构
标题标签：
h1~h6 一共有六级标题
一般一个网页只会有一个h1标签，h1~h3标签常用
-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<br>
<br>p标签表示一个段落</br>
em标签 表示语气加重
<br>strong标签 表示强调重要的内容</br>
blockquote标签 表示一个长引用
<br>q标签 表示一个短引用</br>
br标签 表示换行
<br>b标签 表示字体加粗</br>
</p>
<br></br>
<p>p标签中的内容表示一个段落</p>
<p>p标签的内容表示<em>一个</em>段落</p>
<p>p标签的内容表示<strong>一个</strong>段落</p>
<p>鲁迅说：<blockquote>我没说过这句话</blockquote></p>
<p>子曰：<q>逝者如斯夫</q></p>
<p>Hello!<br>How are you?<br></p>
<p><b>Fine.</b></p>
<br>
<h1><br>4.布局标签(结构化语义标签)</br></h1>
header 表示网页的头部
<br>main 表示网页的主体部分(一个页面只会有一个main)</br>
footer 表示网页的底部
<br>aside 表示和主体相关的其他内容</br>
nav 表示网页中的导航
<br>article 表示一个独立的文章</br>
section 表示一个独立的区块，上边的标签都不能表示时使用
<br><strong>div 没有语义，用来表示一个区块，目前div是主要使用的布局元素</strong></br>
span 行内元素，没有任何语义，一般用于在网页中选中文字
</p>
<h1>5.列表</h1>
<br>
<br>在html中，列表一共有三种：</br>
1.有序列表
<br>2.无序列表</br>
3.定义列表
<br></br>
<br>无序列表，使用ol标签来创建无序列表</br>
使用li表示列表项
<br>有序列表，使用ul标签来创建无序列表</br>
使用li表示列表项
<br>定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
<br>使用dd来对内容进行解释说明</br>
列表之间可以互相嵌套
</br>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构<dt>
<dd>结构表示网页的结构，结构用来规定网页中那里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中那里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</ul>
</li>
</ul>
<h1>6.超链接</h1>
<p>超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置</p>
<br><strong>使用a标签来定义超链接</strong></br>
<strong>href 指定跳转的目标路径;超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素</strong>
<br><br>
<a href = "https://www.baidu.com" taget = _self>超链接</a>
<br><br>
<p>target属性，用来指定超链接打开的位置：
<br>_self 默认值，在当前页面中打开超链接
<br>_blank 在一个新的标签页中打开超链接
</p>
<br>在一个新的标签页中打开超链接
<a href = "https://blog.youkuaiyun.com/ChaseAug" target = _blank>超链接</a>
<br><br>
<p><strong>id属性(唯一不重复的)<br>
- 让每一个标签都可以添加一个id属性
<br>- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
</strong></p>
<a href="#bottom">去底部</a>
<p><strong>可以将超链接的href属性设置为#，可以实现回到顶部的功能</strong></p>
<a id = "bottom" href = "#">回到顶部</a>
<br><p>使用javascript:;来作为href属性，此时点击这个超链接什么也不会发生</p>
<br><a href = "javascript:;">这是一个占位超链接，无功能</a>
<h1>7.图片标签</h1>
<p>
<br>图片标签用于向当前页面引入一个外部图片
<br>使用img标签来引入外部图片，img图片是一个字节数标签
<br>img这种元素属于替换元素(块和行内元素之间，具有两种元素的特点)
<br> <strong>属性：</strong>
<br>src 属性指定的是外部图片的路径(分为绝对路径和相对路径)
<br><br>
alt 属性是对图片的描述，这个描述默认情况下不会显示，有些浏览器在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片
<br><br>
width 代表图片的宽度(单位是像素)
<br>height 代表图片的高度
- 宽度和高度如果只修改了一个，则另一个会等比例缩放
</p>
<img width = 200 src="https://img2.baidu.com/it/u=2284144679,1517449611&fm=26&fmt=auto&gp=0.jpg" alt = "kobe">
<h1>8.内联框架</h1>
<p><strong>内联框架，用于向当前页面中引入一个其他页面</strong>
<br> src 指定要引入的网页路径
<br> framborder 指定内联框架的边框
<br><br>
<iframe src="https://www.qq.com" width="800" height="600" frameborder = "0"></iframe>
</p>
<h1>9.音视频播放</h1>
<p>
<br><strong>audio 标签用来向页面引入一个外部的音频文件
<br>音视频文件引入时，默认情况下不允许用户自己控制播放停止;
</strong>
<br>属性：
<br> controls 是否允许用户控制播放
<br> autoplay音频文件是否自动播放
<br> loop 是否循环播放
<br>
<audio src="./testmusic.mp3" controls></audio>
<br><strong>vedio 标签用来引入视频文件</strong>
<br>
<br> controls 是否允许用户控制播放
<br> autoplay音频文件是否自动播放
<br> loop 是否循环播放
<br><video width = 400 src ="./84655077-1-192.mp4" controls ></video>
<br>
<iframe width = 500 hight = 500 src="//player.bilibili.com/player.html?aid=462097911&bvid=BV1SL411n7gs&cid=380696662&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<br>
</p>
<h1>CSS简介</h1>
<p>
<br>使用CSS来修改元素的样式：
<br>第一种方式(内联样式，行内样式)
<br> -在标签内部通过style属性来设置元素样式
<br><br>
第二种方式(内部样式表)
<br> -将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式
<br> -内部样式表更加方便对样式进行复用
<br><br>
第三种方式(外部样式表) 最佳
<br> -可以将css样式编写到一个外部的css文件中，然后通过link标签进行引入外部css文件
<br> -外部样式表需要通过link标签进行引
入，这样可以使样式在不同页面之间进行复用，节约开发时间;
<br> -将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验;
<!-- <br><link rel="styleheet" href="./style.css"> -->
<br><special>Everything is possibl！</special>
</p>
</body>
</html>
1.标签的属性
可以改变字体颜色 大小 等
2.实体
实体的语法：
& + “nbsp” ：空格;
& + “gt”：大于号;
& + “lt”：小于号;
& + “copy”：版本符号.
今天 的天气真好
a < b > c
3.meta标签
meta主要用于设置网页中的一些元数据，元数据不给用户看
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
keywords 表示网站的关键字，可以同时使用多个关键字 meta name=“keywords” content=“HTML 笔记”
description 用于指定网站的描述 meta name=“description” content=“这是Arthur的笔记”
http-equiv将页面重定向 meta http-equiv = “refresh” content = “3; url=http://baidu.com”
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
p标签表示一个段落
em标签 表示语气加重
strong标签 表示强调重要的内容
blockquote标签 表示一个长引用
q标签 表示一个短引用
br标签 表示换行
b标签 表示字体加粗
p标签中的内容表示一个段落
p标签的内容表示一个段落
p标签的内容表示一个段落
鲁迅说：
我没说过这句话
子曰：逝者如斯夫
Hello!
How are you?
Fine.
4.布局标签(结构化语义标签)
header 表示网页的头部
main 表示网页的主体部分(一个页面只会有一个main)
footer 表示网页的底部
aside 表示和主体相关的其他内容
nav 表示网页中的导航
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用
div 没有语义，用来表示一个区块，目前div是主要使用的布局元素
span 行内元素，没有任何语义，一般用于在网页中选中文字
5.列表
在html中，列表一共有三种：
1.有序列表
2.无序列表
3.定义列表
无序列表，使用ol标签来创建无序列表
使用li表示列表项
有序列表，使用ul标签来创建无序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表 使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
结构
表现
行为
结构
表现
行为
结构
结构表示网页的结构，结构用来规定网页中那里是标题，哪里是段落
结构表示网页的结构，结构用来规定网页中那里是标题，哪里是段落
aa
aa-1
aa-2
aa-1
aa-2
6.超链接
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置
使用a标签来定义超链接
href 指定跳转的目标路径;超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
超链接
target属性，用来指定超链接打开的位置：
_self 默认值，在当前页面中打开超链接
_blank 在一个新的标签页中打开超链接
在一个新的标签页中打开超链接 超链接
id属性(唯一不重复的)
- 让每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
去底部
可以将超链接的href属性设置为#，可以实现回到顶部的功能
回到顶部
使用javascript:;来作为href属性，此时点击这个超链接什么也不会发生
这是一个占位超链接，无功能
7.图片标签
图片标签用于向当前页面引入一个外部图片
使用img标签来引入外部图片，img图片是一个字节数标签
img这种元素属于替换元素(块和行内元素之间，具有两种元素的特点)
属性：
src 属性指定的是外部图片的路径(分为绝对路径和相对路径)
alt 属性是对图片的描述，这个描述默认情况下不会显示，有些浏览器在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片
width 代表图片的宽度(单位是像素)
height 代表图片的高度 - 宽度和高度如果只修改了一个，则另一个会等比例缩放
kobe
8.内联框架
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页路径
framborder 指定内联框架的边框
width和height可以控制窗口大小
9.音视频播放
audio 标签用来向页面引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止;
属性：
controls 是否允许用户控制播放
autoplay音频文件是否自动播放
loop 是否循环播放
vedio 标签用来引入视频文件
controls 是否允许用户控制播放
autoplay音频文件是否自动播放
loop 是否循环播放
扫一扫
2550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
