本文详细介绍了HTML5的基本结构，包括DOCTYPE、HTML标签及头部信息。接着讲解了页面的基本结构，如header、section、footer等。此外，还列举了常见的网页标签，如标题、段落、图像、超链接等，并深入介绍了表单的使用，包括input类型的多种组件、验证方式及表单提交。最后提到了一些高级元素，如媒体元素、列表框和标签label的功能。
前端基础【HTML】
一、HTLM5
Hyper Text Markup Language(超文本标记语言)
1、W3C标准
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
2、HTML基本结构
<!-- DOCTYPE:告诉浏览器代码使用的规范 -->
<!DOCTYPE html>
<!-- 总标签html：只读取总标签内的代码 -->
<html lang="en">
<!-- head——网页头部标签 -->
<head>
<!-- meta标签：描述网站的一些信息，一般用来做SEU -->
<meta charset="UTF-8">
<meta name="章可怡" content="章可怡的网站">
<meta name="描述" content="这个网站啥也不是">
<title>给章可怡建立的网站</title>
</head>
章可怡是🐖
<!-- body网页主体标签 -->
<body>
</body>
</html>
3、
块元素：内容独占一行
行内元素：一行以内不换行的元素
二、页面基本结构
<body>
<header>
<h3>网页的头（头部）</h3>
</header>
<sectiion>
<h3>网页身体（主体）</h3>
</sectiion>
<footer>
<h3>网页的脚（底部）</h3>
</footer>
<article>独立的文章内容</article>
<aside>侧边栏</aside>
<nav>导航栏</nav>
</body>
三、网页基本标签
1、标题标签
<!-- 标题标签 -->
<h1>题南望山</h1>
<h2>磊子</h2>
2、段落标签
<!-- 段落标签:会省略两端空格,有效空格永远只有一个 -->
<p> 去年今日此门中,</p>
3、换行标签
<!-- 换行标签-->
去年今日此门中,<br>
4、水平线标签
<!-- 水平线标签 -->
<hr>
5、字体样式标签
<!-- 字体样式标签 -->
<strong>粗体</strong>
<em>斜体</em>
6、特殊符号标签
<!-- 特殊符号标签 -->
空格 --
大于符号><br>
小于符号<<br>
版权符号©<br>
7、图像标签
<!--图片标签-->
<img src="../resource/img/章鱼哥的家.jpg" alt="图片加载失败" title="章鱼哥的家" width="180" height="250">
<!--
src:图片地址
alt：图片加载失败返回的字符串
title:鼠标悬停显示图片标题
width:图片宽度
height：图片高度
相对路径：相对于html的路径
绝对路径：从头到尾的路径
上一级目录:../
-->
8、超链接标签
<!--超链接标签-->
<h1>超链接标签</h1>
<a href="https://www.baidu.com/">超链接的名字</a>
<a href="https://www.baidu.com/" target="_blank"><img src="../resource/img/baidu.png" alt="图片加载失败" title="点击进入百度" width="180" height="250"></a>
<!--
/href:跳转网页的路径
target:表示窗口打开的地方
_blank:新网页打开
_self:在该网页打开
-->
<!--锚链接标签-->
<a name = "标记处"></a>
<a href="#标记处">回到标记处</a>
<!--
1、建立标记使用name
2、通过超链接 #加标记名字 跳到标记处
-->
<!--
功能性标签
邮箱链接:mailto
-->
<a href="mailto:1538581962@qq.com">点击联系磊子</a>
9、列表标签
<h1>列表</h1>
<!-- 有序号的列表 -->
<ol>
<li>java</li>
<li>C</li>
<li>数据库</li>
<li>创新创业</li>
</ol>
<hr>
<!-- 无序号的列表 -->
<ul>
<li>java</li>
<li>C</li>
<li>数据库</li>
<li>创新创业</li>
</ul>
<hr>
<!-- 自定义列表 -->
<!--
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>C</dd>
<dd>数据库系统概论</dd>
<dt>教室</dt>
<dd>515</dd>
<dd>520</dd>
<dd>604</dd>
</dl>
10、表格标签
<!-- 表格标签 -->
<!--
tr:行标签
td:列标签
border:边框线大小
colspan:跨列
rowspqn:跨行
-->
<table border="1px">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
11、媒体元素标签
<!-- 多媒体标签 -->
<!-- controls:播放控制器-->
<!-- 视频标签 -->
<video src="../resource/mp4/改进后的上机作业.mp4" controls autoplay width="200" height="300"></video>
<!-- 音频标签 -->
<audio src="../resource/music/Jocelyn Pook,Russian Red - Loving Strangers.mp3" controls autoplay></audio>
12、网页嵌套标签
<!-- 网页嵌套标签iframe -->
<iframe src="https://www.baidu.com" frameborder="2" width="800" height="800"></iframe>
<!--
frameborder:边框线大小
-->
<!-- B站视频 -->
<iframe
src="//player.bilibili.com/player.html?aid=242569665&bvid=BV1se411x7X9&cid=170351251&page=1"
scrolling="no" border="0" frameborder="0" framespacing="0"
allowfullscreen="true" width="800" height="800">
</iframe>
四、表单
1、初始了解表单：
用建立表单
用input插入相应的组件，在type中定义插入组件的类型
1.1名词解释
action：提交表单的位置，网站或者请求处理网址
method：有post，get提交方式。
name：组件名字，同名则属于同一个组件
get方式提交将导致在url可以看到相应的密码信息，不安全；
post方式比较安全，可以传输大文件。
1.2表单组件格式
| 属性 | 说明 |
|---|---|
| type | 指定的元素（组件）类型，text、password、checkbox、radio（单选框）、submit、reset、file、hidden、image、button，默认为text |
| name | 指定表单组件的名称（提交表单必填） |
| value | 组件初始值，type为radio时必须指定一个值 |
| size | 指定组件的初始宽度，当type为text或password时，表单元素的大小以字符为单位。对于其它类型，宽度以像素为单位 |
| maxlength | type为text或password时，输出的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
2、input表单组件
2.1文本框
<!-- 表单form：提交内容发生事件 -->
<form action="表单跳转.html" method="get">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
</form>
2.3单选框
<!-- 单选框标签
input type="radio"
value:单选框的值
name:表示组
-->
<form action="表单跳转.html" method="get">
<p>性别：
<input type="radio" value="男" name="性别">男
<input type="radio" value="女" name="性别">女
</p>
</form>
2.4多选框
<!-- 单选框标签
checked：默认选中
-->
<form action="表单跳转.html" method="get">
<p>选课：
<input type="checkbox",value="java" name="age" checked>java
<input type="checkbox",value="C" name="age">C
<input type="checkbox",value="python" name="age">python
<input type="checkbox",value="计算机组成原理" name="age">计算机组成原理
</p>
</form>
2.5按钮
<!-- 按钮
button 普通按钮
image 图片按钮 图片按钮默认有执行表单action功能
submit 提交按钮 value可以给按钮赋值
reset 重置表单内容按钮
-->
<form action="表单跳转.html" method="get">
<p>
<input type="button" name="dj" value="点击就送">
<input type="image" src="../resource/img/章鱼哥的家.jpg" value="点击就送">
</p>
<p>
<input type="submit">
<input type="reset" value="清空">
</p>
</form>
2.6文件域（上传文件）
<!-- 文件域标签
-->
<form action="表单跳转.html" method="get">
<p>上传文件：
<input type="file" name="files">
<input type="button" value="上传文件" name="upload">
</p>
</form>
2.7输入验证
<form action="表单跳转.html" method="get">
<!-- 邮箱输入标签-->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- 网址输入标签-->
<p>网址：
<input type="url" name="url">
</p>
</form>
2.8数字输入
<!-- 数字输入标签
max、min:上下限
step:调整步长
value:初始值
-->
<form action="表单跳转.html" method="get">
<p>出生日期（输入数字）
<input type="number" value="2002" max="2021" min="1800" step="1">年
<input type="number" value="9" max="12" min="1" step="1">月
<input type="number" value="3" max="31" min="1" step="1">日
</p>
</form>
2.7滑块
<!-- 滑块标签
max、min:上下限
step:调整步长
value:初始值
-->
<form action="表单跳转.html" method="get">
<p>满意程度 *
<input type="range" name="satisfy" min="0" max="100" step="1" value="50">
</p>
</form>
2.8搜索框标签
<!-- 搜索框标签-->
<form action="表单跳转.html" method="get">
<p>就读大学：
<input type="search" name="search">
</p>
</form>
3、列表框
3.1下拉框select
<!-- 下拉框标签
selected：默认选中
-->
<form action="表单跳转.html" method="get">
<p>国籍：
<select name="列表名称">
<option value="选项的值">丑国</option>
<option value="选项的值">阿三国</option>
<option value="选项的值" selected>中国</option>
</select>
</p>
</form>
3.2文本框textarea
<!-- 文本域标签：多行文本
cols:列数限制
rows:行数限制
-->
<form action="表单跳转.html" method="get">
<p>建议(160字以内)：
<textarea name="textarea" id="2" cols="30" rows="10"></textarea>
</p>
</form>
3.3标签label
<!-- label标签
for=""：定位到id
id="":设置定位
-->
<form action="表单跳转.html" method="get">
<p>
<label for="1">点我输入建议</label>
</p>
<p>
<textarea name="textarea" id="1" cols="30" rows="10"></textarea>
</p>
</form>
4、表单的应用
1、常用修饰符
hidden：隐藏 ——可通过隐藏设置默认提交默认值
disabled：禁用
readonly：只读
selected：默认选中(select下拉框)
checked：默认选中（checkbox多选框）
2、表单初级验证
2.1提示信息
placeholder="输入用户名"
2.2非空判断
required
2.3正则表达式
脚本之家，常用正则表达式：https://www.jb51.net/article/76901.htm
<!-- 身份证号(15位、18位数字)：^\d{15}|\d{18}$ -->
<p>身份证号
<input type="text" name="diy" pattern="^\d{15}|\d{18}$">
</p>
1991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
