首页 > 编程语言 >零基础学Java第二十七天之前端-HTML5详解

零基础学Java第二十七天之前端-HTML5详解

时间:2024-06-01 11:30:17浏览次数:28  
标签:Java 定义 标签 第二十七 表单 HTML HTML5 网页

前端-HTML5详解

一、概述

HTML5是HTML的第五个版本,它对HTML进行了许多改进和扩展,使得网页开发更加丰富和便利。HTML5是Web标准的重要组成部分,旨在提高浏览器兼容性,统一网页开发标准。HTML5不仅包括了HTML的基本元素和标签,还新增了许多功能和API,为网页开发提供了更多的可能性。

二、基本用法

1、初步了解

HTML5的基本语法包括标签的组成和关系。标签由<>/、英文单词或字母组成,其中<>用于标识标签的开始和结束,/用于标识结束标签。HTML5中的标签分为双标签和单标签,双标签由开始标签和结束标签组成,例如

,单标签则只有一个标签。例如

2、基本骨架

HTML5的骨架通常包括,和三个标签。其中HTML标签是HTML文档的根元素,标签用于包含文档的元数据,如字符集、标题、样式表链接等,标签则用于包含网页的主体内容。

三、常用标签

1、段落标签

p标签 :

。P标签定义HTML段落

2、链接标签

a标签:。a标签 定义HTML链接,通过href属性指定链接的目标地址。

3、图像标签

img标签:<img src=“这里填图片的路径” alt=" 提供图像无法显示时的替代文本。 “> 。img标签定义HTML图像,通过src属性指定图像的文件路径,通过alt属性提供图像无法显示时的替代文本。

4、音频标签

video和audio标签,. 用于在网页中嵌入视频和音频内容,无需依赖第三方插件。

5、标题标签

h1~h6标签,表示1到6级标签

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

6、语义化标签

标签描述
头部标签
导航标签
内容标签
块级标签
侧边栏标签
尾部标签

7、列表-列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于

  • 标签。每个列表项始于

列如:

    • Coffee
    • Milk

    8、有序列表

    同样,有序列表也是一列项目,列表项目使用数字进行标记。

    有序列表始于

    1. 标签。每个列表项始于
    2. 标签。

    例如:

      • Coffee
      • Milk
      • 扩展:更换标记–>type (1 、A、a、i、I)

      9、表格

      表格由

      标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由
      标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

      完整的表格:

      cellspacing=“20px” :规定单元格之间的空白

      cellpadding=“5px” :规定单元格边沿与其内容的空白

      th:定义表头

      tr:行

      td:列

      例如:

      ​ ---- 表头

      ​ Header

      ​ — 表内容

      ​ Data

      ​ – 表末尾

      ​ Data

      10、表单

      HTML 表单用于收集用户输入。

      元素定义 HTML 表单:

      例如:

      ​ form elements

      HTML 表单包含表单元素。

      表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

      四、常用属性

      HTML5中的标签可以包含多个属性,用于指定标签的行为和样式。以下是一些常用的HTML5属性:

      1. classid:用于定义元素的样式和标识元素,class属性可以为多个元素指定相同的样式,id属性用于唯一标识一个元素。
      2. href:用于定义链接的目标地址,可以是URL或文档内的锚点。
      3. src:用于定义嵌入的资源的地址,如图片、音频、视频等。
      4. alt:用于定义当资源无法显示时的替代文本,提高网站的可访问性。
      5. title:用于定义鼠标悬停在元素上时显示的文本,如链接的提示文本。
      6. type:用于定义元素的类型,如表单中的输入框类型。
      7. value:用于定义元素的值,如表单中的输入框的默认值。

      五、应用场景

      HTML5在网页开发中有广泛的应用,包括但不限于以下几个方面:

      1. 视频和音频:通过标签简化在网页中嵌入视频和音频的过程。
      2. 绘图技术:Canvas和SVG允许开发者在网页上直接绘制图形、图表和动画。
      3. 本地存储:通过Web Storage和IndexedDB等API实现在浏览器端持久化存储数据。
      4. 响应式网页布局:通过引入新的语义化标签和媒体查询技术实现响应式网页设计。
      5. 地理位置:通过Geolocation API获取用户的地理位置信息,为定位相关的应用提供便捷的开发途径。

      标签:Java,定义,标签,第二十七,表单,HTML,HTML5,网页
      From: https://blog.csdn.net/qq_53720725/article/details/139371016

      相关文章

      • 零基础学Java第二十七天之前端HTML5新特性
        HTML5新特性定义文档类型在文件的开头总是会有一个标签语言HTML4,文档声明<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">语言HTML5,文档声明<!DOCTYPEhtml>新增语义化标签头部标签<header>导航标签<nav>内容标......
      • 零基础学Java第二十四天之注解的理解与使用
        注解1、什么是注解java.annotation包Annotation是从JDK1.5开始引入的新技术,注解即可以对程序员解释又可以对程序解释2、注解与注释的区别注释:对程序员解释代码信息注解:对程序和程序员解释代码信息3、注解的所用不是程序本身,可以对程序作出解释(与注释(comment)类......
      • 【html5期末大作业】基于HTML+CSS+JavaScript管理系统页面模板
        @TOC>......
      • Java数组
        Java数组1.数组概念数组的定义数组是相同类型数据的有序集合数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问他们2.数组声明创建首先必须声明数组变量,才能在程序中使用数组。下面是......
      • python参数传递与Java参数传递的对比
        目录一、本文简介二、参数传递的类型三、python中参数传递的类型3.1可变对象与不可变对象3.2对象引用传递和引用传递的区别3.3如何理解python中列表的"+"操作和append操作的区别四、Java中参数传递的类型附录一、本文简介python参数传递的类型是“对象引用传递”......
      • 运用JavaScript代码,使用Three.js框架在网页中实现3D效果,零基础入门Three.js,包含具体实
        不经意间看到了某个大佬做的网站~实在是太帅啦!查了查实现该效果的技术——原来是Three.js如果你也感兴趣的话,那就让我们来从零开始学习Three.js动态3D效果吧✨一、了解Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使......
      • 【华为OD】D卷真题100分:分割数组的最大差值 Java代码实现[思路+代码]
        【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C、D卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客JS、Java、python、C、C++代码实现:【华为OD】D卷真题100分:分割数组的最大差值JavaScript代码实现[思路+......
      • JAVAEE之文件IO_数据流概念,字节流:InputStream、OutputStream,字符流:reader、writer,及实
        什么是数据流 顾名思义,I表示input,O表示output,也就是输入输出流,主要是在程序与文件之间,用于传输数据的通道。既然要传输数据,那么我们需要理解文件和程序之间哪种方向的传输是输入流,哪种传输作为输出流?我们可以举一个例子,如下图所示: IO流是JavaIO中的核心概念。流......
      • 基于OJ的Java课程实验管理系统的设计与实现论文
        摘要课程实验网站是一个为课程提供全面、准确、及时课程实验的在线平台。它汇聚了各地的课程体验。该网站通过丰富的图片形式展示课程,让课程者提前感受到社区的乐趣。同时,它还提供了详细的课程攻略和实用建议,帮助课程者避免社区中的陷阱和误区,确保行程顺利。本课程实验......
      • [转帖]一次Java内存占用高的排查案例,解释了我对内存问题的所有疑问
         https://segmentfault.com/a/1190000044152595 原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明。问题现象7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值85%),而我们是按容器内存60%(9.6G)的比例配置的JVM堆内存......