HTML学习笔记
HTML(Hyper Text Markup Language)超文本标记语言
W3C(World Wide Web Consortium)万维网联盟
- 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
- W3官网
W3C标准
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
基本概念
HTML5 是超文本标记语言（HTML）的第五次重大修改，可以简单的理解为是 HTML 的第五个大版本。
- 某些情况会将 HTML5 简称为 H5。
- 某些情况说 HTML5（H5）表示的是 HTML 的第五个版本。
- 某些情况说 HTML5（H5）表示的是移动端的网页效果。
- 某些情况说 HTML5（H5）表示的是 HTML5、CSS3、以及 HTML5 配套的 JavaScript 接口。例如操作视频，操作画布，获取地理信息等。
- 某些情况说 HTML5（H5）表示的是手机端整屏的轮播图效果。
HTML5 新特性
- 布局元素
- 媒体元素
- 画布（
<canvas>），例如刮刮乐。 - SVG（定义矢量图）
- 表单新特性
网页基本结构
<!--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>
- 字体样式标签
粗体：I love you. 斜体：I love you.
<!--粗体、斜体-->
粗体：<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>
列表
- 无序列表
- JAVA
- Python
- C++
- C#
<!--有序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
- 表头 thead
- 表体 tbody
- 行(row) tr
- 列 td
- border:边框
<table border="1">
<thead>
<tr>
<td colspan ="3">表头</td>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
媒体元素
<!--视频-->
<!--
src:资源路径
controls:控制条
autoplay:自动播放（目前浏览器规定视频必须静音后才会自动播放）
muted:静音
-->
<video src="../Resources/video/超级敏感.mp4" controls autoplay muted></video>
<!--音频-->
<audio src="../Resources/audio/超级敏感.mp3" controls></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="https://blog.roozen.xyz" name="haha" frameborder="0" width="500"></iframe>
<!--在a标签中使用target属性从iframe标签打开页面-->
<a href="CSS.md" target="haha">点击跳转CSS</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>
表单
- 表单元素格式
- 表单元素类型
账号：
密码：
用户名性别： 男 女
下拉框： 选项1 选项2 选项3 选项4 选项5
爱好： 睡觉 敲代码 打游戏 学习
反馈： 在这里填写反馈
邮箱：
URL：
数字：
音量：
搜索：
按钮：
<!--表单form-->
<!--
action:表示向何处发送表单数据（可以是网站，也可以是一个请求处理地址）
method:规定如何发送表单数据（提交方式）
get:可以在url中看到提交的信息，不安全但高效，不能传输大文件；
post:无法在url中看到提交的信息，比较安全，可以传输大文件。
-->
<form action="test01.html" method="get">
<!--文本输入框：input type="text"-->
<!--
value:默认初始值
maxlength:最多能输入几个字符
size:文本框长度
placeholder:输入框为空时的提示性文字
-->
<p>账号：<input type="text" name="username" value="admin" maxlength="10" size="30"></p>
<!--密码输入框：input type="password"-->
<p>密码：<input type="password" name="password"></p>
<!--
label标签的for属性可以使得点击此label标签时让id=for的标签获得焦点
-->
<label for="username">用户名</label>
<input id="username" type="text" placeholder="用户名">
<!--单选框标签
input typle="radio"
value:单选框的值
name:表示组（name一样表示同一组，同时只能选中一个）
checked:默认选中-->
<p>性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女
</p>
<!--下拉框select
option:选项
selected:默认选中-->
<p>下拉框：
<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>
<!--多选框input type="checkbox"
checked:默认选中-->
<p>爱好：
<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>
<!--文本域textarea
cols:列数
rows:行数
-->
<p>反馈：
<textarea name="response" cols="50" rows="20">在这里填写反馈</textarea>
</p>
<!--文件域input type="file"-->
<p>
<input type="file" name="file">
<input type="button" name="upload" value="上传">
</p>
<!--邮箱input type="email"-->
<p>邮箱：
<input type="email" name="my-email">
</p>
<!--URL input type="url"-->
<p>URL：
<input type="url" name="my-url">
</p>
<!--数字input type="number"
max:最大值
min:最小值
step:步长
-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块input type="range"-->
<p>音量：
<input type="range" min="0" max="100" name="voice" step="2">
</p>
<!--搜索框input type="search"-->
<p>搜索：
<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>
- 表单应用
<!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>
树状结构
节点类型：元素节点、属性节点、文本节点
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果