第一章 HTML基础 ① 笔记

小丫头爱打盹

已于 2024-04-07 10:11:48 修改

阅读量374

点赞数

分类专栏： # HTML+CSS 文章标签： html 前端 html5 css css3

于 2022-06-05 20:34:27 首次发布

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125133442

版权

HTML+CSS 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

第一章 HTML基础 ① 笔记

一、课程目标

1.掌握常用的HTML标签的使用

2.掌握CSS的用法

3.能熟练使用网页布局

二、本章重点

1.什么是HTML

2.HTML常用的标签

三、具体内容

3.1 HTML概述

3.1.1 什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包含一系列标签，通过这些标签可以将网络上的文档格式统一，是分散的Internet资源链接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方式将文本中的文字、图片与其他媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人类查找、索取信息提供了方便。

概念部分：
HTML hyper text markup language 超文本标记语言
超文本：超文本、音频、视频、图片等
标记性/描述性：用特定标签描述内容
标签：html、title、head、body、p、h1-h6、table、tr、td、form、ul、ol、dl、dt、dd...
编程语言的分类：
	描述型/解释型语言：html,xml
	编译型语言：c,c++,java,c#等

3.1.2 HTML的作用

主要有两个方面：①编写网页②开发网站

3.1.3 开发工具

四种不同的开发工具及方式：

(1) 记事本工具

①建记事本文件
②写html代码
③修改记事本文件的扩展名，将txt改为html
④用浏览器打开

(2)editplus(培训以后主要使用editplus来开发)

①打开editplus工具
②编写页面内容
③保存网页，注意选择文件编码
④使用浏览器打开网页

(3)hbuilder

①下载
② 新建项目
③新建html页面
④运行页面

(4)vscode

3.2 HTML基本结构

3.2.1 网页基本结构

(1)标签

单标签：<标签名 />
双标签：<标签名 > 内容 <标签名 />

(2)网页基本结构

<html>根标签
	<head>头标签
		<title></title>标题标签
	</head>
	<body>身体标签
	</body>
</html>

‘html’: 是网页的根标签，网页上所有的定义都要放在根标签中
‘head’: 定义网页的头部，用于对网页文档进行配置。里面可以写网页标题，引入css，引入js。
定义网页内容的字符编码。定义搜索引擎的相关内容。head中定义的内容不会直接
在浏览器窗口中呈现。
‘title’: 网页文档标题
'‘body’: 网页要呈现在浏览器主窗口的内容，全部写到body中。
电脑中的文件类型由后缀名决定，是widows处理文件的主要依据。
网页文件的类型：XXX.html 和 xxx.htm 的效果一样的。
我们的要求：就是在本地开发 xxx.html网页文件，然后运行于浏览器中。

(3)三种打开网页的方式

①双击网页触发默认浏览器打开。
②先打开浏览器，然后将网页拖入浏览器中。
③右键选中网页，选择打开方式，找到对应的浏览器打开。

(4)本地网址访问

本地文件协议
file:///E:/xxx.html
超文本传输协议
http://www.baidu.com
http://
https:// 加密协议
文件传输协议
ftp://xxx.xxx.xxx.xxx
ftp://192.168.21.28

3.2.2 HTML常用标签

(1)标签的格式

①需要使用<> 包起来
标签分为两类: 单标签、双标签
双标签：<标签名>标签体</标签名>
单标签： <标签名 />
② 标签必须闭合，标签名字字母都用小写
③必须正确的嵌套

(2)常用标签

① h1-h6 内容标题标签

<!-- h1--h6 标题标签 -->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!-- 标题标签只有 h1-h6没有其他的标题 -->
<h7>这是普通内容</h7>
<h8>这是普通内容</h8>
这是一个普通内容

运行结果如图 3.1 所示：
图 3.1 内容标题标签运行结果

图 3.1 内容标题标签运行结果

② p 段落标签、hr 分割线标签、br 换行标签

<!--p 段落、hr 分隔线、 br 换行 -->
<!--
p 段落 段落之间会有段间距
hr 分割线 段落之间有段间距
br 换行 每行之间没有间距
-->
<!--水平线 hr -->
<hr/>
<!--段落标签有段间距-->
<p>
这是一个段落内容
<p>
<p>
这是一个段落内容
</p>
<p>
这是一个段落内容
</p>
<hr/>
<!--换行标签：只是换行显示，没有段间距-->
这是一行文字<br/>
这是一行文字<br/>
这是一行文字<br/>

运行结果如下图 3.2 所示：
图 3.2 段落、分割、换行标签运行结果

图 3.2 段落、分割、换行标签运行结果

③ 图像标签

<img src="图片来源" alt="提示" width="宽度" height="高度" align="对齐方式"/>
src: 图片来源(相对路径或绝对路径)
alt:图片无法显示时的提示信息
width:宽度
height:高度
align:设置对齐方式，设置文字环绕效果

格式：<img src="" alt="" />
<!-- src : 写的就是图片的路径地址 alt:当图片加载失败时显示的内容 -->
<!-- 图像标签：向网页中插入图片 image-->
<!-- 思考：图片从哪来？本地，网络 -->
<!-- 1.绝对路径：从跟目录/盘符开始 -->
<!-- 2.相对路径:从当前位置出发 ————>目标文件到的位置 -->
<!-- ./ 代表当前目录 可以不写 -->
<!-- ../ 代表返回上级目录 -->
<!-- 3.引入网络图片 -->
<!-- 步骤：打开浏览器 --》找到想要的图片--》F12-左上角箭头---》点击想要的图片-
-》复制 src属性。 -->
<!--图片标签
img中src指明图片来源:
1.用相对路径的方式指明图片来源
2.用绝对路径的方式指明图片来源
-->
<!--相对引用: 图片与页面文件在同一位置-->
<img src="book01.jpg"/>
<img src="./book01.jpg"/>
<br/>
<!--相对引用:图片在页面的下级文件目录-->
<img src="img/a/book02.jpg"/>
<img src="./img/a/book02.jpg"/>
<br/>
<!--相对引用:图片在页面的上级目录-->
<!--
./ :表示当前文件位置
../ :表示上级目录
-->
<img src="../book03.jpg"/>
<img src="./../book03.jpg"/>
<!--
绝对引用: 表示使用绝对路径定位目标位置
1. 网络上的绝对路径,带服务器根地址的路径
http://www.baidu.com/xxx/aaa/qqq.jpg
2. 本地磁盘的绝对路径,带本地磁盘根盘符
d:/ftp_smx/qy151/book01.jpg
-->
<img width="400" height="300" src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F1217%2Fe940e897p00q2nwip00fwc000wa00ikm.png&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648022667&t=2d2683f27b680bf282e09b5eb05efe39"/>
<!--当图片无法显示的时候，用file协议-->
<img src="file:///D:/ftp_smx/QY151/demo2/1.jpg"/>
<img src="file:///d:/book03.jpg"/>

需要注意的问题，editplus新建页面之后一定要保存，确保文件是有完整路径的。不然无法使用相对引用关联目标资源。如图 3.3 文件未保存、图3.4 文件已保存。
图 3.3 文件未保存时的显示

图 3.3 文件未保存时的显示

图 3.4 文件已保存时的显示

④ 列表标签

有序列表 有序号的
无序列表 没有序号的
自定义列表
列表嵌套
注意的问题: ul,ol的二级节点必须是li 。不能是其他元素，li中可以嵌套其他内容

<!-- 有序列表 --><!-- ol和ul只控制是否有序，li才是列表 list -->
<!--
无序列表: 表示列表项之间没有特定次序
ul: unordered list ,无序列表
li: list item 列表项目
-->
<h1>你喜欢的水果?</h1>
<hr/>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>橘子</li>
<li>山楂</li>
</ul>
<hr/>
<!--有序列表: 列表项目有先后次序
ol: ordered list 有序列表
li: list item 列表项
-->
<h1>将大象放入冰箱有几个步骤？</h1>
<ol>
<li>将大象牵到冰箱旁边</li>
<li>打开冰箱门</li>
<li>将大象装入冰箱</li>
<li>关上冰箱门</li>
</ol>
<hr/>
<!--
自定义列表:
dl:definition list 自定义列表
dt:definition title 列表标题
dd:definition data 列表数据
介绍一个商品:
1.描述品牌:格力
2.描述价格:2000
3.描述产地:深圳
-->
<img src="kt.jpg" />
<dl>
<dt>商品品牌:</dt>
<dd>格力</dd>
<dt>商品价格:</dt>
<dd>2000元</dd>
<dt>商品产地:</dt>
<dd>深圳</dd>
</dl>
<hr>
<!--用列表嵌套，实现多级菜单-->
<!--一个月有几周，一周有几天-->
<ul>
<li>
一月份
<ul>
<li>第1周</li>
<li>第2周</li>
<li>第3周</li>
<li>第4周</li>
</ul>
</li>
<li>
二月份
<ul>
<li>第1周</li>
<li>第2周</li>
<li>第3周</li>
<li>第4周</li>
</ul>
</li>
<li>
三月份
<ul>
<li>第1周</li>
<li>第2周</li>
<li>第3周</li>
<li>第4周</li>
</ul>
</li>
</ul>

运行结果如图 3.5 所示：
图 3.5 列表标签运行结果

图 3.5 列表标签运行结果

⑤ a标签锚点

<a href="目标页面地址#锚点" target="目标窗口">内容</a>
href:链接的目标页面
target:指定页面打开的窗口
跳转页面
<a href="目标页面地址">链接显示的内容</a>
跳转锚点
<a href="#锚点名字">内容</a>
定义锚点
<a name="锚点名字">内容</a>

做超链接标签，跳转页面

<!-- 跳转网络地址 -->
<a href="http://www.baidu.com">百度</a>
<!-- 本地网页 -->
<a href="123.html">123.html</a>

运行结果如图 3.6 所示：
图 3.6 超链接标签运行结果

图 3.6 超链接标签运行结果 做锚点 锚标记锚记
概述： 使用命名锚点可以快速的链接到同一个网页或指定网页中的 某个位置返回顶部/底部侧边的导航栏

<!--
锚点的实现:
1.方式一:
使用a标签的name属性定义锚点:<a name="锚点名字">内容</a>
跳转到锚点: <a href="#锚点名字">内容</a>
2.使用任意标签的id属性定义锚点: <h1 id="锚点名字">内容</h1>
跳转到锚点: <a href="#锚点名字">内容</a>
-->
<!--
超链接标签:a
1. 跳转页面功能
a.跳转到网络中的某个页面
b.跳转到本地页面
2. 锚点的使用：跳转到某个页面的某个位置
a. 使用a标签的name属性设置锚点
b. 使用任意标签的id属性设置锚点
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com">京东</a>
<a href="http://www.taobao.com">淘宝</a>
<hr/>
<a href="test1.html">跳到test1</a>
<a href="test2.html">跳到test2</a>
<!--从第一个页面直接跳转到第二个页面的某个位置:跨页面跳转锚点-->
<a href="Noname2.html#junshi">访问咨询页面的军事新闻</a>

发邮件mailto

<a href="mailto:1423432@qq.com">发邮件</a>

通过超链接关联一个磁盘文件，下载功能（自己扩展）

<a href="本地文件">内容</a>

⑥ 文本标签 font字体 i斜体 b粗体 u下划线 sup上标 sub下标

<font size="大小" color="颜色" face="字体类型">字体内容</a>
i: italic 斜体
b: bold 粗体
u: underline 下划线
sup: 上标
sub: 下标

<font size="7" color="red" face="隶书">齐天大圣孙悟空</font><br/>
这是普通内容<br/>
<b>这是一个文字</b><br/>
<u>这是一个文字</u><br/>
<i>这是一个文字</i><br/>
<hr/>
X<sub>1</sub> + Y<sub>1</sub> = 24 <br/>
X<sub>1</sub><sup>2</sup> + Y<sub>1</sub><sup>2</sup> = 36 <br/>

运行结果如图 3.7 所示：
图 3.7 文本标签运行结果

图 3.7 文本标签运行结果

⑦ 音频audio，视频标签video

<audio src="" autoplay controls="controls"></audio>
<audio src="../新二神曲.mp3" autoplay controls="controls">
<source src="../111.mp3"></source>
<source src="../111.mp2"></source>
<source src="../111.flac"></source>
</audio>
<video src="../书法大师.mp4" autoplay controls="controls">
<source src="../111.mp4"></source>
<source src="../111.avi"></source>
<source src="../111.flv"></source>
</video>

多媒体audio
用法: <audio src="" ></audio>
说明:autoplay="autoplay",把音乐播放出来.
 	controls:表示可以控制音频.

⑧ table 表格

布局：三行三列 2行2列 1行10列…
caption：标题
table ：表格
tr：行，一个tr中嵌套几个td就是几列。每一行的列数都一样，除非单元格合并
td：单元格。内容写到td里。
th:单元格，但是一般用于表头，加粗居中

3.2.3 特殊字符

特殊字符及对应的实体名称如下图 3.8 、3.9 所示：
在这里插入图片描述

图 3.8 特殊字符

在这里插入图片描述

图 3.9 特殊字符所对应的实体名称

显示结果 描述 实体名称 实体编号
空格 &nbsp;
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号 &apos; (IE不支持) '
￠ 分 &cent; ¢
￡ 镑 &pound; £
￥ 日元 &yen; ¥
€ 欧元 &euro; €
§ 小节 &sect; §
© 版权 &copy; ©
® 注册商标 &reg; ®
™ 商标 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

四、本章总结

html的概念：
html的作用：
html的基本结构：
html的常用标签：
h1-h6
p br hr
img
绝对/相对
ul ol li dl dt dd
font i b u sub sup
a
超链接，锚点，发邮件，下载
音频，视频
表格
特殊字符

小丫头爱打盹

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第一章 HTML基础 ① 笔记

3.2HTML基本结构3.2.1网页基本结构(1)标签(2)网页基本结构(3)三种打开网页的方式(4)本地网址访问3.2.2 HTML常用标签(1)标签的格式(2)常用标签h1-h6内容标题标签②p段落标签、hr分割线标签、br换行标签③图像标签④列表标签⑤a标签锚点文本标签font字体i斜体b粗体u下划线sup上标⑦音频audio，视频标签video⑧table表格3.2.3特殊字符...
复制链接

扫一扫