layout: post title: HTML5（一）基本结构、标签与表单元素 description: HTML5（一）基本结构、标签与表单元素 tag: 前端
@[Toc]
基本结构
语法
<!DOCTYPE html>
<html lang="en">
<!--注释格式写法-->
<!--标签对<...></...>成对出现，代表着开启标签，关闭标签-->
<head>
<meta charset="UTF-8">
<meta name="keywords" content="CSDN">
<meta name="description" content="博客">
<!--meta 是描述性标签，name代表描述名称，content代表描述内容-->
<title>我的第一个html</title>
<!--头部的标题名-->
<!--head是网页头部-->
</head>
<body>
<!--body是网页主体-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!--h+tab快捷键：标题标签-->
<p>两只老虎</p>
<p>三只老虎</p>
<p>四只老虎</p>
跑得快，跑得快<br/>一只没有耳朵，一只没有眼睛<br/>真奇怪，真奇怪
<!--p+tab快捷键：段落标签-->
<hr/>
<!--<hr/>:水平线标签-->
<!--<br/>:换行标签-->
<strong>粗体</strong><br/><em>斜体</em>
<!--特殊符号-->
<hr/>
空 格（使用多个空格，页面显示只有一个空格）
使用特殊的符号表示空格“ +分号转义”<br/>
空 格
<br/>
>
<br/>
<
<br/>
©
</body>
</html>
结果
图像标签
<hr/>
<img src="../resources/images/1.jpg" alt="girl" title="悬停文字" height="236" width="220">
<!--快捷键img+tab，图片标签
src:图片路径（相对路径<相对于html文件>/绝对路径）
../:回到上级目录
alt:加载失败时返回
title:悬停文字
height/width...
-->
链接标签
<a href="https://www.bilibili.com/video/BV1x4411V75C?p=5&spm_id_from=pageDriver">点击跳转到狂神说java</a>
<br/>
<a href="demo-1.html">点击跳转到helloworld</a>
<br/>
<a name="first picture"></a>
<a href="https://blog.csdn.net/baiduwaimai" target="_blank"><img src="../resources/images/2.jpeg" alt="智子" title="点击跳转到我的博客" >
</a>
<br>
<p>
<a href="https://blog.csdn.net/baiduwaimai" target="_blank"><img src="../resources/images/2.jpeg" alt="智子" title="点击跳转到我的博客" >
</p>
<p>
<a href="https://blog.csdn.net/baiduwaimai" target="_blank"><img src="../resources/images/2.jpeg" alt="智子" title="点击跳转到我的博客" >
</p>
<p>
<a href="https://blog.csdn.net/baiduwaimai" target="_blank"><img src="../resources/images/2.jpeg" alt="智子" title="点击跳转到我的博客" >
</p>
<a href="#first picture">点击转到第一张图片位置</a>
<!--快捷键a+tab，a(链接)标签
href：链接地址，，也可以填html文件地址，a标签用作锚链接标记时删除此项
标签对中间为超链接显示内容
target:链接打开的位置
_blank:在新页面打开
_self：（默认选项）在当前页面打开
-->
<!--锚链接
a标签，先用a标签设置标记，name为标记名，a标签用作标记时href删掉，在锚链接的href项填#+标记名，则跳转到标记处
#+标记名也可直接放在html文件名后边，跳转到某网页特定位置处
-->
<br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，点击加我领取小电影" title="你好，点击加我领取小电影"/></a>
<br/>
<a href="mailto:lewwhut@gmail.com">点击联系我</a>
块元素与行内元素
块元素：无论内容多少，该元素独占一行，例如h标签，p标签
行内元素：在一行内累积，不会自动换行，a标签，strong标签（粗体），em标签（斜体）
列表标签
<!--列表-->
<!--有序列表，order list-->
<ol>
<li>python</li>
<li>java</li>
<li>c</li>
<li>c++</li>
</ol>
<hr>
<!--无序列表，unorder list-->
<ul>
<li>python</li>
<li>java</li>
<li>c</li>
<li>c++</li>
</ul>
<hr>
<!--自定义列表，definitely list
<dt>表名</dt>
<dd>选项</dd>
-->
<dl>
<dt>编程语言</dt>
<dd>python</dd>
<dd>java</dd>
<dd>c</dd>
<dd>c++</dd>
</dl>
表格标签
<!--表格标签
table
tr：表格行
td：表格列
colspan
rowspan
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
</tr>
<tr>
<!--跨列colspan-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
媒体元素
<video src="../resources/video/video1.mp4" controls height="800" width="1800"></video>
<!--src；资源地址
controls：设置播放器控制面板
autoplay：自动播放
-->
<audio src="../resources/audio/Love%20Story.mp3" controls autoplay></audio>
页面结构
iframe 内部框架
<iframe src="https://www.baidu.com/" name="baidu" frameborder="0" width="800" height="1000"></iframe>
表单
<!--快捷键form+tab：表单
action:表单提交的位置，可以是一个html，也可以是一个请求处理的地址
method：提交方式
get：能在url中看到提交的信息，不安全，但是高效
post:比较安全，也可传输大文件
-->
<!--input标签为文本输入框
type选项设置
text：普通文本框
password：密码文本框（输入显示为*）
submit：提交按钮
reset：重置按钮
radio:单选框，包含基本的三要素
<input type="radio" value="初始值" name="组名">显示的修饰文本
name一致代表同一个组，同一个组中只能单选一项
checkbox:多选框
<input type="checkbox" name="hobby" value="play video games">打游戏
<input type="checkbox" name="hobby" value="lisen to music">听音乐
<input type="checkbox" name="hobby" value="play basketball">打篮球
button：普通按钮
<input type="button" name="btn" value="点击变长">value值为按钮上边显示的文字
-->
<form action="" method="get">
<p>用户名：
<input type="text" name="username">
</p>
<p>密码：
<input type="password"name="pwd">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
<p>性别：
<input type="radio" value="man" name="sex">男
<input type="radio" value="woman" name="sex">女
</p>
按钮和多选框
<p>爱好：
<input type="checkbox" name="hobby" value="play video games">打游戏
<input type="checkbox" name="hobby" value="lisen to music">听音乐
<input type="checkbox" name="hobby" value="play basketball">打篮球
</p>
<p>
<input type="button" name="btn" value="点击变长">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
下拉框
文本域
文件域
邮箱验证
数字验证
滑块
搜索框
<!--下拉框-->
<p>国籍：
<select name="列表名称" >
<option value="0">中国</option>
<option value="0">美国</option>
<option value="0">英国</option>
<option value="0"selected>日本</option> //selected 默认选项
</select>
</p>
<!--textarea 文本域-->
<p>文本域
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--filearea 文件域-->
<p>文件域
<input type="file" name="filearea">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>email:
<input type="email" name="email">
</p>
<!--数字-->
<p>数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!--滑块-->
<p>音量：
<input type="range" name="range" value="50" max="100" min="0" step="2">
</p>
<!--搜索-->
<p>搜索：
<input type="search" name="search">
</p>
表单的应用
隐藏域：可以提交，不显示，通常用于传输默认值（value）
只读：固定值，仅显示，不可操作
禁用：组件呈灰色，无效
表单初级验证
placeholder：提示信息
required：非空判断
pattern： 正则表达式，判断是否符合正则表达式规范
表单的应用
[外链图片转存中…(img-xvH0hNus-1625658767372)]
隐藏域：可以提交，不显示，通常用于传输默认值（value）
只读：固定值，仅显示，不可操作
禁用：组件呈灰色，无效
表单初级验证
placeholder：提示信息
required：非空判断
pattern： 正则表达式，判断是否符合正则表达式规范
