HTML知识点整理(一)

2023-11-24 21:36:16

HTML

1 HTML

1.1 概念

HTML是最基础的网页开发语言，Hyper Text Markup Language超文本标记语言

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：由标签构成的语言，使用标签的方法将需要的内容包括起来。<标签名称>如html,xml

注：标记语言不是编程语言

1.2 HTML功能

网页内容包含:HTML代码、CSS代码、JavaScript代码等内容

HTML代码：用于搭建基础网页，展示页面的内容、需要显示的数据。
CSS代码：用于美化页面，布局页面，使显示的数据更加好看。
JavaScript代码：控制页面的元素，让页面有一些动态的效果。

网页根据内容是否可以改变分为：静态页面、动态页面。

静态页面：使用静态网页开发技术发布的资源

特点：
- 编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
- 所有用户访问，得到的结果是一样的。
- 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
动态页面：使用动态网页及时发布的资源

特点：
- 编会根据不同的情况展示不同的内容。例如：登陆成功后右上角显示用户名
- 所有用户访问，得到的结果可能不一样。
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

注：HTML是部署在服务器上，运行在浏览器上

1.3 Web三要素

浏览器：向服务器发起请求，下载服务器中的网页(HTML),然后执行HTML显示出内容。
服务器：接受浏览器的请求，发送相应的页面到浏览器。
HTTP协议：浏览器与服务器的通讯协议

2 网站信息页面显示

2.1 HTML语言特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是：*.html或
*.htm
HTML结构都是由标签组成
- 标签名预先定义好的，只需要了解其功能即可
- 标签名不区分大小写，建议使用小写。
- 围堵标签:通常情况下标签由开始标签和结束标签组成。例如：<a></a>
- 自闭和标签：如果没有结束标签，建议以/结尾。例如<img/>
- 标签可以嵌套，例如：<a><b></b></a>
- 在开始标签中可以定义属性。属性是由键值对构成，值需要用引导(单双都可)引起来。
HTML结构包括两部分：头head和体body

2.2 创建模板

创建文本文档，并重命名为"00.模板.html";
右键/打开方式/记事本，开发html文件，编写内容如下：

<!-- 创建HTML⽂档 -->
<!DOCTYPE html>
<html>
    <head>
        <title>这是标题</title>
        <meta charset="UTF-8">
    </head>
    <body>
        这⾥是正⽂
    </body>
</html>

以上使⽤标签组成了HTML⻚⾯的基本结构，现将所有标签进⾏陈述：

<html> 整个⻚⾯的根标签，理论上⼀个⻚⾯只需要⼀个，由头和体组成。
- <head> 头标签，⽤于引⼊脚本、导⼊样式、提供元信息等。⼀般情况下头标签的内容在浏览器端都不显示。
  - <title> ⼦标签，⽤于定义⽂档的标题。
  - <meta> ⼦标签，提供关于HTML⽂档的元数据。⽤于规定⻚⾯的描述、关键词、⽂档作者、最后修改时间以及其他元数据。
    
    常⽤属性：content、http-equiv、charset。
- <body> 体标签，是整个⽹⻚的主体，我们编写的html代码基本都在此标签体内。

在模版代码中，我们使⽤到了HTML注释

格式：
注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊⽤法，为不同的浏览器提供不同的解决⽅案（了解）

2.3HTML文档类型

为浏览器提供⼀项信息（声明），即HTML是⽤什么版本编写的。
<!DOCTYPE html>

2.4文本标签

<h1></h1> ：标题标签
<thr /> ：展示⼀条⽔平线
<font></font> ：字体标签
<b></b> ：字体加粗
<i></i> ：字体斜体
<p></p> ：段落标签
<br /> ：换⾏标签

标题标签： <h1> to <h6>

HTML提供系列标签，⽤于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1>定义最⼤的标题。<h6>定义最⼩的标题。
分割线标签：<hr>

<hr />标签在HTML⻚⾯中创建⼀条⽔平分割线，⽤于定义内容中的主题变化。

size属性：⽔平线的⾼度，单位像素
noshade属性：没有阴影，取值:noshade，表示显示纯⾊。
color属性：颜⾊
width属性：宽度
- 数值：width=‘20’ ，数值的单位，默认是 px(像素)
- 数值%：占⽐相对于⽗元素的⽐例
align属性：对其⽅式，取值：
center：居中
left：左对⻬
right：右对⻬

字体标签:<font>

<font>用于设置字体尺寸、字体颜色等。

size属性：设置字体大小。可能的值：从1到7的数字，浏览器默认值是5。
color属性：设置字体的颜⾊。颜⾊的取值：
- 英⽂单词：red，green，blue
- rgb(值1，值2，值3)：值的范围：0~255。如：rgb(0,0,255)
- #值1值2值3：值的范围：00~FF之间。如： #FF00FF，也可简化为：#F0F
face属性：字体

格式化标签：<b>、<i>

<b>:字体加粗
<i>:字体斜体

<strong>也可以将字体加粗

段落标签：<p><br />

<p>定义段落。p标签会⾃动在其前后创建⼀些空⽩。

<br />插⼊单个换⾏。

实体引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<!-- 段落 特点：自动换行，p与p之间会有留白 -->
		<p>Lorem ipsum dolor sit amet, <br />
		<!-- 手动换行 br --> <!-- 特殊字符，例如 空格,<,>...需要使用实体字符 格式：&xx; -->
		consectetur  &nbsp;&nbsp;&nbsp; &lt; a &gt;  adipisicing elit. Ad harum?</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt adipisci?</p>
		
		<!-- 字体 可以设置字体的大小(size) 字体的颜色(color) 字体的样式(face) -->
		<font color="#ff0000">  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate! </font><br>
		<font color="red"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate! </font><br>
		<font color="#f00"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate! </font><br>
		<font color="#55aaff"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate! </font><br>
		<font color="#349dff"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate! </font><br>
		<font color="#5555ff"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate! </font><br>
		
		<!-- 3.特殊字体标签 -->
		<!-- 加粗b，变斜i，下划线u -->
		<b>Lorem ipsum dolor sit amet.</b>
		<i>Lorem ipsum dolor sit amet.</i>
		<u>Lorem ipsum dolor sit amet.</u>
		<b><i>Lorem ipsum dolor sit amet.</i></b><br>
		<!-- 加粗 strong -->
		<strong>Lorem ipsum dolor sit amet.</strong>
		<!-- 强调：em-->
		<em>Lorem ipsum dolor sit amet.</em>
		
		<!-- 预设标签 -->
		<pre>
			离离原上草
			一岁一枯荣
		</pre>
		
		<!-- 分割符号hr 属性名与属性值一致时可以省略属性值 -->
		<hr size="2" width="50%" align="center" />
		<hr size="7"  noshade="noshade" width="200xp" align="left" />
		<hr size="7"  noshade width="200xp" align="left" />
	</body>
</html>

3 网站图片页面显示

3.1 多媒体标签

图⽚标签：<img>

<img>在html⻚⾯中引⽤⼀张图⽚。
src属性：指定需要显示图⽚的URL（路径）
width属性：设置图像的宽度
height属性：设置图像的⾼度
alt属性：图⽚⽆法显示时的替代⽂本
title属性：⿏标移上图⽚时显示的标题

视频标签：<video>；⾳频标签：<audio>

<video>在html⻚⾯中加⼊⼀个视频；<audio>在html⻚⾯中添加⼀段⾳乐。

controls属性：添加视频控制插件
loop属性：循环播放
autoplay属性：⾃动播放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多媒体标签</title><!-- 不会自动换行 -->
	</head>
	<body>
		<!-- 属性src必须写上  width height 改变图片的宽高，如果只改变一个则将图片等比缩放 
		title 鼠标悬停时显示出的文字
		alt 图片加载不出来时显示的文字，如果没有alt则显示title-->
		<img src="../img/logo2.png"  />
		<img width="100%" src="../img/1.jpg" title="一张图片"/ alt="显示图片">
		
		<!-- 2.视频标签 h5
		 属性：controls 视频播放
		 loop 循环播放
		 autoplay 自动播放
		 <video width="100%" src="../vedio/大地的裂变.mp4" controls loop autoplay></video>-->
		 <!-- source设置一个视频资源列表，顺序播放第一个视频，如果第一个视频文件有问题，可以选择播放下一个视频 -->
		 <video width="100%" controls>
			 <source src="../vedio/Puella%20Magi%20Madoka%20Magica%20The%20Movie%20Part%203%20Hangyaku%20no%20Monogatari%20-%20NCOP%20(BD%201280x720%20AVC%20AACx2%20%5B2.0+5.1%5D).mp4"></source>
			 <source src="../vedio/大地的裂变.mp4"></source>
		 </video>
		 
		 <!-- 音频文件标签 h5
		 不支持调整大小-->
		 <audio src="../vedio/未知%20-%20Angelic%20Remnant.MP3" controls autoplay loop></audio>
	</body>
</html>

<!-- 路径问题：
 1.绝对路径:盘符开始
	URI：统一资源路径
		/Users/bonnie/Java2106
	URL：统一资源路径 URL包含URI
	
相对路径
	相对目录
		.:当前目录
		..:上一级目录-->

网站列表显示

4.1 列表标签

列表标签：<ul><ol>

<ol>定义有序列表
- type：列表类型，取值：A、a、I、i、1等
<ul>定义⽆需列表
- type：符号的类型，取值：disc实⼼圆、square⽅块、circle空⼼圆
<li>定义列表项。是<ul>或<ol>的⼦标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<!-- 1.有序列表(带序号) 
		其中每一项li自动换行
		属性：start起始序号
			type 序号类型 1 a A i I-->
		<ol start="2" type="I">
			<li>苹果</li>
			<li>西瓜</li>
			<li>香蕉</li>
		</ol>
		
		<!-- 2.无序列表(没有序号) 属性:type 符号类型 circle disc(默认) square -->
		<ul type="square">
			<li>苹果</li>
			<li>西瓜</li>
			<li>香蕉</li>
		</ul>
	</body>
</html>

超链接标签：<a>

<a>标签是超链接，是在html⻚⾯提供⼀种可以访问其他位置的实现⽅式

href：⽤于确定需要显示⻚⾯的路径（URL）
target：确定以何种⽅式打开href所设置的⻚⾯。常⽤取值：_blank、_self等
- _blank 在新窗⼝中打开href确定的⻚⾯
- _self 默认。使⽤href确定的⻚⾯替换当前⻚⾯

锚点是⽂档中某⾏的⼀个记号

⽤于链接到⽂档中的某个位置
定义锚点：

<a name="anchorname1">锚点⼀</a>

链接到锚点：在锚点名前加上#

<a href="#anchorname1">回到锚点⼀</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!-- 1.超链接标签
			属性：href(必备) 链接地址 [url,相对路径]
				 target 打开方式[_blank _self] _blank:新增一个标签页显示 _self:自身标签页跳转到href路径下的页面
			404 : not found 资源未找到-->
		<a href="http://www.bilibili.com" target="_blank">bilibili</a>
		<a href="列表标签.html" target="_self">列表页面</a>
		
		<!-- 2.用a实现当前页面跳转
			准备锚点 <a name=""></a>
			进行跳转 href="#name"
			# ：就表示当前页面顶部-->
		<ul>
			<li><a href="#chap1"> 个人生活 </a></li>
			<li><a href="#chap2"> 情感经历 </a></li>
			<li><a href="#chap3"> 早年经历 </a></li>
			<li><a href="#chap4"> 著名作品 </a></li>
			<li><a href="#chap5"> 演艺经历 </a></li>
			<li><a href="#chap6"> 中年经历 </a></li>
		</ul>
		
		<p><a name="chap1">个人生活,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ea quas facilis excepturi corporis dignissimos nobis accusantium consequatur laboriosam ullam natus qui quis saepe. Nam accusantium sint iste unde labore nemo libero corporis dolor ducimus fugiat adipisci inventore tempore mollitia facere repellendus maxime nisi sit! Velit aperiam voluptas ex reiciendis quibusdam explicabo alias eveniet autem perferendis magnam omnis laudantium architecto et commodi vero tempora accusantium. Soluta voluptates velit atque libero sequi. Minima et asperiores fugiat blanditiis similique velit praesentium exercitationem dolores aperiam officia magni id ratione iure architecto ullam eius dolore cum dolor quam ipsam distinctio deserunt voluptate consequuntur reprehenderit./a></p>
		<p><a name="chap2">情感经历,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo qui labore ut suscipit tempora illum iste repudiandae aliquid dolorem maiores excepturi nobis fugiat doloribus provident praesentium! Laudantium maxime repellendus impedit sit eos sapiente facere consectetur temporibus autem laborum molestias dolorum quidem placeat eum quo optio delectus similique maiores sequi dolor distinctio dolorem ea odio deserunt cupiditate minima tempora officiis minus quia aperiam. Consectetur impedit repellendus accusamus quia sapiente veniam repudiandae distinctio totam nisi quos natus necessitatibus odio nam deserunt asperiores eveniet possimus assumenda perferendis nulla accusantium numquam modi consequatur cupiditate rem quod ducimus quam amet aliquid esse laudantium. Fugiat officiis.</a></p>
		<p><a name="chap3">早年经历,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia qui esse rerum quibusdam obcaecati pariatur cumque quidem excepturi fuga reiciendis. Sunt dolor debitis deserunt impedit mollitia modi sint magnam doloremque id deleniti architecto perferendis fugit alias numquam enim minima praesentium similique ex velit officia. Veritatis alias error id ducimus fuga nostrum rem voluptate quidem cum similique enim laborum repudiandae facilis iusto deleniti quos rerum at animi officia quae a dolores minima aliquid. Maiores voluptas ut porro aut veniam ad explicabo repudiandae praesentium minus veritatis doloribus pariatur mollitia consequatur expedita autem totam sint! Error sunt dolorem voluptatem quos laudantium libero harum.</a></p>
		<p><a name="chap4">著名作品,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex soluta officia cum reprehenderit vitae veniam debitis dignissimos sequi omnis magni. Provident unde sequi aliquam itaque expedita nihil tempora dicta autem blanditiis praesentium illum odit voluptatum placeat quidem nam modi dolorem deserunt nisi distinctio ut saepe repudiandae cum molestias eos repellendus? Totam quos assumenda debitis harum quam neque pariatur eaque rerum laudantium sunt animi dolor voluptatum omnis? Aperiam voluptatem maiores nobis officia dolorem. Recusandae at animi similique facilis dolores beatae inventore veniam quis voluptatibus a minus tenetur quidem ducimus odio fuga optio assumenda. Hic doloremque est aliquam quae sapiente et inventore!</a></p>
		<p><a name="chap5">演艺经历,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ea excepturi nisi illum facilis minus hic similique deleniti sint libero sit dolore quibusdam odit earum quia consectetur porro labore aperiam eius maxime. Doloribus ut officia reprehenderit libero maiores labore consequuntur ex perferendis impedit neque minima ad repellendus aut. Unde facere harum ipsum ullam ad dignissimos possimus quos animi non. Dolor harum nostrum in magni provident facere tempora soluta laboriosam numquam optio ratione atque praesentium magnam maiores sed error rem quia. Corporis facilis sint provident fugiat consequatur distinctio aliquid recusandae laboriosam hic! Fugit aut debitis nihil est nulla voluptatum quod rem.</a></p>
		<p><a name="chap6">中年经历,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus nobis alias error libero ipsum cumque. Facilis veritatis incidunt est iste eveniet ullam recusandae vel consequuntur nobis laudantium officia repellat delectus neque fugit qui eligendi nihil debitis nisi ut itaque laboriosam dolores cumque. Adipisci sed incidunt laborum aut magni neque vitae quas quisquam animi labore? Sequi consequatur saepe consectetur vero a quia nulla eligendi vitae culpa exercitationem velit expedita sed dolorem vel itaque deserunt autem temporibus non eaque iure excepturi rem neque nobis at tenetur hic totam id aspernatur sapiente dolore architecto eveniet ipsa minima sunt unde praesentium molestiae nisi nam!</a></p>
		
		<a href="#"> top </a>
	</body>
</html>

5 网站首页显示

5.1 表格标签

<table>
<tr>
<td>

表格标签：<table><tr><td>

HTML表格由<table>标签以及⼀个或多个<tr>、<th>或<td>标签组成。

<table>是⽗标签，相当于整个表格的容器。
- border：表格边框的宽度、样式
- width：表格的宽度
- cellpadding：单元边沿与其内容之间的空⽩
- cellspacing：单元格之间的空⽩
- bgcolor：表格的背景颜⾊
<tr>标签⽤于定义⾏
- align：对⻬⽅式
<td>标签⽤于定义表格的单元格（⼀个列）
- colspan：单元格可横跨的列数
- rowspan：单元格可横跨的⾏数
- align：单元格内容的⽔平对⻬⽅式，取值：left左、right右、center居中
- nowrap：单元格中的内容是否折⾏
<th>标签⽤于定义表头。单元格内的内容默认居中、加粗
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- 表格
			align="center" 改变的是表格整体的位置，使得整个表格居中
			width，height:表格的宽和高
			cellspacing:表格中内容和单元格之间的距离大小
			cellpadding:单元格之间的缝隙大小
			border：表格边框的大小-->
		<table border="1" cellpadding="10" cellspacing="0" align="center" width="400" height="300">
			<!-- 表的标题 -->
			<caption>学员信息</caption>
			<!-- 第一行:tr 表头
				属性: align:center 内容居中
					  bgcolor:背景颜色
				th: 自带加粗和居中的特点
				td：属性 colspan(合并列)
						rowspan(合并行)
				thead、tbody、tfoot没有任何意义
				-->
			<thead>
				<tr bgcolor="lightgrey">
					<th>序号</th>
					<th colspan="2">姓名</th><!-- colspan="2"(合并2列) -->
				</tr>
			</thead>
			<tbody>
			<tr>
				<td>1</td>
				<td rowspan="2">高町奈叶</td>
				<td>19</td>
			</tr>
			<tr>
				<td>2</td>
				<td>19</td>
			</tr>
			<tr>
				<td>3</td>
				<td>菲特</td>
				<td>19</td>
			</tr>
			<tr>
				<td>2</td>
				<td>八神疾风</td>
				<td>19</td>
			</tr>
			</tbody>
			<tfoot>
			</tfoot>
		</table>
	</body>
</html>

6 网站后台显示

6.1 分模块

框架标签：<frameset>

<frameset>标签，是多个窗⼝⻚⾯整合在⼀起的⼀个集合（框架集）。每⼀个⻚⾯（框架）都是单独⽂档，需要使⽤⼦标签<frame>来确定⻚⾯的位置。

<frameset>通过列和⾏来确定整体布局，使⽤cols确定列数，使⽤rows确定⾏数。

多个<frameset>可以嵌套使⽤。

<frameset> 和 <body> 两个不能共存
rows属性和cols属性取值：值1,值2,值3,……⼀个值表示⼀⾏（列），多值使⽤逗号分隔，值可以是10px、10%等，最后⼀个值如果不想计算可以使⽤*匹配剩余量。

框架⼦标签：<frame>

<frame>标签，⽤于设置<frameset>框架集合的⼀个⻚⾯（框架）。

src属性：确定⻚⾯的路径
noresize属性：框架分隔先不能移动
target属性：确定需要显示的⻚⾯在何处显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>整合</title>
	</head>
	<!-- 无body -->
		<frameset rows="10%,*">
			<frame src="分模块_header.html" noresize />
			<frameset cols="20%,*">
				<frame src="分模块_菜单.html" noresize />
				<frame src="分模块_主体部分.html" name="body" noresize />
			</frameset>
		</frameset>
</html>

头部分：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		header
	</body>
</html>

菜单部分：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li><a href="http://bilibili.com" target="body"> bilibili </a></li>
			<li><a href="案例分析3.html" target="body"> 首页页面 </a></li>
		</ul>
	</body>
</html>

主体部分：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

码农公寓