HTML
目录
HTML
1. HTML 概述
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
2014年！！！
HTML 5作为W3C推荐标准发布。
关于浏览器
推荐 谷歌，火狐，Safari
推荐 360 极速浏览器
2. 第一个 HTML 代码
<html>
<head>
<title>第一个HTML页面</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>你好 HTML</h1>
</body>
</html>
3. HTML 标签分类
双边标签:
<html></html>
<head></head>
有开始标签，有结尾标签，结尾标签带有 </> 标记
单边标签:
<meta charset="utf-8"/>
一个标签结束，没有结尾标签，在当前标签中直接利用 / 结尾
可以根据 HTML 规范在 HTML 标签中加入【属性】
charset="utf-8"
charset 属性名
"utf-8" 属性值，属性值内容可以使用 "", ''包含 或者直接使用
结构:
<html>
<head></head>
<body></body>
</html>
html 告知解析器当前文本为 HTML 规范文本
head 可以存储标题<title> 页面配置，页面引用，包括页面 JS JQ 代码
body 对应页面内容，所见即所得！！！
HTML 标签不区分大小写，一般都是小写，方便~~~
4. HTML基本标签
4.1 结构标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-HTML基本标签结构</title>
</head>
<body>
<!-- ]
这个颜色像什么????
注释 ctrl + /
标签名 + tab 键 自动补齐
多个标签一起生成 标签名*n + tab 键 自动生成
-->
<h1>欢迎来到 千锋 ！！！</h1>
</body>
</html>
4.2 排版标签
注释
<!-- 注释内容 -->
换行
<br/>
Enter 键在 HTML 页面中不认为是换行，而且一个字符
段落:
<p>文本内容</p>
新闻页面，咨询页面，都会大量使用 p 标签
属性:
align 对齐方式 (left, center, right)
水平分割线
<hr/>
属性:
align 对齐方式 (left, center, right)
width 水平线的长度，单位一般采用 px 像素 或者可以使用百分比
size 水平线的粗细 像素单位
color 水平线的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-HTML排版标签</title>
</head>
<body>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<hr width="50%" size="20px" color="yellowgreen" align="right">
<!-- Enter 回车在 HTML 页面中视觉效果不是一个换行 需要使用 br 完成-->
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
</body>
</html>
4.3 块标签和行内标签
块标签
div
单独成行，具备宽高属性
行内标签
span
所有内容都在一行，不具备宽高属性
目前页面开发基本模块
CSS+DIV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-HTML块标签和行内标签</title>
</head>
<body>
<!-- 使用CSS修饰 div 和 span 标签，演示部分属性 -->
<!-- tips: div 标签是一个块标签，具备宽高属性 -->
<div style="width: 200px; height: 200px; background-color: red">Java</div>
<div style="width: 200px; height: 200px; background-color: blue">Java</div>
<div style="width: 200px; height: 200px; background-color: green">Java</div>
<hr>
<!-- tips: span 表示一个行内标签，不具备宽高属性 -->
<span style="width: 200px; height: 200px; background-color: red">BigData</span>
<span style="width: 200px; height: 200px; background-color: blue">BigData</span>
<span style="width: 200px; height: 200px; background-color: green">BigData</span>
</body>
</html>
4.4 文本标签【已过时】
font 标签已过时，重点是在前端页面，文本设置所关注的属性
属性:
size 字体大小 最大为 7 最小为 1
color 字体颜色
face 字体样式 例如 黑体，微软雅黑，阿里普惠...
文本/字体
size 尺寸
color 颜色
face 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-HTML字体文本标签</title>
</head>
<body>
<!--
size 1 ~ 7
color
1. 可以使用颜色对应的英文单词
2. RGB模式 Red Green Blue
-->
<font size="1" color="red" face="黑体">李豪有点东西~~~~</font><br>
<font size="2" color="green" face="幼圆">李豪有点东西~~~~</font><br>
<font size="3" color="black" face="宋体">李豪有点东西~~~~</font><br>
<font size="4" color="blue" face="隶书">李豪有点东西~~~~</font><br>
<font size="5" color="#9acd32" face="楷体">李豪有点东西~~~~</font><br>
<font size="6" color="#adff2f" face="微软雅黑">李豪有点东西~~~~</font><br>
<font size="7" color="#ff69b4" face="楷体">李豪有点东西~~~~</font><br>
</body>
</html>
4.5 文本格式标签
| 标签 | 格式 | 作用 |
|---|---|---|
| b | < b>< /b> | 加粗 |
| strong | < strong>< /strong> | 加粗 |
| em | < em>< /em> | 斜体 |
| i | < i>< /i> | 斜体 |
| small | < small>< /small> | 缩小 |
| big | < big>< /big> | 放大 |
| sub | < sub>< /sub> | 下标 |
| sup | < sup>< /sup> | 上标 |
| del | < del>< /del> | 删除 |
| u | < u>< /u> | 下划线 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-HTML文本格式标签</title>
</head>
<body>
<b>耿某淘宝购买口红，惨遭欺骗</b> <br>
<strong>耿某淘宝购买口红，惨遭欺骗</strong> <br>
耿某淘宝购买口红，惨遭欺骗 <br>
<hr>
<em>李某森控诉 mac 口红没有味道</em><br>
<i>李某森控诉 mac 口红没有味道</i><br>
李某森控诉 mac 口红没有味道 <br>
<hr>
<small>王·SingleDog·某·FPSP·平表示羡慕嫉妒恨</small><br>
<big>王·SingleDog·某·FPSP·平表示羡慕嫉妒恨</big><br>
王·SingleDog·某·FPSP·平表示羡慕嫉妒恨 <br>
<hr>
<b><big>王某平</big></b><sub>单身狗</sub> <br>
<b><big>王某平</big></b><sup>没朋友</sup> <br>
<hr>
<del>王乾羡慕王某平使用 b 标签</del><br>
<u>王乾羡慕王某平使用 b 标签</u>
</body>
</html>
4.6 标题标签
h1 ~ h6
h1 最大
h6 最小
基本特征:
文本加粗，单独成行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-HTML标题标签</title>
</head>
<body>
<!--
h1 ~ h6 用于标题
Markdown 文档中也是利用类似的内容
【注意】
h1 标签在单个 HTML 页面中，建议有且只有一个。
SEO 优化问题
h1 标签用于描述整个页面的核心内容。有且只有一个，方便搜索引擎进行数据检索
meta 标签中有两个属性页常用于 SEO 优化
description 网站描述
keywords 关键字
-->
<h1>春暖花开，等你归来</h1>
<h2>春暖花开，等你归来</h2>
<h3>春暖花开，等你归来</h3>
<h4>春暖花开，等你归来</h4>
<h5>春暖花开，等你归来</h5>
<h6>春暖花开，等你归来</h6>
</body>
</html>
4.7 列表标签
无序列表
<ul></ul>
有序列表
<ol></ol>
列表元素全部是
<li></li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-HTML列表标签</title>
</head>
<body>
<!--
无序列表
可以修改列表属性
type 属性 限制标记样式
circle 空心圆
square 方块
none 无标记
disc 实心圆[缺省属性]
-->
<ul type="disc">
<li>绿茶</li>
<li>红茶</li>
<li>普洱</li>
<li>白茶</li>
<li>乌龙</li>
</ul>
<hr>
<!--
有序列表
type 属性 限制标记样式
A 大写英文字母
a 小写英文字母
I 大写罗马数字
i 小写罗马数字
1 [缺省属性]
start 属性 限制标记起始
标记 从哪里开始
-->
<ol type="A" start="1000">
<li>茅台</li>
<li>五粮液</li>
<li>汾酒</li>
<li>西凤</li>
<li>剑南春</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-HTML列表嵌套</title>
</head>
<body>
<ul type="none">
<li>茶
<ul type="none">
<li>绿茶</li>
<li>红茶</li>
<li>白茶</li>
</ul>
</li>
<li>咖啡
<ul type="none">
<li>拿铁</li>
<li>美式</li>
<li>摩卡</li>
</ul>
</li>
<li>酒
<ul type="none">
<li>茅台</li>
<li>怼酒</li>
<li>西凤</li>
</ul>
</li>
</ul>
</body>
</html>
4.8 图形标签
img 标签
可以引入图片
属性:
src 图片地址，可以是本机服务器地址，也可以是网络地址
width 宽度，很少用
height 高度，很少用
border 边框
align 对齐方式
alt 提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-HTML图片标签</title>
</head>
<body>
<img src="./img/71821afd36a8a24c91c6e119fdde5841.png" alt="路见不平一声吼，大哥没有男朋友"> <br>
<hr>
<img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"
alt="迪丽热巴"
width="50%"
height="50%"
border="10px"> <br>
<hr>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp248982557.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651993398&t=84f0be289161e998c483342c7c30d059"
alt="迪丽热巴"
> <br>
</body>
</html>
4.9 链接标签
a 标签
可以在当前页面跳转到其他页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-HTML链接标签</title>
</head>
<body>
<!--
href
决定当前链接目标网站，可以是网络URL 也可以本机路径
target:
_blank 新窗口打开
_self 本窗口打开
-->
<a href="https://www.jiayuan.com" target="_blank">王某平官网</a> <br>
<a href="https://www.zhenai.com" target="_self">王某平官网</a> <br>
<hr>
<a href="10-HTML图片标签.html">王某平想要得不到</a> <br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-HTML锚点实现</title>
</head>
<body>
<a name="top"></a> <br>
<a href="#middle" style="color: red; font-size: 32px">页面中部</a><br>
<a href="#bottom" style="color: red; font-size: 32px">页面底部</a><br>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>
<a name="middle"></a> <br>
<a href="#top" style="color: green; font-size: 32px">页面顶部</a><br>
<a href="#bottom" style="color: green; font-size: 32px">页面底部</a><br>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>
<a name="bottom"></a> <br>
<a href="#top" style="color: blue; font-size: 32px">页面顶部</a><br>
<a href="#middle" style="color: blue; font-size: 32px">页面中部</a><br>
</body>
</html>
4.10 表格标签
<table>
表格标签
tr
行标签
td
列标签
th
表头标签/列标签
5. form 表单【重点】
5.1 form 表格基本样式和提交方式分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-HTML form表单基本样式和数据提交方式</title>
</head>
<body>
<!--
form 表单，用于提交数据到后台的一种方式
属性：
action 提交数据的目标地址，资源路径
method 提交数据的方式
GET
在 URL ? 之后，有对应的请求数据内容 数据模式为 Key=Value 模式，数据按照 & 区分
username=James&password=123456
1. 明文传递，在URL中传递对应参数
2. 不安全
3. 效率高
4. GET 请求有数据量限制，大约可以提交数据的极限是 2KB。一般用于搜索操作！！！
POST
通过 【请求实体】传递数据，数据形式也是对应 Key=Value 模式，数据不存在与 URL 中
1. 通过【请求实体】传递数据，数据有一定的安全性和私密性
2. 安全性还OK，可以通过一些插件进行加密操作。
3. 效率较低
4. POST 请求数据量理论没有限制，可以用于数据上传，可以解决修改，更新，删除，数据上传等操作。
-->
<h5>GET请求方式</h5>
<form action="16-测试文件.html" method="get">
<!--
input 输入框
type 决定当前输入框的类型
text 文本类型，可视化文本类型
password 密文类型
submit 提交按钮，触发按钮
-->
<span>用户:</span><input type="text" name="username"> <br>
<span>密码:</span><input type="password" name="password"> <br>
<input type="submit" value="提交">
</form>
<hr>
<h5>POST请求方式</h5>
<form action="16-测试文件.html" method="post">
<span>用户:</span><input type="text" name="username"> <br>
<span>密码:</span><input type="password" name="password"> <br>
<input type="submit" value="提交">
</form>
</body>
</html>
5.2 表单提交数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-HTML表单提交数据形式</title>
</head>
<body>
<!--
input type 属性类型分析
text
password
radio 单选 要求: name 属性必须一致 如果需要默认选中使用标记 checked
checkbox 多选 要求: name 属性必须一致 如果需要默认选中使用标记 checked
date 日期
file 文件
select 下拉菜单
option 是菜单项 默认选择 selected
textarea 文本框
在 form 表单中需要提交的数据内容必须有 name 属性，如果没有无法提交
-->
<form action="16-测试文件.html" method="get">
<span>用户:</span> <input type="text" name="username"> <br>
<span>密码:</span> <input type="password" name="password"> <br>
<span>性别:</span> <input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1" checked> 女 <br>
<span>爱好:</span> <input type="checkbox" name="hobby" value="0" checked> 篮球
<input type="checkbox" name="hobby" value="1"> 足球
<input type="checkbox" name="hobby" value="2"> 排球
<input type="checkbox" name="hobby" value="3"> 台球 <br>
<span>生日:</span> <input type="date" name="birth"> <br>
<span>头像:</span> <input type="file" name="icon"> <br>
<span>城市:</span> <select name="city">
<option value="0">安阳</option>
<option value="1">信阳</option>
<option value="2" selected>荥阳</option>
<option value="3">洛阳</option>
<option value="4">南阳</option>
</select> <br>
<span>简介:</span> <textarea name="info"></textarea> <br>
<input type="submit" value="提交">
</form>
</body>
</html>
