HTML标签及案例超详细笔记
卡卡之家
卡卡之家
卡卡之家
卡卡之家
卡卡之家
卡卡之家
卡卡之家
卡卡之家
卡卡之家
-
块级标签div ： 独占一行，自带换行；默认宽度为浏览器的部分宽度，高度默认会跟随元素内的文本内容而改变；
-
行级标签span ： 所有内容都在同一行，默认高度和宽度都会随着内容改变；
作用：
- 块级标签div主要是结合css做页面分块布局；
- 行级标签span主要进行友好提示信息的显示；
2.8.1 无序列表
ul(unorder list)：无序列表
type：
- 默认标识为实心圆 disc
- circle 空心圆
- square 黑色方块
- 兰博基尼
- 法拉利
- 宾利
2.8.2 有序列表
ol(order list)：有序列表
type：
- 默认标识为阿拉伯数字 1
- a A 字母字典顺序
- i I 罗马数字
- 兰博基尼
- 法拉利
- 宾利
2.8.3 定义列表
dl(defination list)：定义列表
dt(defination title)：定义标题
dd(defination description) ：定义描述
- 定义描述
定义标题- 定义描述
超链接可以是文本也可以是图片，可以点击链接标签，进入新的文档，或者是当前文档中的某个部分；a标签
属性：
- href="跳转的地址"跳转外网需要添加协议
- target：
* \_self：在当前窗口直接打开* \_blank：新建一个窗口打开这个资源地址* \_search：之前打开的页面存在，则不打开新的页面，直接复用超链接的两个作用：
-
连接到的url资源地址,进行页面的跳转；
-
可以作为锚点来使用；
2.9.1 连接到的url
跳转到百度
连接标签 打开百度
2.9.2 作为锚点
在同一个html页面中使用：
- 创建一个锚点(在指定的位置指定标记)：< a name=“锚点名称” >< /a >
- 创建跳转链接：< a href=“#锚点名称” >跳转< /a >
在不同的html页面中使用：
- 在指定的另一个页面中的某个位置指定标记：< a name=“锚点名称” >< /a >
- 在当前页面中创建跳转连接：< a href=“连接到的另一个页面的url#锚点名称” >跳转< /a >
超链接标签 点我试试
[跳转底部]
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
底部内容-底部导航部分
[跳转顶部]
< img /> 独立标签
属性：
- src：图片地址
- width：图片的宽度(单位像素或者百分比)
- height：图片的高度(单位像素或者百分比)
- border：边框
- alt：图片的文字说明 当图片未能正确加载时，才显示
- title：鼠标悬停时，显示的文字
图片标签 
表格由< table />标签来定义，每个表格均有若干行(由tr标签定义行)，每行由若干个单元格组成(由td标签来定义)；
table属性：
- 默认没有边框体现
- border:边框的宽度
- bordercolor:边框的颜色
- cellspacing:单元格的间距
- cellpadding:单元格与内容的间距
- width:宽度
- height:高度
- align:控制表格的对齐方式 left center right
带有标题的表格：
- caption：给表格添加标题；
2.11.1 普通表格
table tr td
td的属性：
- align：控制的单元格内容的对齐方式 left center right
- valign：控制单元格内容的垂直对齐方式 top middle bottom
表格的标签 学号 姓名 性别 1001 卡卡 男
2.11.2 表格的表头
th：默认居中字体加粗；
表格的标签 学号 姓名 分数 1002 糖糖 100
2.11.3 表格的列合并
colspan
表格的合并 学生信息表 学号 姓名 各科成绩 1 卡卡 80 90
2.11.4 表格的行合并
rowspan
表格的合并 学生表 学号 姓名 java HTML 1 卡卡 80 90 100 99
2.11.5 表格的拆分
表格的拆分：三个部分 thead,tbody,tfoot
- thead：头部分（导航栏部分）
- tbody：主体部分（中间的相关内容）
- tfoot：脚部分（底部相关的内容）
早期使用table做网页布局，网络的带宽比较慢；
- 使用table标签布局，只有等所有的table标签加载完毕后，才可以访问中间的内容，用户体验差；
表格的拆分 学校的平均成绩 学号 姓名 平均成绩 1001 张三 70 1002 李四 95 1003 王五 80
表单标签应用场景：登录、注册
嵌套这个标签，浏览器上的内容才能够提交到服务器上
- 注册：给后台发送注册的请求，后台存储起来，判断用户名是否在，如果存在反馈"注册失败…"
- 登录：给后台发送登录请求，后台判断用户是否已经登录了，给"用户提示"
2.12.1 标签属性
form标签：
- action:提交的地址url(服务器后台地址)
- method:提交方式分为get、post两种方式
- onsubmit：表单提交是否能提交
* οnsubmit=“return checkAll()”返回值是true（表单中所有的内容都满足条件，才能能提交）返回false，提交不成功name属性：给系统后台标记书写的内容
value属性：给输入框一个默认值
placeholder属性：在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏；
disable:是否禁用输入框
2.12.2 表单的两种提交方式
表单提交方式
get方式：
- 将用户的相关所有信息都提交到地址栏上
- get方式提交的不适合提交私密数据（不安全）
- get方式提交的用户的数据大小有限制
post方式（常用）：
- 不会将用户的数据提交到地址栏
- Post方式适合提交私密数据
- Post方式提交数据大小没有限制
2.12.3 标签案例
表单标签 用户名
密码
出生年月
- 账户:< input > type=“text” value:默认值 placeholder:提示
- 密码:< input > type=“password” value:默认值 placeholder:提示
- 性别:< input > type=“radio” checked:默认选中 value:默认值
- 地址：
* < select >下拉菜单 selected=“selected”：默认选中* < option > 下拉选项- 爱好：< input > checkbox
- 介绍: < textarea > < /textarea >文本
* rows:写多少行内容* cols:一行指定多个字符- 上传文件 input type=“file”
- 日期相关的 input标签 type=“date”
- 邮箱相关的input标签 type=“email” 符合邮箱格式
- 提交:< input > type=“submit”
- 重置 : < input > type=“reset”
表单标签 账户：
密码：
性别：<input type=“radio” name=“sex” value=“male” checked=“checked” 男
女
地址：
北京 上海 四川省 山西省 湖南省 甘肃省
爱好：<input type="checkbox"name=“hobby” checked=“checked”/>篮球
音乐
跑步
照片：
介绍：
重置
frame来表示框架标签
一个frame标签包含了一个html页面，当前出现两个或者两个页面的时候,需用框架集 (frameset)来表示该结构；
frameset属性：
- rows：按照横向划分（从上往下看）每一部分所占的权重百分比
* 假设有三部分：上、中、下* rows = “20%,70%,\*”（上20%、中70%、下10%）- cols：按照竖向划分（从左往右看）每一部分所占的权重百分比
* 假设有两部分：左、右* cols = “15%,\*”（左边15%、右边85%）frameset框架不能body共存
转义字符:© 代表©
2.14.1 Framset
框架标签 2.14.2 左边菜单页
左边菜单页面 - 信息管理
- 信息查询
- 返回首页
2.14.3 头部文件
头部文件 信息查询管理系统
2.14.4 中间页面
中间页面 欢迎进入管理系统
2.14.5 底部页面
底部页面 信息查询管理系统版权所有 © 20200709 
- 当a标签和frame一块使用的时候，指定的traget的地址就是在哪个frame(包含指定的那个页面)中打开；
================================================================================
综合案例 稀有的坚持高品质的大型传播机构
JavaEE分布式开发
JavaSE核心基础
加入我们
首页
课程培训
免费视频
公开课
企业合作
关于我们
加入我们
首页>课程培训>JavaEE列表
书籍选择
共10种
书名：XXX售价：180
书名：XXX售价：180
书名：XXX售价：180
书名：XXX售价：180
书名：XXX售价：180**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）
最后
前端校招精编面试解析大全点击这里即可获取完整版pdf查看
书籍选择
共10种
书名：XXX售价：180书名：XXX售价：180书名：XXX售价：180书名：XXX售价：180书名：XXX售价：180**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-Cc1BqpqN-1711667419683)]
[外链图片转存中…(img-7OxkiOWm-1711667419684)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-Id7Saerg-1711667419684)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）
最后
前端校招精编面试解析大全点击这里即可获取完整版pdf查看
