HTML(Hyper Text Markup Language)超文本标记语言
W3C(World Wide Web Consortium)万维网联盟
- 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
- W3官网
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
网页基本结构
<!--DOCTYPE：告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head>
<!-- meta描述性标签，用来描述网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="罗赞">
<meta name="description" content="罗赞的个人博客">
<!-- 网页标题 -->
<title>Title</title>
</head>
<!--网页主体-->
<body>
</body>
</html>
网页标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--一个p标签就是一段-->
<p>Hello</p>
<p>world</p>
<!--虽然换行了，但还是同一段-->
Hello <br>
world <br>
<hr>
<!--粗体、斜体-->
粗体：<strong>I love you.</strong>
斜体：<em>I love you.</em>
<!--特殊符号-->
空格
大于号>
小于号<
版权符号©
<!--
多行
注释
-->
<!--
src:图片地址
alt:加载失败时显示
title:鼠标悬停时的文字
width:宽度
height:高度
-->
<img src="../Resources/image/Cover.jpg" alt="A-SOUL" title="Cover" width="1000">
超链接
<!--
<a href="path" target="目标窗口位置">链接文本或图像</a>
href*:链接路径
target:表示窗口在哪里打开
_blank 在新标签页打开
_self 在当前页面打开
_parent
_top
-->
<a href="图像标签.html" target="_blank">点击我跳转到图片</a><br>
<a href="基本标签.html" target="_self">
<img src="../Resources/image/Cover.jpg" alt="" width="500">
</a>
<!--
1.需要一个锚标记
2.跳转到标记
3.#
-->
<a name="top">顶部</a><br>
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<a href="链接标签.html#down">回到链接标签底部</a>
<!--
邮件链接: mailto:邮箱地址
QQ推广链接
-->
<a href="mailto:2273038475@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2273038475&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2273038475:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
行内元素和块元素
列表
<!--有序ordered列表list-->
<ol>
<li>JAVA</li>
<li>Python</li>
<li>C++</li>
<li>C#</li>
</ol>
<!--无序unordered列表list-->
<!--
应用范围：导航、侧边栏
-->
<ul>
<li>高等数学</li>
<li>大学英语</li>
<li>高级语言程序设计</li>
<li>思想道德与法治</li>
</ul>
<!--自定义defined列表list-->
<!--
dl:标签
dt:列表名称
dd:列表内容
应用范围：公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>JAVA</dd>
<dd>Python</dd>
<dd>C++</dd>
<dd>C#</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>天津</dd>
<dd>深圳</dd>
</dl>
表格
<!--表格table-->
<!--
行(row) tr
列 td
border:边框
-->
<table border="1">
<tr>
<!--colspan 跨列-->
<td>1.1</td>
<td colspan="2">1.2</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
媒体元素
<!--视频-->
<!--
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../Resources/video/超级敏感.mp4" controls autoplay></video>
<!--音频-->
<audio src="../Resources/audio/超级敏感.mp3" controls autoplay></audio>
页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
内联结构
<!--iframe内联框架-->
<!--
src:引用页面地址
name:框架标识名
-->
<iframe src="链接标签.html" name="haha" frameborder="0" width="500"></iframe>
<!--在a标签中使用target属性从iframe标签打开页面-->
<a href="视频与音频.html" target="haha">点击跳转视频与音频</a>
<!--B站分享-->
<iframe src="//player.bilibili.com/player.html?aid=719360265&bvid=BV1zQ4y1v7wd&cid=446875842&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
表单
- 表单元素格式
- 表单元素类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<!--
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
method:规定如何发送表单数据（提交方式）
get:可以在url中看到提交的信息，不安全但高效，不能传输大文件；
post:无法在url中看到提交的信息，比较安全，可以传输大文件。
-->
<form action="test01.html" method="get">
<!--文本输入框：input type="text"-->
<!--
value:默认初始值
maxlength:最多能输入几个字符
size:文本框长度
-->
<p>账号：<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
<!--密码输入框：input type="password"-->
<p>密码：<input type="password" name="password"></p>
<p>性别：
<!--单选框标签
input typle="radio"
value:单选框的值
name:表示组（name一样表示同一组，同时只能选中一个）
checked:默认选中
-->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女
</p>
<p>下拉框：
<!--下拉框select
option:选项
selected:默认选中-->
<select name="列表名称">
<option value="选项的值1">选项1</option>
<option value="选项的值2">选项2</option>
<option value="选项的值3" selected>选项3</option>
<option value="选项的值4">选项4</option>
<option value="选项的值5">选项5</option>
</select>
</p>
<p>爱好：
<!--多选框input type="checkbox"
checked:默认选中
-->
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="game">打游戏
<input type="checkbox" name="hobby" value="study">学习
</p>
<p>反馈：
<!--文本域textarea
cols:列数
rows:行数
-->
<textarea name="response" cols="50" rows="20">在这里填写反馈</textarea>
</p>
<p>
<!--文件域input type="file"-->
<input type="file" name="file">
<input type="button" name="upload" value="上传">
</p>
<p>邮箱：
<!--邮箱input type="email"-->
<input type="email" name="my-email">
</p>
<p>URL：
<!--URL input type="url"-->
<input type="url" name="my-url">
</p>
<p>数字：
<!--数字input type="number"
max:最大值
min:最小值
step:步长
-->
<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>音量：
<!--滑块input type="range"-->
<input type="range" min="0" max="100" name="voice" step="2">
</p>
<p>搜索：
<!--搜索框input type="search"-->
<input type="search" name="search">
</p>
<p>按钮：
<!--普通按钮button-->
<input type="button" name="btn1" value="点我">
<br>
<!--图片按钮image（具有submit功能）-->
<input type="image" src="../Resources/image/Cover.jpg" name="bn2" width="100">
</p>
<p>
<!--提交按钮submit-->
<input type="submit" value="提交">
<!--重置按钮reset-->
<input type="reset" value="清空">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单应用</title>
</head>
<body>
<form action="test01.html" method="get">
<p>
<!--增强鼠标可用性-->
<!--label标签
for:要聚焦到的控件的id-->
<label for="mark">点我聚焦到文本框</label>
<input type="text" name="text" id="mark">
</p>
<p>
<!--只读readonly-->
<input type="text" value="只给看，不给改" readonly>
</p>
<p>
<!--禁用disabled-->
<input type="checkbox" name="a">未选中，可改
<input type="checkbox" name="a" checked disabled>已选中，只读，改不了
<input type="checkbox" name="a" checked>已选中，可改
<input type="button" value="点不了" disabled>
</p>
<p>
<!--隐藏域hidden-->
<input type="button" value="看不见我但我依然存在" hidden>
<input type="button" value="看得见我">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初级表单验证</title>
</head>
<body>
<form action="test01.html" method="get">
<!--提示信息placeholder-->
<p>用户名：
<input type="text" name="username" placeholder="请输入用户名">
</p>
<!--必填项required-->
<p>密码：
<input type="password" name="password" required>
</p>
<!--正则表达式-->
<p>URL：
<input type="text" name="url" pattern="/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>