html相关知识-优快云博客

本文链接：https://blog.youkuaiyun.com/morningstarlyp/article/details/133559889

HTML：

指的是超文本标记语言 (HyperText Markup Language)。

超文本:是指页面内可以包含图片、链接、声音,视频等内容。

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示）

浏览器根据不同的HTML标签，解析成我们看到的网页。

HTML基本语法：

● Head标签(标签)包含了所有的头部标签标签。

● 头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>

<title>标签可定义网页的标题

频度的描述和关键词。

标题处添加图标：

结构：

<标签名>标签内容</ 标签名 > 闭合标签 ( 有标签内容 )

<标签名/> 自闭合标签 ( 无标签内容 )

基本常用标签：

● 标题标签<h1></h1>…..<h6></h6>

● 段落标签 <p></p>

● 换行标签 <br/>

● 列表

● 无序列表<ul><li></li></ul>

● 有序列表<ol><li></li></ol>

● 超链接 <a></a>

● 图像标签 <img/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的网页</title>
		<link rel="icon" href = "img/baidu.ico"/>
	</head>
	<body text="red" bgcolor="black">
		<div>啥也没有你瞅啥？？？</div>
		
		<div>瞅你咋滴！！！</div>
		
		<!--
		闭合标签（双标签）<开始标签>  </结束标签
		自闭合标签（单标签）<标签名/> 没有标签体，只是完成某个既定的功能
		<br/>换行
		
		标签属性:
		通过属性改变标签原有的显示属性
		写在开始标签中
		属性名=“值”
		一个标签可以拥有多个属性
		-->
		<b>aaaaa</b>
		cc<br/>cc
	</body>
</html>

表格

● 表格的基本构成标签

table标签：表格标签

tr标签：表格中的行

th标签: 表格的表头

td标签：表格单元格

<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			<!-- 
			  table 表格  border="1" 边框
			  tr 行  用来放单元格
			  th  单元格  表头  居中 加粗    内容都放在单元格中
			  td  单元格 
			 -->
			<table border="1" width="300" >
				<tr height="40">
				  <th width="40">序号</th>	
				  <th>姓名</th>
				  <th>年龄</th>
				</tr>
				<tr>
				  <td>1</td>
				  <td>张三</td>  
				  <td>20</td>
				</tr>
				<tr>
				  <td>2</td>
				  <td>张三</td>  
				  <td>20</td>
				</tr>
			</table>
			 
		</body>
</html>

<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			<!-- 
			  table 表格  border="1" 边框
			  tr 行  用来放单元格
			  th  单元格  表头  居中 加粗    内容都放在单元格中
			  td  单元格 
			  cellspacing="0" 设置单元格与单元格之间的距离
			  cellpadding="2" 设置单元格的内边距  也就是内容到边框的距离
			  align : left默认 center right  水平位置
			  valign : top  middle(默认) bottom 垂直位置
			 -->
			<table border="1" width="300" cellspacing="0" cellpadding="2" >
				<tr height="40">
				  <th width="40">序号</th>	
				  <th>姓名</th>
				  <th>年龄</th>
				</tr>
				<tr  align="center">
				  <td>1</td>
				  <td>张三</td>  
				  <td>20</td>
				</tr>
				<tr height="100">
				  <td  align="center">2</td>
				  <td align="right">张三</td>  
				  <td valign="middle" align="center">20</td>
				</tr>
				<tr>
				  <td>3</td>
				  <td>张三</td>  
				  <td>20</td>
				</tr>
			</table>
			 
		</body>
</html>

<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body>
			<!-- 
			  table 表格  border="1" 边框
			  tr 行  用来放单元格
			  th  单元格  表头  居中 加粗    内容都放在单元格中
			  td  单元格 
			  cellspacing="0" 设置单元格与单元格之间的距离
			  cellpadding="2" 设置单元格的内边距  也就是内容到边框的距离
			  align : left默认 center right  水平位置
			  valign : top  middle(默认) bottom 垂直位置
			  colspan="4" 跨列合并  从哪个单元格开始,就在哪个里面加一个colspan="合并的数量" 记得删除多余的单元格
			  rowspan="3" 跨行合并  ..... rowspan="3"记得删除多余的单元格(删除其他行对应位置的)
			 -->
			 <table border="1" width="300" height="300">
			 	<tr>
			 		<td colspan="4"></td>
			 	</tr>
			 	<tr>
			 		<td></td>
			 		<td></td>
			 		<td></td>
			 		<td rowspan="3"></td>
			 	</tr>
			 	<tr>
			 		<td></td>
			 		<td></td>
			 		<td></td>
			 	</tr>
			 	<tr>
			 		<td></td>
			 		<td></td>
			 		<td></td>
			 	</tr>
			 </table>
			 
		</body>
</html>

● 表格属性： width height cellspacing cellpadding align valign cospan rowspan

表单：

form标签：

表单网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。

在<input>中：

<text>单行文本输入框

<textarea>文本域

<select>中：单选

<option>选项

<checkbox> 多选框

具体用法将在下文的代码和图片中讲解。

<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		<body> 
		    <!-- 
			    表单: 表单中提供了许多的可以输入或选择的组件, 让用户进行输入选择(输入信息)
				     最终将数据提交到服务器端(下个阶段)
					 action="" 后程序的地址  javaEE
					 method="get" http请求方式 get post
					 
					 <input type="text"   单行文本输入框
					     name="userName"  提交的键
						 value=""   提交的值
						 placeholder="请输入用户名"提示信息
						 readonly="readonly" 只读  还可以提交数据
						 disabled="disabled" 禁用  不可以提交数据
						 
					 type="radio"  单选框
					     name值相同为一组,才可以实现单选,
						 选择性的组件,需要提供固定的value
						 
				     input  type="checkbox"  多选框 
					 
					 <select name="grade">
					    <option value="1">一年级</option>
						
					 type="file"
					 textarea cols="30" rows="5" 多行文本域
			-->
			 <form action="" method="get">
				 用户名<input type="text" name="userName" value="123" placeholder="请输入用户名" /><br/>
				 密码:<input  type="password" name="password"/> <br/>
				 性别: <input  type="radio" name="gender" value="男"/> 男
				       <input  type="radio" name="gender" value="女"/> 女 <br/>
				 课程:<input  type="checkbox" name="course" value="java"/> java
					 <input  type="checkbox" name="course" value="c"/> c
					 <input  type="checkbox" name="course" value="html"/> html<br/>
			     年级:<select name="grade">
					    <option>请选择</option>
						<option value="1">一年级</option>
						<option value="2">二年级</option>
						<option value="3">三年级</option>
				     </select>	<br/>
				附件<input  type="file"/>		  
				 <br/>
				 地址<textarea cols="30" rows="5"></textarea> <br/>
				 <input  type="submit" value="保存"/><!--  触发表单的提交的 -->
				 <input  type="button" value="按钮"/><!-- 普通的按钮 后面要用他触发事件   onclick="alert('aaaa')"-->
				 <input  type="reset" value="重置"/><!-- 重置表单到初始状态 -->
			 </form>
		
		</body>
</html>