前端三剑客之——HTML

迷茫的羔羊羊

已于 2023-03-13 18:00:36 修改

阅读量326

点赞数 2

分类专栏：前端文章标签： html 前端 javascript

于 2022-12-06 18:17:59 首次发布

本文链接：https://blog.csdn.net/m0_62565675/article/details/128203735

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2.骨架

下面我们创建一个html文件，并且对它里面的内容做以解释:

<!--这是工具生成的一个标准的html网页模板-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

：是html中的注释语法。

<!DOCTYPE html>：html5 版本声明。

<html></html>：根标签，所有的内容都写在根标签内。

<head></head>：网页头部，里面可以设置网页的元信息。

<body></body>：网页身体。

<meta charset="utf-8" />：设置浏览器解析网页时，使用的字符集。

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

<link rel="icon" href=""/>：可在标题处添加图标。

网页的基本语法:网页是由标签构成的。

1.<开始标签> 标签体 </结束标签> ：称为闭合标签双标签
2. <标签名 /> ：称为自闭合标签通过属性来进行一个设置

标签中可以拥有属性，通过属性进一步修饰标签特性，属性必须写在开始的标签中，一个标签可以有多个属性，格式属性名="属性值"。例如：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度一下，你就知道</title>
		<link rel="icon" href="img/baidu.ico"/>
	</head>
	<body text="red">
		网页的内容都写在body中1<br/>
		网页的内容都写在body中2
	</body>
</html>

运行到浏览器中.........

3.标签

HTML常用标签
<h1></h1>	标题标签
<p></p>	段落标签
<br/>	换行标签
<ul> <li>列表项内容</li> </ul>	无序列表
<ol type=""> <li>列表项内容</li> </ol>	有序列表
<a href="" target=""></a>	超链接
<img src="" >	图片
<hr/>	标尺线
<b></b>	加粗
<table> <tr> <td><td> </tr> </table>	表格
<form action="" method=""> </form>	表单(重点)

下面，我们还是直接HTML中演示这些标签（用注释来讲解这些标签的用法）:

3.1常用标签1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	     <!-- 标题标签 align属性可以设置文本内容，在标签行内的水平对齐方式  默认时left-->
		<h1 align="right">一级标题</h1>
		<h2 align="center">二级标题</h2>
		<h3>三级标题</h3>
		<!--p 段落标签  表示一个段落 段落与段落之间有间隔-->
		<p align="center"></p>
		<!-- 无序列表 前面有一个图标 没有序号-->
		<ul>
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
		</ul>
		<!-- 有序列表  前面有一个序号 通过type属性改变序号规则 1，A，a，I，i-->
		<ol type="I">
			<li>列表项内容</li>
			<li>列表项内容</li>
			<li>列表项内容</li>
		</ol>
	</body>
</html>

运行到浏览器中看效果..........

3.2常用标签2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 
	超链接  href="链接地址"  target="_self 在当前窗口打开  target="_blank 在新窗口打开
	图片   src="图片的引用地址"  
-->
		<a href="http://www.baidu.com" target="_self">百度</a>
	    <a href="http://www.baidu.com" target="_blank">百度</a>

		<a href="http://www.taobao.com">
		    <img src="img/1.png" >
		</a>
	</body>
</html>

运行到浏览器中看效果..........

-------------页面就会直接跳转

3.3常用标签3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			hr 标尺线
			空格: &nbsp  
			<    : &lt
			>    : &gt
		 -->
		<hr color="red" width="800" size="10"/>
		<!-- 在标记语言中，需要对语言中的一些特殊符号进行转义 -->
		<b>&lt;b&gt;标签的功能是加粗文字</b>
		<!-- border 设置边框  cellspacing 单元格之间的间距  cellpadding 单元格内内容与单元格的内距  -->
		<table border="1" cellspacing="2" cellpadding="2">
			<tr>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
			</tr>
		</table>
	</body>
</html>

运行到浏览器中看效果..........

4.表单

4.1表单概述

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

4.2表单举例

组件类型
text	文本框
password	密码框
radio	单选框
checkbox	多选框
submit	提交按钮
file	文件上传
rest	重置按钮
button	普通按钮
textarea	多行文本框
select	下拉选择框

action我们先不用管，method默认先选get。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签学习</title>
	</head>
	<body>
		<!-- 
		readonly="readonly" 只读 可以提交内容
		disabled = "disabled" 禁用组件，不能再提交内容
		placeholder="" 提示内容，不是实际的内容
		value 设置文本框中值(开始默认值)为多少，当提交时 name和value构成键值对(value 可以不写但是存在)
		
	    单选框必须通过name来进行分组，name相同为一组，就可以互斥(保证只能选一个).选择性组件必须给予默认值   还可以使用checked属性默认选中    checked="checked"
		type = "checkbox" 复选框 --也可以使用checked属性默认选中   checked="checked"
		<select name="">  --使用selected属性默认选中    selected="selected" 
			<option  value="">北京</option>
			<option selected="selected" value="">上海</option>
		</select>
		<textarea name="mark" rows="5" cols="30"></textarea> 多行文本框  可以显示5行30列的数据
		<input type="reset" value="重置" /> 将表单还原到默认状态
		 -->
		<form action="" method="get">
			Username:<input type="text"  name="username" placeholder="请输入用户名" value="1111"  /><br />
			Password:<input type="password" name="password" /><br />
			<input type="radio" name = "gender" value="男" checked="checked"/>男
			<input type="radio" name = "gender" value="女" />女<br />
			<input type="checkbox" name="course" value="java" checked="checked"/>java
			<input type="checkbox" name="course" value="c++"/>c++
			<input type="checkbox" name="course" value="c语言"/>C语言<br />
			<select name="province">
				<option value="110">北京</option>
				<option selected="selected" value="111">上海</option>
			</select><br />
			
			<input type="file" /><br />
			<textarea name="mark" rows="5" cols="30"></textarea><br />
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

运行到浏览器.............