HTML 学习笔记

by：Taxiing

01 my first html page

<!DOCTYPE html>
<!--这是根-->
<html>
	<head>
		<meta charset="utf-8">
		<title>my first html page</title>
	</head>
	<body>
		这是我第一个网页捏
		<input>
	</body>
</html>

02 基本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本标签</title>
	</head>
	<body>
		<!--段落标记-->
		<p>自从三年前闹得整个巴黎鸡飞狗跳之后，探员杰奎斯·克鲁索日常工作就是街边检查一下违规停放的车辆，
		但还是屡屡搞砸，几番折腾，他终于做出了最后决定：告别法国！突然世界各地，价值连城的文物一一失窃，
		"粉红豹"钻戒也失窃了。顶头上司指名点姓，一定要勇破上回"粉红豹"疑案的克鲁索，总督察雷福斯只好召
		回这个让人头疼的探长。</p>
		<p>于是老搭档波顿、女秘书妮可都被顺利召回，老队伍回来了，新一轮的摧毁行动也正式宣告开始...</p>
		
		<!--标题字-->
		<h1>封行之</h1>
		<h2>封行之</h2>
		<h3>封行之</h3>
		<h4>封行之</h4>
		<h5>封行之</h5>
		<h6>封行之</h6>
		
		<!--换行标记:<br>是个独目标签,不进行成对使用-->
		自从三年前闹得整个巴黎鸡飞狗跳之后
		<br>探员杰奎斯·克鲁索日常工作就是街边检查一下违规停放的车辆，
		但还是屡屡搞砸，几番折腾，他终于做出了最后决定：告别法国！突然世界各地，价值连城的文物一一失窃，
		"粉红豹"钻戒也失窃了
		<br>顶头上司指名点姓，一定要勇破上回"粉红豹"疑案的克鲁索，总督察雷福斯只好召
		回这个让人头疼的探长
		
        <!--水平线:<hr>,独目标签-->
		<hr>
		
		<!--color是个属性,用来指定颜色值-->
		<!--等号左侧是属性名,右侧是属性值-->
		<hr color='red'>
		
		<!--单引号双引号是一样的,可以混用-->
		<hr color="green">
		
		<!--字符串不加引号也可以使用-->
		<hr color=yellow>
		
		<!--大小写无关-->
		<HR COLOR="BLUE">
			<br><br><br><br><br>
			
		<!--<pre></pre>,代码原格式保留-->
		<pre>
			1+1=2;
			2+2=4;
			4=4=0;
		</pre>
		
		<!--粗体-->
		<b>1</b>
		
		<!--斜体-->
		<i>2</i>
		
		<!--插入字-->
		<ins>3</ins>
		
		<!--删除字-->
		<del>4</del>
		
		<!--右上角小字-->
		11<sup>5</sup>
		
		<!--右下角小字-->
		11<sub>4</sub>
		
		<!--字体标签：<font></font>-->
		<!--color是颜色属性，size是字号属性-->
		<font>111</font>
		<font color=red size=12>诛殷、封行之</font>
		
	</body>
</html>

03 实体符号

<!--凡是html页面中第一行是以下代码的
表示该页面是一个HTML5页面，h5-->

<!DOCTYPE html>
<html>
	<head>
		<!--这是告诉浏览器采用哪一种字符编码方式打开该页面。
		一般这个编码方式要和文件的编码方式相同，不然会乱码-->
		<!--windows系统操作的浏览器在没有指定任何编码方式的情况下，浏览器默认采用gbk的
		简体中文的方式打开，这是因为我们的windows系统是简体中文的环境
		我们的工作区中文件编码方式是UTF-8，unicode更加通用，当前这个文件就是其编码方式，
		不写以下代码，浏览器会用GBK的方式打开，会乱码-->
		<meta charset="utf-8">
		
		<title>实体符号</title>
	</head>
	<body>
		<!--空格 &nbsp; -->
		a     bc
		<br>
		a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bc
		
		<!--小于号 &lt; -->
		<!--大于号 &gt; -->
		<br>
		a&lt;b
		<br>
		b&gt;a
		
	</body>
</html>

04 表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html表格</title>
	</head>
	<body>
		<!--3行4列的table-->
		<!--表格 <table></table>-->
		
		<table border="1px" width="200px" height="100px " align="center">
			<!--border表示表格的边框宽度，1px表示边框宽度1像素-->
			<!--width表示表格宽度，height表示边框高度,align表示对齐方式-->
			
			<!--百分比的形式下，数值表示占浏览器的百分之多少-->
			<!--table border="1px" width="50%" height="100px"-->
			<tr> 
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr align="center">
				
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr><tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
	</body>
</html>

05 单元格合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html表格</title>
	</head>
	<body>
		<!--3行4列的table-->
		<!--表格 <table></table>-->
		
			<!--百分比的形式下，数值表示占浏览器的百分之多少-->
			<table border="1px" width="50%" height="300px" align="center">
			<tr> 
				<td>1</td>
				<td>2</td>
				<!--colspan表示横向合并，找到要合并的单元格
				删除其第二个单元格，用其合并，“2”表示两个单元格合并-->
				<td colspan="2">34</td>
				<!--<td>4</td> 4是3右边的单元格，是第二个单元格-->
			</tr>
			
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<!--rowspan表示纵向合并，找到要合并的单元格
				删除其第二个单元格，用其合并，“2”表示两个单元格合并-->
				<td rowspan="2">riki king</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td align="center">3</td>
				<!--<td>king</td> king是riki下面的单元格，是第二个单元格-->
			</tr>
		</table>
	</body>
</html>

06 th标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>th标签</title>
	</head>
	<body>
		<table border="1px" width="50%">
			<tr>
				<!--<td>偶像名称</td>
				<td>所属公司</td>
				<td>职业生涯</td>-->
				
				<th>偶像名称</th>
				<th>所属公司</th>
				<th>职业生涯</th>
			</tr>
			<tr>
				<td>rikimaru</td>
				<td>wjjw</td>
				<td>dancer</td>
			</tr>
		</table>
	</body>
</html>

07 html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>th标签</title>
	</head>
	<body>
		<table border="1px" width="50%">
			<!--thead,tbody,tfoot将表格分为三部分-->
			<!--为了后期JavaScript提供方便-->
			<thead>
			  <tr>
				<th>偶像名称</th>
				<th>所属公司</th>
				<th>职业生涯</th>
		  	  </tr>
			</thead>
			
			<tbody>
			  <tr>
				<td>rikimaru</td>
				<td>wjjw</td>
				<td>dancer</td>
			  </tr>
			</tbody>
			
			<tfoot>
				<tr>
					<td>x</td>
					<td>y</td>
					<td>z</td>
				</tr>
			</tfoot>
			
		</table>
	</body>
</html>

08 背景颜色、背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景颜色，背景图片</title>
	</head>
	<!--body标签的bgcolor属性指定背景颜色-->
	    <body bgcolor="rrggbb">
	<!--body标签的background属性指定背景图片-->
		<!--body background="images/rikimaru1.jpg"-->
	    </body>
</html>

09 图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body background="images/rikimaru1.jpg">
		
		<!--图片插入，作为网页元素-->
		<!--img src=“ 图片 ”-->
		<!--开始标签和结束标签之间没有东西的话可以直接在标签末尾加“/”
		否则需要完整的写入</img>作为结束符号-->
		<!--<img src="images/cat.jpg"/ >-->
		
		
		<!--img标签的属性-->
		<!--src指定图片的路径，width指定图片的宽度，高度会等比例缩放，
		手动设置高度会失真-->
		<!--title用来设置鼠标悬停时的提示信息-->
		<img src="images/cat.jpg " width="200px" title="不可以对丸子涩涩！（正义 "/>
		
		<!--alt表示图片加载失败的提示信息-->
		<img src="im/cat.jpg " alt="图片君社保了，请耐心等待......（无慈悲 "/>
	</body>
</html>

10 超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<!--本地超链接-->
		<a href="009图片.html">力丸</a>
		
		<!--网页超链接-->
		<a href="https://www.bilibili.com/">blibli</a>
		
		<!--用图片跳转的网页超链接-->
		<a href="https://www.bilibili.com/">
		 <!--标签嵌套-->
		   <img src="images/1.png" width="400px" title="点击我进入哔哩哔哩动画网站！"/>
		</a>
		
		<!--target的属性-->
		<!--target="_blank"新窗口
		          ="_self"当前窗口
		          ="_parent"当前窗口的父窗口
				  ="_top"当前窗口的顶级窗口
				  -->
		<a href="https://www.bilibili.com/" target="_blank">BLIBLI</a>
		
		<hr color="blue">
		<!--一个窗口中的内部窗口 iframe-->
		<iframe src="https://www.bilibili.com/" width="50%" height="500px"></iframe>
			</body>
</html>

11 无序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul type="circle">
			<li>riki</li>
			 <ul>
				 <li>handsome</li>
				 <li>peace</li>
				 <li>dancer</li>
			 </ul>
			<li>santa</li>
			 <ul type="disc">
				 <li>cool</li>
				 <li>cute</li>
				 <li>dancer</li>
			</ul>
			<li>akashi</li>
		</ul>
	</body>
</html>

12 有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol type="A">
			<li>riki</li>
			 <ol>
				 <li>handsome</li>
				 <li>peace</li>
				 <li>dancer</li>
			 </ol>
			<li>santa</li>
			 <ol type="1">
				 <li>cool</li>
				 <li>cute</li>
				 <li>dancer</li>
			</ol>
			<li>akashi</li>
		</ol>
	</body>
</html>

13 表单

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<!--表单：<form></form> 有路径属性action来进行链接跳转，类似于href属性-->
		<!-- <input type="" name="" id="" value="" />  
             在这些属性之中，type如果是作为一个提交数据的按钮来进行按键
             type的值一定是submit-->
		<!--value是按钮文本字样-->
		<form action="https://www.bilibili.com/">
			
			<input type="submit" value="点击跳转B站"/>
		</form>
		
		<!--submit提交按钮放在外面也是不行的，必须嵌套在form标签里面-->
		 <input type="submit" value="点击跳转B站"(外)/>
	
	</body>
</html>

14 登录表单

浏览器向服务器提交数据的格式是：
url ?name=value&name=value&name=value&name=value&name=value
以上的提交数据的格式，是w3C指定的格式，所有浏览器都是这样的，很重要！

value带值的情况：会直接在文本框中显示value的值；

image-20221015175131644

value不带值的情况:文本框的值靠用户进行输入：

image-20221015175148339 

< !DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>表单</title>
		</head>
		<body>
			<!--画一个登录的表单-->
			<!-- action路径随便写:http://192.168.145.2: 8080/crm/login
			协议: http协议
            访问的服务器IP地址是什么? 192 .168.145.2
            访问这个服务器上的那个软件: 8080端口对应一 个服务。
			/crm/login:是这个服务器上的某个资源名! (它可能是一 段处理 登录的java程序! ! ! )-->

			<!--******重点************重点************重点************
			表单最终提交的时候，表单项的name属性最重要，有name属性才会提交，不然不会提交
			并且浏览器向服务器提交数据的格式是：
			  url ?name=value&name=value&name=value&name=value&name=value
			以上的提交数据的格式，是w3C指定的格式。所有浏览器都是这样的，很重要
			
			以下表单提交数据的时候，格式都是：
			http://127.0.0.1:8848/html-project/%20//192.168.145.2:8080/crm/login?x=huang&y=111
-->
			<form action="http: //192.168.145.2:8080/crm/login">
				<!-- input是输入域，type不同， 展示样式不同，文本框和密码框的value是不需要程序员来写的，
				是由用户提交的-->
				用户名:

				<!--text表示文本框-->
				<input type="text" name="x" />
				<!--输入域的value属性不用写，否则写完之后eg：
				<input type="text" name="x" value="riki"/>，
				生成的网页会直接在输入域中出现riki（文本）-->
				
				<br>
				<!--password表示密码框-->
				密码: <input type="password" name="y" />
				<br>
				<!--submit表示提交表单的按钮-->
				<input type="submit" value="login" />
			</form>
		</body>
	</html>

15 用户注册表单

image-20221015232251163 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册表单</title>
	</head>
	<body>
		 <form action="http://localhost:80/crm/register">
			 <!--文本框的value的值不需要我们输入，留给用户来做-->
			 <!--name有就能提交，没有name，就不能提交-->
			 用户名：<input type="text" name="usenruame"/>
			 <br>
			 密码：<input type="password" name="usernam"/>
			 <br>
			 性别：
			 <!--type=radio 表示单选框，checked 表示默认选中此项-->
			  <input type="radio" name="sex" value="1" checked / >男
             <!--value要程序员指定，因为是选项-->
			  <input type="radio" name="sex" value="0"/>女
             <!--value要程序员指定，因为不是文本框，是选项-->
			 <!--最终提交给服务器的数据是“sex=1”/“sex=0”，数据和男和女没有关系-->
			  
			  <!--同一组的“单选按钮”，name是需要一致的，若：
			  <input type="radio" name="sex1" value="1"/>男
			  <input type="radio" name="sex2" value="0"/>女 
			  则此时运行的网页中，男女性别选项不会再是单选按钮，单选意味着本组之内的单选-->
			  
			 <br>
			 学历：
			 <!-- 下拉列表 -->
			 <select name="xveli"><!--假设最后选中的是本科，提交的是：xveli=benke-->
				 <option value="xiaoxve">小学</option>
				 <option value="chuzhong">初中</option>
				 <option value="gaozhong">高中</option>
				 <option value="benke" selected >本科</option>
				 <!--下拉列表中默认选中此项 selected-->
				 <option value=shuoshi"">硕士</option>
			 </select>
				 
			 <br>
			 兴趣爱好：
			 <!-- type=checkbox 表示复选框，同一组的复选框的name也是一致的 
			 checked 同样是默认选中此选框-->
			 <input type="checkbox" name="hobby" value="smoke"  checked />抽烟
             <!--value同样需要程序员提供-->
			 <input type="checkbox" name="hobby" value="drink" checked />喝酒
             <!--value同样需要程序员提供-->
			 <input type="checkbox" name="hobby" value="sleep" />睡觉
             <!--value同样需要程序员提供-->
			 <br>
			 简介：
			 <!--文本域-->
			 <!-- 此处的value是用户填写的 -->
             <!--row行数、cols列数，<taxtarea></textarea>的标签之间的字符，会直接显示在文本域的表单之中-->
			 <textarea rows="10" cols="60" name= "jianjie">
			 </textarea>
			 <br>
			 <!--提交表单-->
			 <input type="submit" value="注册" />
			 
			 <!--提交按钮中不能有name,不然这个按钮的value值也会提交给服务器
			 <input type="submit" name="tihiao" value="注册” />-->
			 
			 <!--重置按钮-->
			 <!--和submit一样，放在form标签外面不管用-->
			 <input type="reset" value="重置">

			 <br>
	</body>
</html>

如上述代码，正常数据格式下，表单直接提供给服务器的值：
http://localhost/crm/register?
usenruame=123
&
usernam=123
&
sex=1
&
xveli=benke
&
hobby=smoke
&
hobby=drink
&
jianjie=123
若表单无填写，数据提交还是提交，只不过提交的是空字符串

16 下拉列表（多选）

下拉列表的样式：（按住ctrl+鼠标右键可进行多个项目的选择）

image-20221015232800667

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表（多选）</title>
	</head>
	<body>
		<!--multiple表示下拉列表支持多选-->
		<!--size是设置下拉列表一次最多显示的条目数量-->
		<select name="food" size="3" multiple>
			<option value="fish">鱼</option>
			<option value="water">水</option>
			<option value="apple">苹果</option>
			<option value="banana">香蕉</option>
			<option value="rice">米</option>
		</select>
	</body>
</html>

17 file 控件

文件：

image-20221016094235307

image-20221016094235307

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--后台java程序使用io流的方式接受这个文件！-->
		<form action="http://www.baidu.com"">
			
	    	文件：<input type="file" />
			
		<br>
		<input type="submit" value="文件上传">
		</form>
	</body>
</html>

18 hidden控件

隐藏域：在页面上不显示的界面，不希望用户看件，但是表单会提交给服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hidden控件</title>
	</head>
	<body>
		
		<!--hidden隐藏域控件-->
		<form action="http://127.0.0.0:8080/crm/save">
			
			<!--隐藏域：在页面上不显示的界面，
			不希望用户看件，但是表单会提交给服务器-->
			<input type="hidden" name="usercode" value="111111" />
			
			<!--提交按钮-->
				<input type="submit" value="提交" />
				
		</form>
		<!-- 最终提交：http://127.0.0.0:8080/crm/save？usercode=111111 -->
	</body>
</html>

19 readonly和disabled