HTML
超文本标记语言 — Hyper Text Markup Language
W3C标准
W3C：World Wide Web Consortium
W3C标准包括：
结构化标准语言(HTML,XML)
表现标准语言(CSS)
行为标准(DOM,ECMAScript)
1.网页基本信息
<!--告诉浏览器，使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息-->
<meta charset="UTF-8">
<meta name="Keywords" content="llll的主页">
<meta name="description" content="记录lll的学习日常">
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
hello,world
</body>
</html>
2.基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>哥舒歌</p>
<p>[唐] 西鄙人</p>
<p>北斗七星高，哥舒夜带刀</p>
<p>至今窥牧马，不敢过临洮</p>
<!--换行标签-->
哥舒歌<br/>
[唐] 西鄙人<br/>
北斗七星高，哥舒夜带刀<br/>
至今窥牧马，不敢过临洮<br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签，粗体和斜体-->
<h1>字体样式标签</h1>
粗体： <strong>you are my son</strong><br/>
斜体： <em>you are my son</em><br/>
<!--特殊符号-->
空 格<br/>
大于号：><br/>
小于号：<<br/>
版权符号：©<br/>
</body>
</html>
3.图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
img标签学习
src：图片地址：相对地址，绝对地址
../ 上一级目录
alt:图像的名字
title：鼠标悬停文字
-->
<img src="../resources/y.jpg" alt="小黑" title="悬停文字" width="300" height="180">
<br/>
<a href="超链接标签及应用.html#down">down</a>
</body>
</html>
4.超链接标签及应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">top</a>
<br/>
<!--
a标签
href：要跳转到那个页面
target：表示窗口在哪打开
_blank 在新标签中打开
_self 在自己的网页中打开
-->
<a href="1.网页基本信息.html" target="_blank">页面一</a>
<br/>
<a href="https://www.baidu.com" target="_self">百度</a>
<br/>
<a href="1.网页基本信息.html">
<img src="../resources/y.jpg" alt="小黑" title="悬停文字" width="300" height="180">
</a>
<br/>
<!--
锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<br/>
<a name="down">down</a>
<br/>
<!--
功能性链接
邮件链接：mailto
-->
<a href="mailto:[email protected]">联系</a>
<br/>
</body>
</html>
行内元素和块元素
- 块元素:无论内容多少，该元素独占一行(p hr h1~h6)标签
- 行内元素:内容撑开宽度，左右都是行内元素的可以排在一行(a strong em)标签
5.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ul>
<!-- 无序列表嵌套 -->
<ul>
<li>Python
<ul>
<li>基础部分</li>
<li>高级部分</li>
</ul>
</li>
<li>Java
<ul>
<li>JavaSE</li>
<li>JavaEE</li>
</ul>
</li>
</ul>
<!-- 自定义列表 -->
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
</body>
</html>
6.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- 跨行 -->
<td rowspan="2">1-1</td> <!-- 1-1跨两行 -->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- 跨列 -->
<td colspan="2">2-1</td> <!-- 2-1跨两列 -->
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
7.媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!-- 视频元素 -->
<!--视频
src 资源路径
controls 控制面板
autoplay 自动播放
-->
<video src="./src/video/脑电数据相似度比对.mp4" controls width="800" height="600"></video>
<!-- 音频元素 -->
<audio src="./src/audio/心墙.mp3" controls></audio>
</body>
</html>
8.页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<!--
header 标题头部区域的内容（用于页面或者页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用
nav 导航类辅助内容
-->
<header>
<h1>网页头部</h1>
</header>
<section>
<h2>独立区域</h2>
</section>
<footer>
<h3>网页脚部</h3>
</footer>
</body>
</html>
9.iframe内联框架
<iframe src="path" name="mainFrame" ></iframe>
<!-- 自定义跳转 在name=hello的iframe打开哔哩哔哩 -->
<iframe src="" frameborder="0" name="hello" width="500" height="1000"></iframe>
<a href="https://www.bilibili.com" target="hello">点击进入哔哩哔哩</a>
- ifram标签，必须要有src属性即引用页面的地址
- 给标签加上name属性后，可以做a标签的target属性，即在内联窗口中打开链接
10.学习表单(重要)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习表单</title>
</head>
<body>
<!--表单form
action：表单提交的动作，可以是交给一个网址，也可以是交给一个请求处理地址
method：post get请求方式
-->
<form action="1.我的网页.html" method="GET">
<!--文本输入框：input type="text"-->
<p>用户名:
<!-- placehoder 输入框内的提示信息 -->
<input type="text" name="username" placeholder="请输入用户名" maxlength="10" size="20" id="mark">
</p>
<p>密码:
<!-- required 不能为空 -->
<input type="password" name="password" placeholder="请输入密码" required>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
<!-- radio单选框标签 value即单选框的值，在提交时对应value
name：单选框组名，在同一个组内的radio标签同时只能选中一个，name值在提交时对应key
checked:默认被选中
-->
<p>性别:
<input type="radio" name="sex" value="boy" checked >男
<input type="radio" name="sex" value="girl">女
</p>
<p>爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="singe">唱歌
</p>
<p>文字按钮与图片按钮:
<input type="button" name="btn1" value="文字按钮">
<input type="image" src="./src/img/baidu.png" width="200" height="100">
</p>
<p>国家选择:
<select name="location" id="locat">
<!--下拉框：selected:默认选项-->
<option value="china" selected>中国</option>
<option value="USA">美国</option>
<option value="UK">英国</option>
</select>
</p>
<p>文本域:
<textarea name="text" id="text0" cols="30" rows="10">文本内容</textarea>
</p>
<p>文件域:
<input type="file" name="files" id="f1">
<input type="button" name="upload" value="上传">
</p>
<!--邮件：会简单验证是否是邮箱地址
url：会简单验证是否是网络地址
number：数字验证
-->
<p>邮箱:
<input type="email" name="email">
</p>
<p>网址:
<input type="url" name="url">
</p>
<!--数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p>商品数量:
<input type="number" name="num" max="100" min="1" step="1">
</p>
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>搜索:
<input type="search">
</p>
<p>增强鼠标可用性(点击跳转):
<label for="mark">点我试试</label>
</p>
<input type="submit">
<input type="reset">
<!-- 一些其他属性
readonly 只读，不可更改
disable 禁用
hidden 隐藏，虽然不可见但是会提交
id 标识符，可以配合label的for属性增加鼠标的可用性
patten 正则表达式验证
-->
</form>
</body>
</html>