HTML

HTML

所谓前端开发，其实是网页开发，也称为网页制作。在前端开发过程中，需要综合使用多种技术，HTML就是其中一种。下面简单介绍一下HTML语言。

HTML概述

HTML(Hypertext Markup Language，超文本标记语言)：是一种文本类、解释执行的标记语言，即超出文本的范畴，所有的操作都是通过标签实现的。它具有平台无关性，通过提供的HTML标签来组织网页内容，构建网页结构。

HTML页面结构

总体上可分为以下几部分：
1.文档类型声明
2.HTML页面实际部分

<!DOCTYPE html> <%--< !DOCTYPE >标签声明文档类型--%>
<html> <%--标识--%>

<head> <%--<head>...</head>标签作为头部区域，定义网页相关信息--%>
<meta charset="utf-8"> <%--<meta>标签定义文档的元数据--%>
<title></title> <%--<title>...</title>标签定义页面的标题--%>
</head>

<body></body> <%--<body>...</body>标签作为主体区域，组织网页内容--%>

</html>

HTML标签

HTML标签，也称为HTML元素，用于构建网页结构。
书写格式：
1.<标签名属性1=“值1” 属性2=“值2”…>…</标签名>
2. <标签名属性1="值1"属性2=“值2”…/>
HTML属性表示标签所具有的一些特性。比如标签的形状、颜色、用途等特性。另外，标签与标签之间存在嵌套(包含)和并列(同级)两种关系。

文本标签

p标签
p标签用于设置一段格式上统一的文本。
书写格式：

<p>…</p>
<p align="left|center|right">…</p>

br标签
br标签是一个单标签，不需要设置任何属性。其作用在页面上产生换行效果。
书写格式：

<br> 或 <br/>

标题字标签
在这里插入图片描述
下面对标题字标签简单演示一下，如图：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
	<h1 align="center">这是一级标题，中设置</h1>
	<h3 align="right">这是三级标题，右设置</h1>
	<h6>这是六级标题，默认值</h1>
 </body>
</html>

在这里插入图片描述

strong标签
strong标签修饰文本加粗显示。
书写格式：

<strong>...</strong>

em标签
em标签具有倾斜效果。
书写格式：

<em>...</em>

mark标签
mark标签用于定义带记号的文本，其作用为突出显示文本内容。
书写格式：

<mark>...</mark>

time标签
time标签用于定义时间或日期。
书写格式：

<time datetime="日期或时间" pubdate="pubdate">...</time>
datetime属性：用于定义相应的时间或日期。
pubdate可选属性：添加可以搜索浏览器方便识别出该日期是文章、新闻的发表日期

span标签
span标签修饰标签，用来给机器识别的，便于搜索引擎，爬虫解析。

网页添加空格
书写格式：&nbsp

下面对文本标签简单演示，如图：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
	<p>啊Q老师&nbsp&nbsp<em>正在学习</em>&nbsp&nbsp<strong>HTML语言</strong><br>
	学习了&nbsp&nbsp<mark>HTML概述、页面结构和文本标签</mark></p>
	时间：<time datetime="2022-2-24 20:00" pubdate="pubdate">2022-2-24 20:00</time>
 </body>
</html>

在这里插入图片描述

文档结构标签

header标签
header标签定义页面或内容区域的头部信息。如页面标题、作者姓名等信息。
书写格式：

<header>...</header>

section标签
section标签用于对页面的某块内容进行分块，如将文章划分不同的章节。
书写格式：

<section>...</section>

article标签
article标签用于表示独立完整的内容块。如一篇博客文章、一则新闻等。
书写格式：

<article>...</article>

nav标签
nav标签用于定义页面上的各种导航条。
书写格式：

<nav>...</nav>

ol标签
ol标签表示有序列表范围，在ol中有属性type：1(默认)，a，i .
书写格式：

<ol>...</ol>

ul标签
ul标签表示无序列表的范围，在ul中有属性type：空心圆circle，实心圆disc（默认），实心方块square.
书写格式：

<ul>...</ul>

main标签
main标签用于定义页面的主体内容。
书写格式：

<main>...</main>

aside标签
aside标签用于定义页面或文章的附属信息。如内容的引用、侧边栏等
书写格式：

<aside>...</aside>

footer标签
footer标签用于定义页面或某篇文章的脚注内容。如作者联系方式、文章版权信息等。
书写格式：

<footer>...</footer>

下面对文档结构标签简单演示，如图：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
 	<header>
		<h1 align="center">HTML语言</h1>
	</header>
	<main>
		<article id="file">
			<h3>文档结构标签的学习</h3>
			<nav>
				<ol type="1">
					<li>header标签</li><li>section标签</li>
					<li>article标签</li><li>nav标签</li>
					<li>ol标签</li><li>ul标签</li>
					<li>main标签</li><li>aside标签</li>
					<li>footer标签</li>
				</ol>
			</nav>
			<section id="section">
				<p>section标签用于对页面的某块内容进行分块</p>
			</section>
		</article>
	</main>
	<aside>侧边栏内容</aside>
	<footer align="right">@啊Q老师</footer>
 </body>
</html>

在这里插入图片描述

表格标签

table标签定义表格用来展示数据，但不支持数学计算。其中，包括行、列、单元格、表头等元素。
书写格式：

<table>表格内容</table>

1.tr标签表示表格的一行，tr是table row的简称。
2.td标签表示表格的单元格，td是table datacell的简称。
3.th标签表示表格的表头，即单元格的字体加粗并居中，th是table heading的简称。
4.caption标签表示表格的标题。表格标题默认位于表格的第一行居中显示。

表格默认是没有边框的。若对表格进行修饰，需要使用表格的标签属性。
table标签的属性：
border：设置表格边框宽度，单位是像素(px)。
其中，设置边框需要利用CSS的border-collapse 属性，border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。

td标签的属性：
rowspan：表示跨行合并。rowspan 表明单元格所要跨越的行数。
colspan：表示跨列合并。colspan表明单元格所要跨越的列数。
书写格式：

<table border="n" style="border-collapse: collapse;">
<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>

下面对表格标签简单演示，如图：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
 	<table border="2" style="border-collapse:collapse">
		<caption>表格标题</caption>
		<tr>
			<th>表头1</th>
			<th>表头2</th>
			<th>表头1</th>
			<th>表头2</th>
		</tr>
		<tr>
			<td>第一行</td>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
		<tr>
			<td rowspan = "2">第二行</td>
			<td>单元格1</td>
			<td align="center" colspan="2">单元格2</td>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>
 </body>
</html>

在这里插入图片描述

表单标签

form标签表示定义表单，用来收集用户信息，然后将其发送到后端应用程序，后端应用程序(Java/Python等)将根据定义好的业务逻辑对表单中的数据进行处理。
书写格式：

<form action="url" method="get/post">表单其他标签</form>
enctype属性(一般不需要)：文件上传时需才要使用。
action属性：指明表单提交到目标网页
method属性：表示提交数据的方式，有以下两种方式：
1.get(默认)：请求地址栏会携带提交的数据，不安全。
2.post值：数据会传送到后台，不显示在地址栏中，相对安全。

表单控件

<input type="输入项方式" name="自定义"/>：定义输入框，提交信息大部分需要有name属性，type属性有以下几种常用的值：
1.text：文本输入
2.password：密码输入
3.radio：单选输入,单选或多选默认选中的属性：checked=“checked”
4.checked：多选输入,单选或者多选中name属性值必须相同
5.file：文件输入(文件上传)
6.submit：提交按钮
7.image：图片提交，<input type="image" src="图片路径"/>
8.reset：重置按钮，<input type="reset" value=""/>

<textarea cols="列数" lows="行数">...</textarea>：定义文本域

<select name="">：定义下拉框
	<optgroup label="">定义选项组</optgroup>
	<option value="">定义下拉框的选项</option>
</select>

<label>：为表单各个控件定义标题
<button>：定义点击的按钮
<output>：定义一个计算结果

下面对表单标签简单演示，如图：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
 	<form action="提交网址" method="post">
		<label>账号：</label>
		<input type="text" name="username"/><br>
		<label>密码：</label>
		<input type="password" name="pwd"/><br>
		<label>性别：</label>
		<input type="radio" name="sex",value="male"/>男
		<input type="radio" name="sex",value="female"/>女<br>
		<label>生日：</label>
		<select name="birthday">
			<optgroup label="请选择年份">请选择年份</optgroup>
			<option value="2000">2000</option>
			<option value="2001">2001</option>
			<option value="2002">2002</option>
		</select><br>
		<label>爱好：</label>
		<input type="checkbox" name="hobby",value="sing"/>唱
		<input type="checkbox" name="hobby",value="dance"/>跳
		<input type="checkbox" name="hobby",value="rap"/>rap
		<input type="checkbox" name="hobby",value="basketball"/>篮球<br>		
		<label>文件上传：</label>
		<input type="file" name="file"/><br>
		<label>个人简介：</label>
		<textarea cols="20" lows="10" name="dis"></textarea><br>&nbsp;&nbsp;
		<input type="submit" value="注 册">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重 置">
	</form>
 </body>
</html>

在这里插入图片描述

图像标签

图像标签用来在网页中插入图片。
书写格式：

<img src="url" alt="text" height="n" width="n">
url：指明图片的地址或路径。
text：定义图片的文字描述信息。其中，图片无法加载成功才会显示alt属性中的信息。
n：图片的高度或宽度，单位是像素(px)。

下面对图像标签简单演示，如图：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
 	<img src="C:\Users\dell\Pictures\Saved Pictures\backgroud.jpg" alt="电脑图片" height="688" width="1888">
 </body>
</html>

在这里插入图片描述

超链接标签

超链接是指从一个网页指向一个目标的连接关系，通过点击源锚点即可以跳转到目标锚点。
书写格式：

<a href="url"  target="opentype">链接文本</a>

url:链接的资源地址或路径，#为默认，不打开资源而是占位。

opentype:设置打开的方式，有以下几种：
1. _blank：新窗口打开,原窗口会保留
2. _self：默认，原窗口覆盖并打开新页面
3. _parent：在当前框架上一层打开新页面
4. _top：在顶层框架打开新页面

下面对超链接简单演示，如图：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>HTML语言学习</title>
 </head>
 <body>
 	<a href="https://www.w3school.com.cn/html/index.asp" target="_blank">HTML网站(新窗口打开,原窗口会保留)</a><br>
	<a href="https://www.w3school.com.cn/html/index.asp" target="_self">HTML网站(默认，原窗口覆盖并打开新页面)</a><br>
    <a href="https://www.w3school.com.cn/html/index.asp" target="_parent">HTML网站(在当前框架上一层打开新页面)</a><br>
	<a href="https://www.w3school.com.cn/html/index.asp" target="_top">HTML网站(在顶层框架打开新页面)</a>
 </body>
</html>

在这里插入图片描述

其他常用标签

div标签

div标签是一个双标签，作为容器标签使用。
每一对该标签在 HTML 页面中都会构建一个区块，这样能将页面划分成许多大小不一的区块，达到控制和布局页面内容。

div属于块级元素。
块级元素特点：在默认情况下，块级元素显示时将独占一行，其宽度将自动填满父元素宽度，并和相邻的块级元素依次垂直排列，通过CSS技术可以设定元素的宽度和高度以及 4 个方向的内、外边距。

Web 前端：HTML语言

HTML

HTML概述

HTML页面结构

HTML标签

文本标签

文档结构标签

表格标签

表单标签

图像标签

超链接标签

其他常用标签

div标签

猜你喜欢