首页 前端知识 HTML 总结

HTML 总结

2024-09-21 21:09:44 前端知识 前端哥 646 682 我要收藏

一、HTML概述

HTML 指的是超文本标记语言

  • 超文本:是指页面内可以包含图片、链接、声音,视频等内容。
  • 标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

二、HTML的基本语法

1.Head标签

 包含了所有的头部标签,例如:<title>, <style>, <meta>, <link>, <script>

2.html的基本结构 

如图所示:

注:

  • <html>…</html>标签标记 HTML 文档的开始和结束
  • <head>…</head> 标签包括标题和其他说明信息
  • <body>…</body> 标签包含文本、图像和链接

代码示例如下: 

<!-- 
   声明html语言的版本 html5
 -->
<!DOCTYPE html>
<!-- 
   html标签是标记语言中根标签 
 -->
<html>
	<!-- head 头 -->
	<head>
		<meta charset="utf-8" /><!-- 设置解析网页的字符集 -->
		<title>百度一下,你就知道</title>
		<link  href="img/baidu.ico" rel="icon"/>
	</head>
	<!-- 网页的身体 -->
	<body bgcolor="green">
		
		<b>网页的内容都写在body中</b> 
		<b>网页的内容都写在body中</b> 

 	<!-- 
		    标签结构:
			   <开始标签> 标签体 </结束标签>   闭合标签(封闭的区间)  双标签
			   
			   <标签名 />  自闭和 标签,没有修饰的内容,只是完成某个功能   单标签
		 -->
		aaa
		<br/>
		bbb
		
		<!-- 
		   标签的属性: 可以通过改变标签属性,设置标签显示的格式
		              属性必须写在开始标签中
					  属性格式  属性名="值"
					  一个标签中可以写多个属性
		 -->
         <font color="red" size="7">百度</font>
		   新浪  腾讯
	 
	</body>
</html>

 

3.标签 

HTML中的标记指的就是标签。

HTML使用标记标签来描述网页。

结构

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

 4.标签属性

 标签可以拥有属性,属性进一步说明了该标签的显示或使用特性。

e.g.:<body text=”red”>

注:

  1. 属性的格式 :属性名 = “属性值“
  2. 属性的位置:<标签名 属性名 = “属性值“ > xxx </标签名>
  3. 添加多个属性:<标签名 属性名 = “属性值“ 属性名 = “属性值“ > xxx </标签名> 

三、基本常用标签 

  1. 标题标签
    <h1>   </h1>…..<h6>   </h6>
  2.  段落标签
    <p>   </p>
  3. 换行标签
    <br/>
  4. 列表
    1. 无序列表 <ul><li>    </li></ul>
    2. 有序列表 <ol><li>    </li></ol>
  5. 超链接
    <a>   </a>
  6. 图像标签
    <img/>

代码示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		标题标签
		<!-- 
		   <h1></h1>.... h6   每一个标题标签会独占一行
		   align="left / center /rigth" 控制标签内容在标签体中水平对齐方式
		 -->
		 <h1 align="center">
			 <font color="red">1级标题</font>
		 </h1>
		 <h2 align="right">2级标题</h2>
		 <h3>3级标题</h3>
		 
		 <!-- 标尺线-->
		 <hr/>
		 
		 段落标签
		 <!-- 
		   p 表示一个段落  段落与段落之间有间隔的
		 -->
		 <p align="center">
			 报道说,根据美国联邦航空局的记录,这是一架波音737-9 MAX飞机,两个月前获得认证并从装配线下线。美国联邦航空局没有立即回应置评
		 </p>
		 <p align="right">
			 波音公司刚刚在X平台上回应,“我们获悉涉及阿拉斯加航空AS1282航班发生的事故。我们正努力收集更多信息并与我们的航空公司客户联系。波音技术团队随时准备支持调查。”
		 </p>
		 <p >
		 	波音公司刚刚在X平台上回应,“我们获悉涉及阿拉斯加航空AS1282航班发生的事故。我们正努力收集更多信息并与我们的航空公司客户联系。波音技术团队随时准备支持调查。”
		 </p>
			 
		
		 
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		列表
		 无序列表
		  <ul type="square">
			   <li>列表项1</li>
			   <li>列表项2</li>
			   <li>列表项3</li>
			   <li>列表项4</li>
		  </ul>
		 有序列表
		   <ol type="1">
			   <li>列表项1</li>
			   <li>列表项2</li>
			   <li>列表项3</li>
			   <li>列表项4</li>
		   </ol>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		超链接
		<!-- 
		 href="网页的地址"
		 target="_blank" 在新窗口打开目标网页
		 target="_self" 在当前窗口打开一个新网页 默认的
		 -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<a href="index.html" target="_self">index</a>
		
		<hr/>
		
		<img src="img/1.png" width="150" height="100" border="1"/>
		
		<a href="http://www.nike.com">
			<img src="img/2.png"/>
		</a>
		 
	</body>
</html>

四、特殊符号转义

 在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。

e.g.:比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号,因为浏览器会将它解析为html 签 。

为了可以使用这些预留字符,我们必须在html中使用字符转义 。 

常见字符转义:

 代码示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		  <!-- 
		    在网页中有些符号不能直接显示的,
			需要通过其他的符号进行代替,这些代替的符号称为转义符
		  -->
		   &lt;b&gt; 标签的功能是加粗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文字
		   <hr/>
		   &reg;
		   &copy;

	</body>
</html>

五、表格

1.基本结构

2.表格常见属性

width、height、cellspacing、cellpadding、align、valign、cospan、rowspan

3.表格代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 
		    table-- 表格标签
			   border="1" 边框宽度
			   width="400" 表格宽度
			    cellspacing="0" 设置单元格与单元格之间的距离
				cellpadding="0" 设置单元格内容到边框的距离
			tr -- 表格行 
					align="left / center / right"   水平位置
					valign="top / middle /bottom"  垂直位置
			th -- 单元格(表头  居中 加粗)
			td -- 普通的单元格
			       align="center" 
				   valign="middle"
			 表格中的内容只能放在单元格
		 -->
		
		<table border="1" cellspacing="0" cellpadding="0">
			<tr bgcolor="red">
				<th width="150"  height="50" >姓名</th>
				<th width="100">语文</th>
				<th width="100">数学</th>
				<th width="100">英语</th>
			</tr>
			<tr>
				<td bgcolor="green" height="50" align="center" valign="middle">张三</td>
				<td>90</td>
				<td>80</td>
				<td>70</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>90</td>
				<td>80</td>
				<td>70</td>
			</tr>
			<tr align="center" valign="bottom"  height="50">
				<td>王五</td>
				<td>90</td>
				<td>80</td>
				<td>70</td>
			</tr>
		</table>
		
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		   colspan="4"  跨多列合并 从哪个合并,就在哪个单元格中添加colspan="4",删除多余的单元格
		   rowspan="2"  跨多行合并 从哪个合并,就在哪个单元格中添加rowspan="4",删除多余的单元格
		   
		 -->
		<table border="1" width="400" height="300">
			<tr>
				<td colspan="4"></td>  
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td rowspan="2"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		
	</body>
</html>

 六、表单

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

1.表单提交

 2.文本

3.密码框

4.单选按钮

5.复选框

注: 

  • 单选框通过name属性来分组,name相同是一组才可实现单选。
  • 单选和复选不能输入内容,所以必须指定value的值。

6.文件选择框

注: accept=“.文件后缀名,.文件后缀名… “ 限制文件类型

7.下拉框

下拉框基本语法:

 注:下拉框的name,id,事件等需要在select中定义,而value需要在option中定义。

8.多行文本域

9.按钮

10.表单代码示例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			用户名<input type="text" />
			<br>
			密码<input type="password"/>
			<br>
			性别<input type="radio" name="AA"/>男
				<input type="radio" name="AA"/>女
			<br>
			省份<select>
				<option>北京</option>
				<option>陕西</option>
				<option>河南</option>
			</select>
			<select>
				<option>北京</option>
				<option>陕西</option>
				<option>河南</option>
			</select>
			<br>
			编程语言 <input type="checkbox" name="BB"/>AA
					<input type="checkbox" name="BB"/>BB
					<input type="checkbox" name="BB"/>CC
					<input type="checkbox" name="BB"/>DD
			<br>
			上传头像<input type="file" />
			<br>
			建议<textarea cols="30" rows="5"></textarea>
			<br>
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18532.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!