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




目录
相关文章
|
1天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
1天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
1天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
1天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
1天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
1天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
96 0
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
66 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
9月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
34 0