HTML笔记-狂神
1. 初识HTML
什么是HTML？
Hyper Text Markup Language : 超文本标记语言
- 超文本包括：文字、图片、音频、视频、动画等
目前使用的是HTML5，使用 W3C标准
W3C标准包括：
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、JavaScript）
2. 网页基本元素
HTML基本结构
- 网页头部
- 主体部分
网页基本信息
- DOCTYPE声明：告诉浏览器，我们要使用什么规范
- 标签 ：网页标题
- 标签：描述性标签，用来描述网站的一些信息
"en">
"UTF-8">
"keyboards" content="Java">
"description" content="学习Java">
Title
HelloWorld
3. 网页基本标签
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
"en">
"UTF-8">
基本标签
一级标签
二级标签
六级标签
这是一整段这是一整段这是一整段这是一整段
这是一整段这是一整段这是一整段
这是一整段这是一整段
这是一整段
这是一整段
第一段
第二段
第三段
第一行
第二行
粗体：I LOVE YOU
斜体：I LOVE YOU
空 ; ; ; ; ;格：
大于号：>;
小于号：<;
版权符号：©;
4. 图像标签
常见图像格式：
JPG
GIF
PNG
BMP：位图
…
语法：
"path" alt="text" title="标题" width="x" height="y">
src：图像地址
alt：图像的替代文字（找不到该图片时，才会显示）
title：鼠标悬停提示文字
width:图像宽度
height:图像高度
练习：新建放置图片的目录
--src:图片地址
相对地址：../ 1.html文件的上一级目录
(不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
"../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
5. 链接标签
文本超链接：点击文本进行跳转
图像超链接：点击图片进行跳转
语法：
"path" target="目标窗口位置">链接文本或图像
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开
_blank：在新的标签页打开
_self:在自己的网页中打开
练习：
"http://www.baidu.com" target="_blank">点击我跳转到百度
"http://www.baidu.com">
"../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
锚链接：
- 通过# 实现页面间的跳转
- 跳转到另一个页面指定的位置
练习：
"top">我是顶部
--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
"#top">跳转到顶部
功能性链接
"mailto:[email protected]">点击联系我！
6. 行内元素和块元素
块元素
- 无论内容多少，该元素独占一行
- p标签、h1-h6…
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排一行
- a 标签、strong 标签、em 标签…
7. 列表
列表的分类：
- 有序列表
- 无序列表
- 自定义列表
- Java
- python
- 运维
- Java
- python
- 运维
- 学科
- Java
- python
- 运维
- 位置
- 北京
- 珠海
效果：
8. 表格
为什么使用表格？
- 简单通用
- 结构稳定
基本结构：
- 单元格
- 行 tr
- 列 td
- 跨行 rowspan
- 跨列 colspan
"1px">
1-1
1-2
1-3
1-4
2-1
2-2
2-3
2-4
3-1
3-2
3-3
3-4
效果：
"1px">
"2">1-1
1-2
1-3
"2">2-1
2-2
2-3
2-4
3-2
3-3
3-4
效果：
9. 媒体元素
视频元素：video
音频元素：audio
10. 页面结构分析
网页头部
网页主体部分
11. iframe内联框架
语法：
引用页面地址 框架标示名
"https://www.bilibili.com/" target="hello">点击我跳转到B站
12. 初识表单post和get提交
表单语法：
效果：
表单元素格式
13. 文本框和单选框
单选框：
"radio" value="boy" name="sex" checked/>男
"radio" value="girl" name="sex"/>女
多选框：
爱好：
"checkbox" value="sleep" name="hobby" checked>睡觉
"checkbox" value="book" name="hobby">看书
"checkbox" value="swimming" name="hobby">游泳
"checkbox" value="write" name="hobby">写作
14. 按钮和多选框
普通按钮：
按钮：
"button" name="btn1" value="点击查看">
效果：
图片按钮：
"image" name="bt2" src="../resources/image/1.jpg">
下拉框：
国家：
15. 文本域和文件域
文本域：
反馈：
文件域：
"file" name="files">
16. 搜索框滑块和简单验证
邮箱：
"email" name="email">
URL：
"url" name="url">
number：
"number" name="number" max="100" min="0" step="10">
音量：
"range" name="voice" min="0" max="10">
搜索：
"search" name="search">
17. 表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
只读：
姓名："text" name="username" value="lisa" readonly>
禁用：
"radio" value="boy" name="sex" disabled/>男
"radio" value="girl" name="sex"/>女
密码："password" name="password" hidden value="123456">
增强鼠标的可用性：
增强鼠标的可用性：
"text" id="mark">
点击文字，自动跳转到对应的输入框
18. 表单初级验证
思考：
- 减轻服务器的压力
- 安全性
常用方式：
- placeholder 提示信息
- required 元素不能为空，应用于所有的文本框中
- pattern 正则表达式
姓名：
"text" name="username" placeholder="请输入用户名">
姓名：
"text" name="username" placeholder="请输入用户名" required>
自定义邮箱：
"text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">