web前端基础知识——HTML/HTML5

简介: HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面

目录

一,HTML

         1.HTML简介

         2.HTML标签

基本文档

基本标签

文本格式化

链接

图像

区块

列表

表格

框架

表单

实体

二,HTML5

新增元素

详细内容:



HTML


HTML简介

HTML 是用来描述网页的一种语言。


  HTML 指的是超文本标记语言: HyperText Markup Language

  HTML 不是一种编程语言,而是一种标记语言

  标记语言是一套标记标签 (markup tag)

  HTML 使用标记标签来描述网页

  HTML 文档包含了HTML 标签文本内容

  HTML文档也叫做 web 页面

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

基本文档


注:输入!可以快速生成


lang后面的是网页显示语言


charset后的是“万国码”


基本标签


文本格式化


链接


跳转页面时不覆盖当前页面 则在<a 内定义target=“_blank"


锚点链接:点击链接时,快速定位到链接的位置


图像


src后面跟着图片存在的路径,可为硬盘位置,也可为网址链接。alt 是当图片显示不出来的时候,文本代替图片显示。


路径分为相对路径和绝对路径


相对路径:


绝对路径:


图像和文字的位置:


区块


div和span的区别:



列表

无序列表


有序列表


自定义列表


表格

<tr>定义行


<td>定义列


<th>定义表头


跨行或跨列的单元格



框架


表单



注:maxlength为限制文字数目,checked为默认选择,value为默认内容

下拉列表:


预选:


实体


HTML5


新增元素

<canvas> 新元素

标签    描述

<canvas>    标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API


新多媒体元素

标签    描述

<audio>    定义音频内容

<video>    定义视频(video 或者 movie)

<source>    定义多媒体资源 <video> 和 <audio>

<embed>    定义嵌入的内容,比如插件。

<track>    为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。


新表单元素

标签    描述

<datalist>    定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

<keygen>    规定用于表单的密钥对生成器字段。

<output>    定义不同类型的输出,比如脚本的输出。


新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构:


标签    描述

<article>    定义页面独立的内容区域。

<aside>    定义页面的侧边栏内容。

<bdi>    允许您设置一段文本,使其脱离其父元素的文本方向设置。

<command>    定义命令按钮,比如单选按钮、复选框或按钮

<details>    用于描述文档或文档某个部分的细节

<dialog>    定义对话框,比如提示框

<summary>    标签包含 details 元素的标题

<figure>    规定独立的流内容(图像、图表、照片、代码等等)。

<figcaption>    定义 <figure> 元素的标题

<footer>    定义 section 或 document 的页脚。

<header>    定义了文档的头部区域

<mark>    定义带有记号的文本。

<meter>    定义度量衡。仅用于已知最大和最小值的度量。

<nav>    定义导航链接的部分。

<progress>    定义任何类型的任务的进度。

<ruby>    定义 ruby 注释(中文注音或字符)。

<rt>    定义字符(中文注音或字符)的解释或发音。

<rp>    在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。

<section>    定义文档中的节(section、区段)。

<time>    定义日期或时间。

<wbr>    规定在文本中的何处适合添加换行符。


详细内容:

  • canvas :HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

  • <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

  • 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

  • video :


  • audio:




  • input新增内容
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range(滑块设置)
  • search
  • tel
  • time
  • url
  • week

具体用法和HTML中一样




目录
相关文章
|
15天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
30 3
|
12天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
16天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
16天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
3月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
5月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
4月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
4月前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
6月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
300 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
6月前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
158 3

热门文章

最新文章