HTML详解

HTML详解

HTML 是简单的网页结构
而CSS 可以美化我们的基础网页
JavaScript可以让我们的网页 动态起来
而且JavaScript要学习一个Jquery
之后可以学习 VUE

---

---

上面目录中重点知识为：
表单及表单应用
和表单初级验证！！

---

---

网页基本信息

HTML的注释为 < !-- – >
快捷键注释 ctrl+/

---

网页基本标签

生成标签的快捷键
例如 标题标签 输出 h1
然后 按住Tab键即可
标签+Tab键

---

重点！！!
如果没有添加 段落标签 p
那么 上面的文字 就不会分段 而是直接成为一行文字

---

换行标签

br
换行之后你会发现文字之间非常的紧凑 跟段落标签相比

---

水平线标签

hr+Tab键

---

字体样式标签
粗体 strong+Tab键
斜体 em+Tab键

---

---

注释和特殊符号

特殊符号
空格键：&+nsbp；
大于号：&+gt；
小于号：&+lt；
版权符号：&+copy；

---

---

特殊符号
&+
会出现你想要符号 自行选择
或者搜寻百度

---

---

图片标签

相对路径
在表示相对路径中，单点表示当前目录，双点表示上一级目录，反斜杠“/”表示分隔目录；
相对路径特殊符号有以下几种表示意义：
◆以“./”开头，代表当前目录和文件目录在同一个目录里，“./”也可以省略不写！
◆以"…/“开头：向上走一级，代表目标文件在当前文件所在的上一级目录；
◆以”…/…/“开头：向上走两级，代表父级的父级目录，也就是上上级目录，再说明白点，就是上一级目录的上一级目录
◆以”/”开头，代表根目录

---

---

链接标签

功能有三个 ：
超链接 锚链接 功能性链接

---

行内元素和块元素

列表标签

有序列表 用 ol 表示
无序列表 用 ul 表示
无序列表 应用范围： 导航 侧边栏
有序列表 应用范围：试卷 问答

---

---

自定义列表 用 dl 表示
应用范围 公司网站底部

---

---

表格标签

表格 table
行标签 tr rows
列标签 td
border 加边框

---

---

行标签 tr rows
列标签 td
跨行：（用rowspan 来表示） 将一行内的几个单元格 变成一个单元格
跨列同理 用 colspan 来表示

---

---

媒体元素

视频和音频的区别
重点
标签中 如果没有加 controls
网页中 就不会出现视频和音频的资源
则 如果加入 controls 则会出现 以下图标

---

---

页面结构分析

iframe内联框架

内联框架：就是一个网站里面嵌套另外一个网站

---

---

所以可以得出 我们的网页也可以拼装组合

---

表单语法（重点）

易错点：
检查IDE中代码 看密码和账户
代码 是否全部写在了
form表单中
怎么查看 post发送表单中的密码和账号
第一步 打开网页
第二步 检查代码
第三步 点击network
第四步 点击Header

---

---

---

文本框和单选框

表单元素格式

单选框

重点：
radio为单选框！！！
value： 元素初始值 type为radio时必须指定一个值
注意 单选框中一定要有一个分组的概念！！！

---

---

多选框和按钮

checkbox 为多选框的意思

---

---

多选框
input type=“checkbox”
解释： 为什么value值为sleep
value=“sleep” 因为在Html页面上 我们可以看到“睡觉”的值
但是看不到 sleep 的值 所以 我们选定可以的值 那么 我们选定
“睡觉” 的值的时候 就等于选上了 “sleep”的值 所以value要复制等于"sleep"
注意多选框 也要加入分组的概念

---

---

按钮和图片按钮
一共四个按钮总结
input type=“button” 普通按钮
input type=“image” 图像按钮
input type=“submit” 提交按钮
input type=“reset” 重置按钮
value 可以给按钮命名值

---

---

列表框文本域和文件域

下拉框 列表框

重点： 下拉框不是input标签
它是 selcet标签

---

---

下拉框 列表框
下拉框默认选择该值 添加上selected即可

---

---

文本域
textarea name=“textarea”
cols=“30” rows=“10”
宽 30 高 10

---

---

文件域
input type=“file” name=“files”
就是选择电脑上的某一份文件

---

---

搜索框滑块和简单验证

URL 是网址

---

滑块用type= “range” 来表示
重点！！！
step 的意思为 每一个单元格的范围

---

---

表单的应用

只读标签 的意思是 改成自己想要的命名
然后在网页上就不能修改了
比如修改账号为 admin 但是在网页上就不能在更改
用 readonly来表示

---

---

还有
禁用标签
在选择框中 可以使用 disable 标签 来固定选择框
从而在页面上再也无法修改 单选框和双选框
checked 为默认选择

---

---

隐藏域标签
比如我们可以将 密码框隐藏掉
但是仍然可以传递出去密码
用 hidden 标签 来表示
在下图中
默认密码为 123456

---

---

还有一个隐藏功能 增强 鼠标可用性
就是点击文本框 旁边的文字
然后呢 鼠标键直接指向了文本框内

---

---

表单初级验证（增加用户安全性和质量性）

提高表单的质量性

---

placeholder标签 ：用户提示信息
例如 在账户输入中 提示用户输入用户名

---

---

required 标签：表示这个元素一定不能为空

---

重点！
pattern 标签：表示正则表达式（规则表达式）
比如下面我们自定义一个 规则的邮箱
参考网站 https://www.jb51.net/tools/regexsc.htm
还有 脚本之家
www.jb51.net

---

---

表单的初级验证 是为了提高用户的质量性
例如 淘宝中每天要增加很多用户
但是为了 避免一些用户填错信息 或者不填信息就提交表单
那么就增加了 过多的任务量
所以可以用表单验证来提高用户质量性

---

---

HTML 总结