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中一样




目录
相关文章
|
11月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
848 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
259 2
|
移动开发 前端开发 安全
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1274 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
599 25
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
前端开发 JavaScript

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1254
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    569
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    432
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    433
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    546
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    724
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1405
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    314
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1167
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    508