前端学习总结1：HTML-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41907769/article/details/123317910

HTML文档的基本结构🤖

基本结构🤖

声明文档
html块
- head块
- body块

<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->	
<html>
	<!--
		head,头元素：
		作用：
		 1、用于指定HTML文章中的一些元数据，
		 	例如元数据 meta：定义页面的编码格式
		 		    title:定义页面的标题
		 2、引入外部的资源文件--未来讲解
	-->
	<head>
		<meta charset="utf-8" />
		<title>这是我的第一个HTML页面</title>
	</head>
	<!--body，主体：浏览器显示的内容都将在这里编写
		格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
	-->
	<body>
		hello html 这是我的第一个HTML页面
	</body>
</html>

HTML中常用标签🤖

文本标签🤖

标题标签h和段落标签p 🤖

h1–h6:字体逐渐缩小

p标签：

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

换行标签<br/>🤖

<p>为世间情为物,很难大彻大悟；</p>
<p><span style="color: red;">感情</span>上的事，真的不能过于盲目。</p>	
<p>为世间情为物,很难大彻大悟；<br/>感情上的事，真的不能过于盲目。</p>

水平线标签<hr/>🤖

一般用来分隔内容

范围标签<span>🤖

为了突出部分内容的时候使用的标签

图片标签🤖

<!--img  显示图片
	常用属性： src:指定图片的路径
	路径分类：相对路径：推荐使用
	例如：<img src="img/cat.jpg" /> 
		表示与当前文件同级的img文件夹下的cat.jpg图片
		../表示上一级目录
	<img src="../img/cat.jpg" />
		表示与当前文件上一级目录中的img文件夹下的cat.jpg图片
		绝对路径：不推荐使用
一般都是以盘符开头，例如：C:\Users\W-ln\Pictures\image
	title:作用1：鼠标悬浮在图片上的时候显示的文字
			2：当图片因为各种原因无法正常显示的时候，应该显示图片的位置显示title中的文字
	alt:与title作用相同，但是有些浏览器不支持该属性，所以我们一般使用title属性
	width和height：宽度和高度，设置之后图片可能会失真
-->
<img src="img/cat.jpg" title="服不服?" width="200px" height="300px"/>
<hr color="red" size="5" />

列表标签🤖

一般用在导航上

无序列表ul-li🤖

有序列表ol-li🤖

		<h1>3、列表标签：有序列表，无序标签</h1>
		<!--列表标签：有序列表，无序标签
			ul-li：无序列表，li标签可以有多个；推荐ul中只有li标签，如果需要嵌套，建议在li中完整嵌套
			ol-li: 有序列表，与无序列表功能意义，只是默认的样式不同，
					可以与无序列表相互替换（以后可以通过样式将两者调成意义）
		-->
		<ul>
			<!--<p>test</p>
				段落写在这里也可以显示，但是不符合规范
				HTML语言是弱语言类型，即使有些不规范的地方甚至是错误的地方也不影响浏览器的显示
				但是程序员不能弱（没有弱的语言，只有弱的程序员），所以大家尽量遵循规范
			-->
			<li>超时首页</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
		</ul>
		<ol>
			<li>超时首页</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
			<li>超值量贩</li>
		</ol>

定义描述标签🤖

一般用在图文混编的场景中

<!--dl-dt-dd:定义描述标签:
    dl:只是盛放dt和dd标签，不推荐盛放其他内容
    dt:一般用来盛放图片或者标签
    dd:一般用来补充对dt的描述与说明
-->

<dl>
    <dt>热销商品</dt>
    <dd>产品名称：小熊饼干</dd>
    <dd>价格：￥125.0</dd>
</dl>
<dl>
    <dt><img src="img/x1.jpg" /></dt>
    <dd>产品名称：小熊饼干</dd>
    <dd>价格：￥125.0</dd>
</dl>

布局标签层 div🤖

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局

标签分类🤖

html标签可以分为块状元素和行级元素两类

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。

块状元素和行内元素的区别：

1、块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。

2、块级元素可以设置宽高；行内元素设置宽高无效。

3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。

超链接🤖

超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能

页面间的跳转 🤖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<!--
        	a:超链接
        	作用1：跳转到其他资源
        	  属性： href="目标资源路径" //路径推荐相对路径
        	  	  target="打开资源的位置" 默认值：_self ---在当前页面打开
        	  	  					      常用值:_blank ---在新页面打开资源
        -->
        <a href="01-基本结构.html" target="_self">点击我试试</a>
	</body>
</html>

锚链接🤖

这个定位可以实现本页面间的锚链接，也可以实现不同页面间的锚链接

同页面之间的跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<!--
        	作用2：锚链接
        		步骤：1、目标位置定义锚点<a name="锚点名称"></a>
        			 2、超链接的href属性使用锚点<a href="#锚点名称" target="_self">锚链接</a>
        -->		
		<!-- 点击即可跳转-->
		<a href="#sport" target="_self">锚链接--点击我可以跳转到运动户外</a>
        
		<div style="height: 500px; background: lemonchiffon;">
			品牌热卖--设置高度，目的是让页面超过一屏
		</div>
		<div style="height: 500px; background: lavender;">
			奶制品--设置高度，目的是让页面超过一屏
		</div>
		<div style="height: 500px; background: lightblue;">
			宠物园艺--设置高度，目的是让页面超过一屏
		</div>
		
        <div style="height: 500px; background: lavenderblush;">
			<!--1、定义锚点，name自定义的-->
			<a name="sport"></a>
			运动户外--设置高度，目的是让页面超过一屏
		</div>
	</body>
</html>

不同页面的之间的跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="03-超链接2.html#sport2" target="_self">锚链接--点击我可以跳转到其他页面的运动户外</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接222222222222</title>
	</head>
	<body>
		<div style="height: 500px; background: lemonchiffon;">
			品牌热卖--设置高度，目的是让页面超过一屏
		</div>
		<div style="height: 500px; background: lavender;">
			奶制品--设置高度，目的是让页面超过一屏
		</div>
		<div style="height: 500px; background: lightblue;">
			宠物园艺--设置高度，目的是让页面超过一屏
		</div>
		<div style="height: 500px; background: lavenderblush;">
			<a name="sport2"></a><!--1、定义锚点，name自定义的-->
			运动户外--设置高度，目的是让页面超过一屏
		</div>
	</body>
</html>

表格标签🤖

规则表格🤖

tale标签定义表格

height：高度
width：宽度
border：边框
cellpadding：内容与单元格之间的距离
cellspacing：单元格和单元格之间的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格-规则表格</title>
	</head>
	<body>
		<!--table:定义表格
				常用属性：height：高度
						width：宽度
						border：边框
						cellpadding：内容与单元格之间的距离
						cellspacing：单元格和单元格之间的距离
						
		-->
		<table  border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
			<!--
				tr:定义行
					常用属性：
						align：文本水平方向上的对齐方式,
								有三个取值，默认left-左对齐  center-居中对齐  right-右对齐
			-->
			<tr>
				<!--
					th和td标签都用来定义单元格，
                	th：一般用来定义表头单元格，即做标题的那一行中的单元格   
                	td:一般用来定义非表头单元格，即除了标题正文内容的单元格
                	但是没有严格的限制
                	常用属性:valign:文本垂直方向上的对齐方式 ，top-顶部对齐 bottom-底部对齐 middle-垂直居中
                -->
				<th align="center">序号</th><th>商品名称</th><th>价格</th>
			</tr>
			<tr>
				<td>1</td><td valign="top"><img src="img/a.png"/></td><td>125</td>
			</tr>
			<tr>
				<td>2</td><td valign="bottom">Kitty饼干</td><td>96.0</td>
			</tr>
		</table>
	</body>
</html>

tr:定义行

align：文本水平方向上的对齐方式
默认left-左对齐 center-居中对齐 right-右对齐

th：一般用来定义表头单元格，即做标题的那一行中的单元格

td:一般用来定义非表头单元格，即除了标题正文内容的单元格

valign:文本垂直方向上的对齐方式，top-顶部对齐，bottom-底部对齐，middle-垂直居中

不规则表格🤖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>不规则表格</title>
	</head>
	<body>
		<!--
			单元格标签th和td中的常用属性：
				colspan：合并列
				rowspan：合并行
				类似Excel中的合并单元格。
		-->
		<table  border="1" cellpadding="0" cellspacing="0" height="300px" width="400px">
			<tr>
				<!--
					colspan="3" 意思是它要和合并包括自身在内的本行的三列单元格，
					所以本行后面的两个单元格的位置要被它占用，所以要删除后面两个单元格
				-->
				<td colspan="3"><h3>个人简历</h3></td><!-- <td></td><td></td> -->
			</tr>
			<tr>
				<!--
					rowspan="3" 意思是它要和合并包括自身在内的本列的三行单元格，
					所以本列后面两行的的同样位置的单元格的位置要被它占用，所以要删除后面两行的同位置的单元格
				-->
				<td>姓名:</td><td>贾宝玉</td><td rowspan="3">个人照片</td>
			</tr>
			<tr>
				<td>出生年月:</td><td>1998-6</td><!--<td></td>-->
			</tr>
			<tr>
				<td>电话:</td><td>137123456789</td><!--<td></td>-->
			</tr>
		</table>
	</body>
</html>

标题标签和逻辑分区标签🤖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格-高级标签</title>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="0" width="90%">
			<!--
            	caption:表格的标题
            	thead、tbody、tfoot都是逻辑分区的标签，没有编写样式之前对整体的结构没有任何的影响
            	PS：如果自己没有编写逻辑分区标签，浏览器默认把所有行放入tbody标签中，即table的子节点默认是tbody
            -->
			<caption>资产负债表</caption>
			<thead style="background: lavenderblush;">
				<tr>
					<th>月份</th><th>负债</th><th>资产</th>				
				</tr>
			</thead>
			<tbody  style="background: lightblue;">
				<tr>
					<td>1月份</td><td>10000</td><td>10000</td>		
				</tr>
				<tr>
					<td>2月份</td><td>150000</td><td>150000</td>		
				</tr>
				<tr>
					<td>3月份</td><td>50000</td><td>50000</td>			
				</tr>
			</tbody>
			<tfoot  style="background: khaki;">
				<tr>
					<td>总计</td><td>210000</td><td>210000</td>			
				</tr>
			</tfoot>
		</table>
	</body>
</html>

表单🤖

定义表单🤖

form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性	值	描述
action	指定提交数据的URL
method	get、post	get方式：请求参数会在地址栏中显示，不太安全，参数大小有限制 post方式：较为安全，参数大小没有限制
enctype		表单中有上传的文件的时候必备该属性且取值为multipart/form-data

添加表单项元素🤖

label：指定输入项的文字描述信息

注意：label的 for 属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

input：表单元素，其中的type属性的值不同，会出现不同的表现形

文本框： type="text",text也是input的默认值

id:表示元素的唯一标识，不推荐重复
name：表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取value
placeholder：文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失

<label for="userName">用户名：</label>

<input type="text" id="userName" name="userName" placeholder="请输入用户名"/><br />

密码框：type="password"，用户输入内容之后显示的是黑色实心圆，而不是明文显示内容

required：表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提示

<label for="password">密码：</label>

<input type="password" id="password" name="password" required/><br />

单选按钮: type="radio"。单选按钮都是成组出现，name相同的才表示一组，同组当中的按钮都互斥

value：服务器通过name获取到的值就是value
checked：表示默认选中；值可以省略，直接写一个属性名，也可以写checked=“checked”

性别：<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
<input type="radio" name="gender" value="未知"/>未知<br />

复选框: type="checkbox" 复选框都是成组出现，name相同的才表示一组，同组当中的复选框可以选多个

value：服务器通过name获取到的值就是value
checked：表示默认选中；值可以省略，直接写一个属性名，也可以写checked=“checked”

爱好：<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="NBA" />NBA
<input type="checkbox" name="hobby" value="movie" />电影
<input type="checkbox" name="hobby" value="music" />音乐<br />

文件域：文件上传 type="file"表单中如果有文件上传，表单中最好有enctype="multipart/form-data"

multiple属性：表示可以同时上传多个文件

头像：<input type="file" name="headImg" multiple="multiple"/><br />

邮箱-h5新特性： type="email"

multiple属性：表示可以同时写多个邮箱地址，中间用逗号隔开

邮箱：<input type="email" name="emain" multiple="multiple"/><br />

日期-h5新特性：

type="date" 表示年月日
type="datetime-local" 表示既有年月日又有时间

生日：<input type="datetime-local"  name="birthday"/><br />

颜色-h5新特性-了解：type="color"

datalist-h5新特性-了解：为input框提供可选输入

想去的公司：<input list="companys" name="company" />
<datalist id="companys">
    <option value="alibaba">
    <option value="baidu">
    <option value="tencent">
    <option value="zijie">
    <option value="didi">
</datalist>

隐藏域： type="hidden" 页面上看不到任何效果

下拉列表框： select中写name

option：select中的所有选项
value表示下拉列表中被选中的项的对应值
selected表示默认选中

<select name="month">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
</select><br />

textarea:文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行。
readonly：表示只读，内容不可修改
disabled：表示不可用，样式呈现灰色

协议：<textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
    水泊梁山英雄会注册会员条款说明：
    1、必须遵守........
    2、................
</textarea><br />

按钮：value：显示在按钮上的文字

type=“submit”：提交按钮，提交到form的action的指定URL
type=“image”：等价于提交按钮，没有value属性，多了一个src=“按钮图片URL”
type=“reset”：重置按钮，清空表单中所有用户输入，货到默认原始状态，相当于刷新了页面
type=“button” ：普通按钮，没有任何功能，只有按钮的样子

<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<input type="image" src="img/a.png" /><br />
<!--
button标签与上面的input表示按钮的三个可互换
-->
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

框架🤖

什么是框架：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面

框架语法🤖

iframe:定义内嵌框架

属性	值	描述
src	URL	该URL指向不同的网页
height		高度属性默认以像素为单位, 但是你可以指定其按比例显示
width		宽度属性默认以像素为单位, 但是你可以指定其按比例显示
frameborder		定义iframe表示是否显示边框
name		内嵌框架的名称

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>内嵌框架--在浏览器上显示不止一个页面</title>	</head>	<body>							<p>			<a href="https://www.baidu.com" target="content">查询</a>			<a href="sub/myorder.html" target="content">我的订单</a>			<a href="sub/shop.html" target="content">我关注的店铺</a>		</p>		<iframe name="content" src="welcome.html" width="100%" height="200px" frameborder="1"></iframe>		<iframe name="search" src="https://www.baidu.com" width="100%" height="400px" frameborder="0"></iframe>	</body></html>

框架集🤖

frameset：定义一个框架集。

该元素被用来组织一个或者多个frame元素。每个frame有各自独立的文档。

cols=“数值列表，多个值之间用逗号分隔”
rows=“数值列表，多个值之间用逗号分隔”

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>框架集--了解</title>	</head>	<!-- frameset元素规定在框架集中存在多少列或多少行，以及每行每列占用的百分比/像素。-->	<!--rows，cols两个属性的综合应用-->	<frameset rows="25%,*">		<frame src="sub/head.html" frameborder="0" />		<frameset cols="25%,*">			<frame src="sub/left.html"  frameborder="0"/>			<frame src="welcome.html" name="content"  frameborder="0"/>		</frameset>			<noframes>			您的浏览器不支持框架集		</noframes>	</frameset>	<!--		rows="25%,50%,*" 表示框架集中有3行，			第一行占页面高度的25%，第2行占页面高度的50%，			最后的*表示第3行占页面剩余的高度25%		同样也可以写出具体的数值rows="25%,50%,25%"	-->	<!--<frameset rows="25%,*,25%">		<frame src="sub/head.html" />		<frame src="sub/left.html" />		<frame src="welcome.html" />		<noframes>	  		您的浏览器不支持框架集	  	</noframes>	</frameset>-->		<!--		cols="25%,*,25%" 表示框架集中有3列，			第一列和第3列宽度各占页面的25%，			中间的*表示第二列占页面剩余宽度的50%	-->	<!--<frameset cols="25%,*,25%">		<frame src="sub/head.html" />		<frame src="sub/left.html" />		<frame src="welcome.html" />		<noframes>	  		您的浏览器不支持框架集	  	</noframes>	</frameset>-->	<!--<body>	</body>--></html>

H5新增🤖

HTML5新的表单属性🤖

form新属性🤖

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在 input元素中是关闭的。
注意: autocomplete 适用于 <input> 标签，以及以下类型的 <input> 标签：text, search, url,telephone, email, password, datepickers, range 以及 color

<form action="" autocomplete="on">    姓名:<input type="text" name="name"><br>    电话: <input type="text" name="phone"><br>    邮箱: <input type="email" name="email" autocomplete="off"><br><input type="submit"></form>测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。有些浏览器可能不自动支持，需要自己启用。

input 新属性🤖

list 属性规定输入域的 datalist。datalist 是输入域的选项列表

<input list="companys"><datalist id="companys"><option value="alibaba"><option value="baidu"><option value="tencent"><option value="zijie"><option value="didi"></datalist>

multiple 属性是一个 boolean 属性.multiple 属性规定元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file

上传多个文件: <input type="file" name="img" multiple>

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<input type="text" name="userName" placeholder="请输入用户名">

required 属性是一个 boolean 属性 ,required 属性是一个 boolean 属性

用户名: <input type="text" name="username" required>

HTML中的转移符号 bn N7🤖

转移符号	描述
` `	转义为空格
`<`	转义为小于号<
`≤`	转义为小于等于号≤
`>`	转义为大于号>
`≥`	转义为大于等于号≥
`©`	转义为版权符号 ©