HTML标签及案例超详细笔记

从右边滚动到左边碰到边框就停止掉

---

来回滚动

---

交替滚动，背景色红色，滚动方向向右，速度25

2.5 原样输出标签

---

pre：将写的文本内容按照我们的格式原封不动的显示内容；

窗前明月光，疑是地上霜。

function checkUser(){

aleter("hello") ;

}

2.6 文本格式化标签

---

卡卡之家

卡卡之家

卡卡之家

卡卡之家

卡卡之家

卡卡之家

卡卡_之家

卡卡^之家

卡卡之家

卡卡之家

2.7 容器标签

---

• 块级标签div ： 独占一行，自带换行；默认宽度为浏览器的部分宽度，高度默认会跟随元素内的文本内容而改变；

• 行级标签span ： 所有内容都在同一行，默认高度和宽度都会随着内容改变；

作用：

• 块级标签div主要是结合css做页面分块布局；

• 行级标签span主要进行友好提示信息的显示；

2.8 列表标签

---

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) ：定义描述

  定义标题
  定义描述
  定义标题
  定义描述

  2.9 超链接标签

  ---

  超链接可以是文本也可以是图片，可以点击链接标签，进入新的文档，或者是当前文档中的某个部分；a标签

  属性：

  • href="跳转的地址"跳转外网需要添加协议

  • target：

  *   \_self：在当前窗口直接打开
  

  *   \_blank：新建一个窗口打开这个资源地址
  

  *   \_search：之前打开的页面存在，则不打开新的页面，直接复用
  

  超链接的两个作用：

  1. 连接到的url资源地址,进行页面的跳转；

  2. 可以作为锚点来使用；

  2.9.1 连接到的url

  跳转到百度

  打开百度

  2.9.2 作为锚点

  在同一个html页面中使用：

  • 创建一个锚点(在指定的位置指定标记)：< a name=“锚点名称” >< /a >

  • 创建跳转链接：< a href=“#锚点名称” >跳转< /a >

  在不同的html页面中使用：

  • 在指定的另一个页面中的某个位置指定标记：< a name=“锚点名称” >< /a >

  • 在当前页面中创建跳转连接：< a href=“连接到的另一个页面的url#锚点名称” >跳转< /a >

  点我试试
  

  [跳转底部]
  

  网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容

  底部内容-底部导航部分
  

  [跳转顶部]

  2.10 图片标签

  ---

  < img /> 独立标签

  属性：

  • src：图片地址

  • width：图片的宽度(单位像素或者百分比)

  • height：图片的高度(单位像素或者百分比)

  • border：边框

  • alt：图片的文字说明 当图片未能正确加载时，才显示

  • title：鼠标悬停时，显示的文字

  

  2.11 表格标签

  ---

  表格由< 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 表单标签

  ---

  表单标签应用场景：登录、注册

  嵌套这个标签，浏览器上的内容才能够提交到服务器上

  • 注册：给后台发送注册的请求，后台存储起来，判断用户名是否在，如果存在反馈"注册失败…"

  • 登录：给后台发送登录请求，后台判断用户是否已经登录了，给"用户提示"

  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 标签案例

  用户名

  
  

  密码

  
  

  出生年月

  2.13 利用表单标签完成登录

  ---

  • 账户:< 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”/>篮球

  音乐

  跑步
  

  照片：
  

  介绍：
  

         

  重置

  

  2.14 框架标签

  ---

  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(包含指定的那个页面)中打开；

  3. 基本标签的综合案例

  ================================================================================

  # 最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  set=“UTF-8”>

  欢迎进入管理系统

  2.14.5 底部页面

  信息查询管理系统版权所有 ^© 20200709

  

  • 当a标签和frame一块使用的时候，指定的traget的地址就是在哪个frame(包含指定的那个页面)中打开；

  3. 基本标签的综合案例

  ================================================================================

  # 最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-xzn151KB-1714867385327)]

  [外链图片转存中…(img-5zqxN3TS-1714867385328)]

  [外链图片转存中…(img-KV4hqBBh-1714867385328)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！