HTML学习笔记
初始HTML
Hyper Text Markup Language（超文本标记语言）
网页的基本信息
<!--DOCTYPE：告诉浏览器使用的规范-->
<!DOCTYPE html>
<!--lang：表示浏览器使用的语言-->
<html lang="en">
<head>
<!--头部标签
<head>
meta：描述性标签，它用来描述我们的网站的一些信息：比如字符编码、关键字、描述网站作用。
<meta charset="UTF-8">
<meta name="keywords" content="IT教育，Java学习">
<meta name="description" content="描述网站的作用">
title：保存网页的标题
<title>Title</title>
</head>
-->
<meta charset="UTF-8">
<meta name="keywords" content="IT教育，Java学习">
<meta name="description" content="描述网站的作用">
<title>Title</title>
</head>
<body>
<!--主体标签
网页上的所有类容都在这个标签中
-->
</body>
</html>
网页的基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 水平线标签-->
<hr>
<hr>
<!--段落标签-->
<p>学习HTML1</p>
<p>学习HTML2</p>
<p>学习HTML3</p>
<!-- 换行标签-->
学习HTML1<br/>
学习HTML2<br/>
学习HTML3<br/>
<!--粗体，斜体-->
粗体：<strong>粗体标签</strong><br>
斜体：<em>斜体</em>
<!--特殊符号-->
<br>
空格：空 格
大于号：>
小于号: <
版权符号：©
</body>
</html>
图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
src:图片路径，可以是相对路径、绝对路径、网络路径
alt:图片描述，用于图片加载不出来显示
title："鼠标悬停显示文字"
width：宽
height：高
-->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</body>
</html>
超链接标签及其应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--a 标签
href: 必填，表示要跳转的页面。
target: 表示窗口在哪里打开
_blank 在新页面中打开
_self 在自己的页面打开
-->
<a name="top">顶部</a>
<a href="https://www.baidu.com" target="_blank">跳转百度</a>
<br>
<!--图片超链接-->
<a href="https://www.baidu.com" target="_self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<br><a href="https://www.baidu.com" target="_self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<br><a href="https://www.baidu.com" target="_self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<br><a href="https://www.baidu.com" target="_self">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138603849,4069782538&fm=26&gp=0.jpg" alt="网页图片" title="鼠标悬停显示文字" width="300" height="300">
</a>
<!--功能性链接
邮件链接：mailto
QQ链接：QQ推广自动生成
-->
<br>
<a href="mailto:30597117@qq.com">点击联系我</a>
<!--锚链接
1.需要一个标记
2.跳转到标记
#
-->
<br>
<a href="#top">回到顶部</a>
</body>
</html>
块元素和行内元素
块元素：无论内容多少都独占一行。
行内元素：内容撑开宽带，左右都是行内元素的可以排在一行。
列表
- 有序列表
- 无序列表
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
-->
<ol>
<li>java</li>
<li>python</li>
<li>c/c++</li>
</ol>
<!--无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
-->
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c/c++</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表格标签
table:标签
行：tr
列:td
跨行：rowspan
跨列：colspan
-->
<table border="1px">
<tr>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
音频和视频：audio/video
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<audio src="https://win-web-nf01-sycdn.kuwo.cn/2e9e1add78f34ed2c58f9241096da049/6005a74b/resource/n3/64/88/986676456.mp3" autoplay controls></audio>
<video src="https://apd-dd1ae084eb14697cf7b9488d43068b48.v.smtcdns.com/om.tc.qq.com/AN-9jOv30jhozvKsaibNCI2JTDbxxpqUJdNAJm58zAN4/uwMROfz2r5zIIaQXGdGnC2dfJ7wFnocHIQhYHck9TxbRMoti/a0373e06inx.p712.1.mp4?sdtfrom=v1010&guid=6ecf73cb0076f75adfe88536edeb6611&vkey=F5BFC3415CEFABBA06357B0BC6665FDE2634A4E641A930E043D7817D9D1CEF14681200D785DA6017EB6678121876212C8E451802265533FA026E78580E82A550105F86B77BA10763571A1D61BDF8CA431D4B7C209687148A22507965141EE70925C4872E4C860E725B2E056AF4457179F0E51D1004299B000B0CA550FB619FFD" controls autoplay></video>
</body>
</html>
页面结构分析
header：标记头部区域的类容
footer：标记脚部区域的内容
section：Web页面中的一块独立区域
article：独立文章内容
aside：相关类容或应用（常用于侧边栏）
nav：导航栏辅助内容
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
</body>
</html>
表单语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站、也可以是一个请求处理地址
method：post、get 提交方式
get方式提交：可以在url中看到我们提交的信息，不安全，高效。
post：比较安全、可以传输大文件。
-->
<form action="HTML基本信息.html" method="get">
<!-- input
type:
text:文本框
password：密码框
submit:提交按钮
reset:重置按钮
checkbox:单选框
radio:多选框
file:文件
hidden:隐藏
image:图片
button:按钮
value:默认初始值
maxlength:最长能写几个字符
size:文本框长度
readonly:只读
checked disabled：禁用
hidden：隐藏域
placeholder="请输入用户名"：提示信息
required: 非空判断
pattern：正则表达式验证
-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>名字：<input type="text" name="username" value="admin" readonly></p>
<p>密码：<input type="password" name="pwd" disabled></p>
<!--单选框： 性别
value:尽量填上
name：属性必须一样才能实现单选
-->
<p>
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 多选框：爱好
value:尽量填上
name：属性一个分组
-->
<p>
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>玩游戏
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图片按钮
<input type="submit"> 提交按钮
<input type="reset"> 重置按钮
-->
<p>
<input type="button" name="按钮名称" value="按钮显示名称">
<input type="image" src="1.jpg">
</p>
<!-- 下拉框、列表框
-->
<p>国家：
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth">瑞士</option>
</select>
</p>
<!-- 文本域
cols:行
rows:列
-->
<p>反馈：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
-->
<p>
<input type="file" name="files">
</p>
<!-- 输入验证-->
<p>自定义邮箱：
<input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
URL：
<input type="url" name="url">
</p>
<p>
数字：
<input type="number" name="num" max="100" min="0">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">点击我试试</label>
<input type="text" id="mark">
</p>
<!-- 滑块-->
<p>滑块：音量
<input type="range" name="voice" min="0" max="100">
</p>
<p>搜索框：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
