HTML
HTML
目录
基本内容
<!--DOCTYPE告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
<!--meta描述网站的信息-->
<!--meta一般做SEO-->
<meta charset="UTF-8">
<meta name="wkey" content="史小鹏">
<title>Title</title>
</head>
<!--网页主体（网页内）-->
HELLO
</body>
</html>
基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<br>
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签-->
<p>第一段</p>
<p>第二段</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
史小鹏
</br>
史小鹏
</br>
<hr>
<!--粗体斜体-->
<strong>粗体</strong>
</br>
<em>斜体</em>
</br>
<hr>
<!--特殊符号-->
空格：空 格
</br>
大于号：>
</br>
小于号：<
</br>
版权符号：©
</br>
</body>
</html>
图像标签
<!--图像地址、图像的替代文字、鼠标悬停提示文字、图像宽度、图像高度-->
<img src="" alt="" title="" width="" height="">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像</title>
</head>
<body>
<!--图像地址、图像的替代文字(如果加载失败的话)、鼠标悬停提示文字、图像宽度、图像高度-->
<!--地址可以填相对路径（建议）-->
<!--相对路径：相对本文件的位置（../代表回退一个文件）-->
<!--图片文字：必填-->
<img src="../rescourse/image/1.jpg" alt="图像" title="悬停文字" width="300" height="200">
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<br>
<!--链接路径、链接在哪个窗口打开-->
<!--<a href="链接路径（必填）" target="链接在哪个窗口打开">链接文本或图像</a>-->
<!--target：
_self在自己的网页中打开（默认）
_blank在一个新标签页面中打开
-->
<a href="https://www.baidu.com/" >点击我跳转到百度</a>
</br>
</br>
<a href="https://www.baidu.com/" >
<img src="../rescourse/image/1.jpg" alt="图像" title="悬停文字" width="300" height="200">
</a>
</br>
</br>
<a href="https://www.baidu.com/" target="_blank">点击我跳转到百度</a>
</body>
</html>
瞄链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瞄链接</title>
</head>
<br>
<!--能够实现本页面位置跳转和页面之间的跳转-->
<a name="x1">标记</a>
</br>
</br>
<a href="#x1">回到标记</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
<li>c++</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
常用在网站底部
-->
<dl>
<dt>学科</dt>
<dd>python</dd>
<dd>c</dd>
<dd>c++</dd>
<dd>java</dd>
<dt>姓名</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
<dd>赵六</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table(border:线条宽度)
行：tr
列：td
-->
<table border="1px">
<tr>
<!--colspan跨列(写上跨几列)-->
<!--rowspan跨行(写上跨几行)-->
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<!--rowspan跨行(写上跨几行)-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频-->
<!--
controls:显示控制条(视频或音频)
autoplay:自动播放
-->
<!--视频-->
<video src="../rescourse/sxp.mp4" controls autoplay></video>
<!--音乐-->
<audio src="../rescourse/sxp.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
<!--独立的文章内容-->
<article></article>
<!--相关内容或应用（常用于侧边栏）-->
<aside></aside>
<!--导航类辅助内容-->
<nav></nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>网页头部</header>
<section>
网页主体
</section>
<footer>网页脚部</footer>
</body>
</html>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--
src:引用页面地址
name:引用标识名
frameborder:是否显示边框（0：不显示，1：显示（默认））
-->
<iframe src="https://www.bilibili.com/read/cv5702420?spm_id_from=333.999.0.0" frameborder="1" name="sxp" width="1000px" height="800px"></iframe>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<!--
method:规定如何发送表单数据(post:比较安全，可以传输大文件,get:我们可以在url中看到提交的信息（不安全）)
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
input: type="text":文本输入框 type="password":密码输入框
input: type="submit":提交 type="reset":重置
-->
<form method="post" action="表格.html">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
input等内容(单/多选框/按钮/下拉框/文本域)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<!--
method:规定如何发送表单数据(post:比较安全，可以传输大文件,get:我们可以在url中看到提交的信息（不安全）)
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
input: type="text":文本输入框 type="password":密码输入框
input: type="submit":提交 type="reset":重置
input: type="radio":单选框
-->
<form method="post" action="表格.html">
<!--
在input里面的属性：
value:默认初始值
maxlength="":最长能写几个字符
size:文本框的长度
radio:单选框，name相同时，只能选择一个
radio:value:单选框的值
-->
<!--checked:默认选中-->
<!--placeholder提示信息-->
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框checkbox-->
<!--checked:默认选中-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="eat" name="hobby" checked>吃饭
<input type="checkbox" value="talk" name="hobby">聊天
<input type="checkbox" value="drink" name="hobby">喝水
</p>
<!--按钮-->
<p>按钮：
<!--普通按钮-->
<input type="button" name="btn1" value="点击这个">
<!--图片按钮-->
<input type="image" src="sxp.jpg">
</p>
<!--下拉框select-->
<!--selected:表示默认值-->
<p>下拉框：
<select>
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value="选项的值">俄罗斯</option>
<option value="选项的值">英国</option>
<option value="选项的值" selected>法国</option>
</select>
</p>
<!--文本域-->
<!--
cols：行
rows：列
-->
<p>反馈
<textarea name="text" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域（上传文件）-->
<p>文件域
<input type="file" name="sxp">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
验证（邮件验证/数字/URL/滑块/搜索）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证</title>
</head>
<body>
<form method="post" action="表格.html">
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字
max:最大
min:最小
step:步长
-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!--滑块range-->
<p>滑块：
<input type="range" name="voice" max="100" min="0" >
</p>
<!--搜索-->
<p>搜索：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
补充
- 只读：readonly
- 禁止（选择/按钮）：disabled
- 隐藏（如隐藏密码输入框等）：hidden
- 密码或文本里value：默认值
- 提示信息：placeholder
- 非空判断（为空不能提交）：required
- 正则表达式（从网上查常用正则表达式）：pattern
