跟随小破站学习java web第一天_小破站搜陪伴学习-CSDN博客

本文链接：https://blog.csdn.net/Mars_LJ/article/details/107349369

*B/S架构:通过浏览器与服务器的交互

C/S架构:通过客户端与服务器的交互

Elements:浏览器剪辑后的代码

Console:控制台

Sources:源码

Network:监听器

html语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grammar</title>
</head>
<body>

	<!-- 1.标签的分类
			HTML标签分为两类,一类叫有开始有结束的标签,另一类叫自结束标签。
	 -->
	 <div></div> <span></span> <p></p> <br>
		
	<!-- 2.标签不区分大小写 	浏览器最终都解析成小写
	-->
	<div>i am div</div>
	<DIV>I AM DIV</DIV>
	
	<!-- 3.标签可以嵌套但不能交叉嵌套 
	 -->
	 <div>div<span>span</span></div>
	 <!-- 错误示范 --><div>div<span>span</div></span>
	
	<!-- 4.标签必须正确关闭 
	-->
	<div>div</div>
	
	<!-- 5.属性必须有值，且属性值必须加引号 
	-->
	<div id="one">id=one</div>
	
	<!-- 6.注释不能嵌套 -->
	<!-- html注释<!-- --> -->

</body>
</html>

标题标签 div布局标签段落标签转义字符列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tag</title>
</head>
<body>
	<!-- 1.标题标签
			语法:h1-h6,字体大小,粗细递减。
	 -->
	 <h1>h1</h1>
	 <h2>h2</h2>
	 <h3>h3</h3>
	 <h6>h6</h6>
	 <h7>h7</h7><br><!-- 换行标签 -->
	 h8
	 
	<!-- 2.div标签
			语法:<div></div>
			作用:无实际意义,布局
	 -->
	 <div>
	 	<div>上</div>
	 	<div>中</div>
	 	<div>下</div>
	 </div>
	
	<!-- 3.段落标签
			语法:<p></p>
	 -->
	<p>&nbsp;&nbsp;段落1</p>
	<p>&emsp;段落2</p>
	<p>段落3</p>
	
	<!-- 4.转义字符
			语法:&开头 ;结尾
			常用:
				空格:&nbsp;	普通空格
				    &emsp;  中文空格
				大于号:&gt;
				小于号:&lt;
				版权号:&copy;
	 -->
	 问:下列哪些选项是标题标签?<br>
	 				a:&lt;span&gt;&lt;/span&gt;<br>
	 				b:&lt;div&gt;&lt;/div&gt;<br>
	 				c:&lt;h1&gt;&lt;/h1&gt;<br>
	 				d:&lt;h7&gt;&lt;/h7&gt;<br>
					&copy;
					
	<!-- 5.无序列表
			无序列表
			    语法:<ul>
				 <li></li>
				 </ul>
				*type
				   disc:实心圆
				   circle:空心圆
				   square:实心方	
		          有序列表
			   语法:<ol>
				<li></li>
				</ol>
	 -->
	 <h1>无序列表</h1>
	 <ul type="disc">
	 	<li>list1</li>
	 	<li>list2</li>
	 	<li>list3</li>
	 </ul>
	 
	 <h1>有序列表</h1>
	  <ol type="i">
	 	<li>list1</li>
	 	<li>list2</li>
	 	<li>list3</li>
	 </ol>
	 
</body>
</html>

插入图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>image</title>
</head>
<body>
<!-- 使用img标签插入图片
	    alt:图片路径有误时的提示文本
	    src:图片路径
	    title:鼠标移入(悬停)时的提示文本
	 * src路径问题
	  * 目标文件与当前文件在同包下,直接访问目标文件
	  * 目标文件与当前文件不在同包下,先找目标文件的父包,再找目标文件。
	   * 返回上一级 ../
 -->

	<img alt="picture" src="img/xx.jpg" title="aaa">

</body>
</html>

超链接

<body>
	<!-- 使用a标签制作超链接
			href:链接路径
			target:
				_self:以当前选项卡(页面)打开
				_blank:以新的选项卡(页面)打开
	 -->
	<a href="pages/target.html" target="_self">跳转到目标页面</a>

</body>

表格

<!-- * 使用table制作表格
			 tr行
			 th表头
			 td单元格
		 * 语法
		 	 <table>
		 	 	<tr>
		 	 		<th></th>
		 	 		<td></td>
		 	 	</tr>
		 	 </table>
		 * 跨行跨列
		  * 跨行:rowspan
		  * 跨列:colspan
-->
<body>
	<h1>三行三列</h1>
	<table border="1" width="300px" height="150px" align="center">
		<tr align="center">
			<td>11</td>
			<td>12</td>
			<td>13</td>
		</tr>
		
		<tr>
			<td colspan="2">2122</td>
			<!-- <td>22</td> -->
			<td rowspan="2">2333</td>
		</tr>
		
		<tr>
			<td>31</td>
			<td>32</td>
			<!-- <td>33</td> -->
		</tr>
	</table>
   
</body>

注意:制作表格跨行跨列时注意单元格的省略!

制作表单

<body>
	<!-- * 使用form标签制作表单
		   * 使用input标签制作表单项
		   	 * type:表单项类型
		   	   * text:文本框
		   	   * password:密码框
		   	   * reset:重置
		   	   * submit:提交
		   	 * name:名称,有name属性,才可以提交数据到目标位置
		   	 * value:值
		 * 使用select option制作表单项
		 * action属性:表单提交的路径(位置)
	 -->
	<form action="success.html">
		用户名：<input type="text" name="username"/><br/><br/>
		密码：<input type="password" name="pwd"/><br/><br/>
		
		性别：<input type="radio" name="gender" value="man" checked="checked"/>男
		  	<input type="radio" name="gender" value="woman"/>女<br/><br/>
		  	
		 爱好：<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
		  	<input type="checkbox" name="hobby" value="football"/>足球
		  	<input type="checkbox" name="hobby" value="volleyball"/>排球
		  	<br/><br/>
		  	
	喜欢的明星：<select name="star">
	            <option value="fbb">范冰冰</option>
	            <option value="zy">杨颖</option>
	            <option value="zzy">章子怡</option>
	         </select>
	         
	         <br/>
	         <br/>
		<input type="reset">
		<input type="submit">
	</form>
</body>

注意:使用单选框时,name值只有相同才能达到单选的效果,且必须设置value值,不然页面上只会显示on值!

注意:使用下拉列表select时,如果option没设置value,页面上会直接显示里面的内容,会造成秘密泄露!