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标签修饰标签,用来给机器识别的,便于搜索引擎,爬虫解析。
网页添加空格
书写格式: 
下面对文本标签简单演示,如图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>HTML语言学习</title>
</head>
<body>
<p>啊Q老师  <em>正在学习</em>  <strong>HTML语言</strong><br>
学习了  <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>
<input type="submit" value="注 册">
<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 个方向的内、外边距。