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

2024-08-21 04:20

本文主要是介绍Java学习Day31:HTML 第一章:观音禅院,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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
  2. colspan 指示列的合并
  3. 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. 模糊查找

这篇关于Java学习Day31:HTML 第一章:观音禅院的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1092106

相关文章

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流(parallelStream)的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面:本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一:使用 which命令方法二:使用 Java_home工具(Apple 官方推荐)那问题来了,

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述:HashMap的宏观结构二、核心数据结构解析1. 数组(桶数组)2. 链表节点(Node

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点(如日志、事务)与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么?二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储:配置灵活性:编码示例引入依赖:配置ehcache.XML文件:配置

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程?1.2 为什么需要虚拟线程?二、虚拟线程与平台线程对比代码对比示例:三

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多