HTML5
1. 项目创建及连接浏览器（IDEA）
-
项目创建
-
创建Java项目
-
联系html时可以删除src目录，因为没啥用
-
项目下创目录叫：html
-
html目录下new一个html file
-
-
IDEA连接浏览器
- 点击菜单项“File”
- setting
- 搜web
- Tool 下的 Web Browsers
- Path改为浏览器的exe文件地址
2. 基本网页信息
-
注释
-
规范
# 这里告诉浏览器使用html标准，一般情况下不写也行，因为浏览器默认使用此规范 # Ctrl + / 注释的快捷键 -
网站标题
内容 -
描述性标签
3. 网页基本标签
-
标题标签
xx
#一级标签 ...xx
#六级标签 -
段落标签
内容
# 快捷键 p+Tab -
换行标签
或者
-
水平线标签
或者
-
字体样式标签
内容 #粗体 内容 #斜体 -
特殊符号
#空格 > #大于号 < #小于号 © #版权符号 -
图像标签
#src 图像地址 #alt 图像替代文字（图片失效时显示） #title 鼠标悬停提示文字
注：资源应该放到项目下自己建立的目录“resources”，图片放在该目录下的目录“image”，视频应放到“video”等。
其中，绝对地址比较少用，要从根目录写完；相对地址比较常用，../表示上一级目录。
-
超链接
4. 行内元素和块元素
-
块元素
- 无论内容多少，该元素独占一行、自成一块;
- p、h1-h6...
-
行内元素
- 内容撑开宽度，左右都是行内元素可以排在一行，不会换行；
- a、strong、em...
5. 列表
-
有序列表(Order List)
- java
- Python
- 运维
- 前端
- C/C++
-
无序列表(Unorder List)
- java
- Python
- 运维
- 前端
- C/C++
-
自定义列表(Diy List)
一般用在公司网站底部；
- #标签
- 姓名 #列表名称
- 张三 #列表内容
- 李四
- 王五
- 性别
- 男
- 男
- 男
6. 表格
thead ：表头
th ：表头里面的内容，颜色会加深
tbody ：表主体
tfoot ：表尾
tr : table row
td : table data
col : 行
row : 列
特点 ：
- 每一个tr标签代表一行，如果这个tr标签有了跨行，那么下一行的被占的一格将会被上一行占用，下一行将会直接跨过这一格。
- 有时候写这个表格不需要太多标签，就tr和td组成就行，不太需要区分表头表尾（后面可能会改变看法）
学生成绩
hjq
语文
100
数学
100
qqq
语文
100
数学
100
7. 媒体元素
-
视频元素--video
-
音频元素--audio
8. 页面结构分析
元素名
描述
header
标记头部区域的内容（用于页面或页面中的一块区域）
footer
标记脚部区域的内容（用于页面或页面中的一块区域）
section
Web页面中的一块独立区域
article
独立的文章内容
aside
相关内容或应用（常用于侧边栏）
nav
导航内辅助内容
网页头部
网页主体
9. iframe内联框架
点击跳转到百度
iframe就是一个小窗口，嵌套在html窗口中，我们可以用name属性为这个小窗口赋予名字，超链接可以用这个名字跳转到这个小窗口中访问链接。
10. 表单post和get提交
11. 文本框和单选框
type
元素类型
name
表单元素的名称
value
元素的初始值。type为radio的必须指定一个值
size
指定表单元素的初始宽度。
maxlength
type为text或password的，输入的最大字符数
checked
type为radio或checkbox的，指定按钮是否被选中
性别：
男
女
12. 按钮和多选框
爱好：
睡觉
敲代码
按钮：
13. 列表框、文本域和文件域
14. 搜索框滑块和简单验证
15. 表单的应用
-
一些关键字
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
-
增强鼠标可用性（点文字可以锁定到输入框）
16. 表单的初级验证
为什么要进行验证：
- 减轻服务器的负担
- 安全
关键字：
- 提示信息：placeholder
- 非空判断：required
- 正则表达式：patten（自定义输入格式，如年月日等）
相关