当前位置： 首页 > news >正文

Java学习Day31：HTML 第一章：观音禅院

news 来源：原创 2024/9/20 12:37:13

1.结构介绍

1.标签的分类

<单词> ：元素标签 <元素 单词>：首先<>中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签

2.文本元素

  1. 段落元素

    1. 段落元素

  2. 换行标签 br

  3. 水平线标签
    1. 标签会在页面上产生一个水平线
    2. 常用属性
      1. align：可取值有left right center 代表水平线位置
      2. size： 代 表 水 平 线 厚 度 （ 粗 细 ）
      3. width：代表水平线宽度
      4. color：水平线的颜色
  4. 分区标签
    1. div是一个块标签，用来进行布局的；独占一行！
    2. div与span都是“容器”的作用，具体区别:
      1. div会自动换行，我们也叫这样的标签为块级元素
      2. span标签它不会自动换行，我们也叫它为行内元素
      3. div：整体划分区块
      4. span：局部划分

3.字体标签

  1. 字体标签
    1. 标签可以设置字体，字的大小及颜色，常用属性：
      1. face:用于设置字体
      2. size:用于设置字的大小
      3. color:用于设置字的颜色
        1. 英文：red，blue等
        2. 十六进制：#000000-#FFFFFF
        3. RGB颜色表示
  2. 标题标签 1-6号大小不同
  3. 格式化标签
    1. ：字体加粗
    2. ：字体倾斜
    3. ：删除线
    4. ：下划线

  4. 4.列表标记

    ol：有序列表
    1. type='A'：字母排序
    2. type='I'：罗马排序
    3. start=“3” 序列从几开始

  1. ul：无序列表
    1. type="disc"：默认，实心圆
    2. type="square"：方块
    3. type="circle"：空心圆

5.多媒体元素

  1. 图片标签：image
    1. 的常用属性
    1. src的三种类型
      1. 文件地址
      2. data URL
      3. object URL
    2. width 图片的宽度
    3. height 图片的高度
    4. border 用于设置图片的边框
    5. alt 默认显示的文本信息
    6. title 鼠标悬停，默认显示的文本信息
    7. align 图片附件文字的对齐
      1. left：
      2. right
      3. middle
      4. top
      5. bottom
  1. 视频标签：video  width 宽  controls 进度条
  2. 音频标签：audio 与视频标签类似

6超链接标签

  1. 锚，超链接（anchor）
    1. 超链接文本
    2. 图片标签
    3. target属性：规定在何处打开连接
      1. _blank 新窗口打开
      2. _self，默认，在本窗口打开
    4. 地址分为
      1. 本地网址
      2. 互联网网址
      3. 页面内锚点

7.表格

  1. ：定义一个表格
    1. border：边框，取值是像素为单位
    2. width 代表的表格的宽度
    3. align 代表表格的对齐方式
      1. left
      2. right
      3. center
    4. cellspacing：单元格间距（通常设置0表示单线表格)
    1. align
    2. left
    3. right
    4. center
  3. colspan 指示列的合并
  4. rowspan 指示行的合并

：表格中的行 （Table Row）：表格中的数据单元格 （Table DataCell)

8表单标签

  • 负责向后端提交数据
    • 登录
    • 注册

  1. action：整个表单提交的目的地
  2. method：表单提交的方式
    1. get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
    2. post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
  3. enctype：数据格式

9.表单中的元素(控件)

  1. 元 素 的 type 属 性
    1. text：默认值，普通的文本输入框
      1. placeholder属性：提示文本
      2. maxlength属性：最多能输入字符数量
    2. password：密码输入框
    3. checkbox：多选框/复选框
      1. checked：默认选中
    4. radio：单选按钮
    5. file：上传文件
    6. reset：重置按钮
    7. submit：提交按钮
    8. button：普通按钮
  2. ：下拉列表/下拉框
      1. selected：默认选中
  3. ：文本域
    1. 可以通过 cols 和 rows 属性来规定行数和列数
  4. ：按钮
    1. 在form表单中，作用和submit一样
    2. 不在form表单中，就是普通按钮
  5. : 元素标签
    1. 与控件形成关联，为 input 元素定义标注（标记）
    2. for中的内容与控件中的id关联。

10.HTML5新特性

10.1新特性

  1. 大小写不敏感
    1. 对于标签、属性、属性的值大小写都可以，没有影响
  2. 引号可省略

<input type="password"> <input type=password>

  1. 省略了结尾标签
    1. html是自动补全了

10.2 新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此   新增许多语义化标签，让div“见名知意”

  1. section标签：表示页面中的内容区域，部分，页面的主体部分
  2. article标签：文章
  3. aside标签：文章内容之外的，标题
  4. header标签：头部，页眉，页面的顶部
  5. hgroup标签：内容与标题的组合
  6. nav标签：导航
  7. figure标签：图文并茂
  8. foot：页脚，页面的底部

10.3媒体标签

于3.0多媒体标签中，这里补充一下属性

  1. autoplay：自动播放（谷歌失效，360浏览器可以）
  2. loop：循环播放

10.3新增表单空间

  1. ，修改type属性
    1. color：调色板
    2. date：日历
    3. month：月历
    4. week：周历
    5. number：数值域
      1. min：最小值（默认值是1）
      2. max：最大值（默认值无上限）
      3. step：递增量
    6. range：滑块
    7. search：搜索框
      1. （带×号，可一键删除框中内容） 进度条
      2. 高亮
      3. 模糊查找

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 低代码开发：机遇与挑战
  • python 可迭代，迭代器，生成器，装饰器
  • SpringBoot+Echarts实现可视化图表（Thymeleaf，Vue3.0两种实现）
  • Json-类型映射使用TypeFactory或者TypeReference
  • 多视点抓取（Multi-View Grasping）
  • STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(3)
  • 智慧社区新视界：EasyCVR视频汇聚平台下的数字化治理实践
  • 【Solidity】合约交互基础
  • google浏览器chrome用户数据（拓展程序，书签等）丢失问题
  • 多线程（4）——单例模式、阻塞队列、线程池、定时器
  • ATGM332D-F8N低功耗、小尺寸单北斗多频定位导航模块规格书
  • 金九银十秋招大模型岗位攻略来了，已收offer，非常详细收藏我这一篇就够了
  • 你是如何克服编程学习中的挫折感的？
  • 2024下半年软考全国报名时间汇总，附报名费用！
  • 巡检机器人有哪些功能和应用场景
  • ----------
  • [数据结构]链表的实现在PHP中
  • 【划重点】MySQL技术内幕：InnoDB存储引擎
  • Apache Spark Streaming 使用实例
  • Apache的80端口被占用以及访问时报错403
  • CentOS6 编译安装 redis-3.2.3
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • ES学习笔记(12)--Symbol
  • JavaScript创建对象的四种方式
  • Laravel Mix运行时关于es2015报错解决方案
  • Linux链接文件
  • spring学习第二天
  • Twitter赢在开放，三年创造奇迹
  • ViewService——一种保证客户端与服务端同步的方法
  • 笨办法学C 练习34：动态数组
  • 编写符合Python风格的对象
  • 大整数乘法-表格法
  • 精彩代码 vue.js
  • 看完九篇字体系列的文章，你还觉得我是在说字体？
  • 力扣(LeetCode)965
  • 聊聊hikari连接池的leakDetectionThreshold
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 如何设计一个微型分布式架构？
  • 深度学习在携程攻略社区的应用
  • 使用putty远程连接linux
  • 应用生命周期终极 DevOps 工具包
  • 云栖大讲堂Java基础入门（三）- 阿里巴巴Java开发手册介绍
  • Spring第一个helloWorld
  • ​如何使用QGIS制作三维建筑
  • #07【面试问题整理】嵌入式软件工程师
  • #控制台大学课堂点名问题_课堂随机点名
  • (160)时序收敛---＞(10)时序收敛十
  • （PWM呼吸灯）合泰开发板HT66F2390-----点灯大师
  • (阿里巴巴 dubbo,有数据库，可执行 )dubbo zookeeper spring demo
  • （二）【Jmeter】专栏实战项目靶场drupal部署
  • （翻译）Quartz官方教程——第一课：Quartz入门
  • （附源码）python旅游推荐系统 毕业设计 250623
  • （附源码）springboot家庭财务分析系统 毕业设计641323
  • (每日持续更新）jdk api之StringBufferInputStream基础、应用、实战
  • （四）TensorRT | 基于 GPU 端的 Python 推理