编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作

简介: 编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作


在编写网页之前,对网页内容及操作进行一个基本分类,然后接下来的任务就分别加以处理。本节队列了按功能排序的HTML标签 (HTML5 标准)。

网页上的内容和操作有很多种,以下是一些常见的内容和操作:

一、内容分类

  1. 文字内容:网页上可以包含各种文字内容,如文章、新闻、博客等。
  2. 图片和视频:网页上可以展示图片和视频,让用户直观地了解和欣赏内容。
  3. 链接:网页可以提供链接,让用户跳转到其他网页或不同部分的网页。
  4. 表格和列表:网页上可以显示表格和列表,方便用户查看和比较不同的数据。
  5. 表单:网页可以包含表单,用户可以填写信息或进行交互操作。
  6. 导航菜单:网页上可以有导航菜单,让用户方便地浏览和切换网页内容。
  7. 搜索功能:网页可以提供搜索功能,让用户快速找到所需的信息。
  8. 注册和登录:网页上可以提供用户注册和登录功能,让用户进行身份验证和个人化操作。
  9. 按钮和链接:网页上可以有各种按钮和链接,用户可以点击进行操作或跳转到其他页面。
  10. 下拉菜单:网页上的下拉菜单提供更多选项和功能,用户可以选择所需的操作。

这些只是一些常见的网页内容和操作,具体还会根据网页设计和功能的不同而有所变化。

二、样式

有内容就得有形式,尤其这网页就是看的。这里不叫形式,叫样式,使用CSS来解决,它和HTML是配合的关系。

三、互动

很多时候,网页并不是静态的,想想那个购物网站,是不是需要一些操作?或者叫互动。这个呢主要使用Javascript来处理。就是真的要用一种程序设计语言来解决了。

四、HTML标签 (HTML5 标准)

按功能排序,New : HTML5 新标签,已经废弃的标签本表已经删除,来源https://www.runoob.com/tags/ref-byfunc.html

标签  描述
基础   
<!DOCTYPE>  定义文档类型。
<html>  定义一个 HTML 文档
<title> 为文档定义一个标题
<body>  定义文档的主体
<h1> to <h6>  定义 HTML 标题
<p>   定义一个段落
<br>  定义简单的折行。
<hr>  定义水平线。
<!--...-->  定义一个注释
格式   
<abbr>  定义一个缩写。
<address> 定义文档作者或拥有者的联系信息。
<b>   定义粗体文本。
<bdi> New 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<bdo> 定义文本的方向。
<blockquote>  定义块引用。
<cite>  定义引用(citation)。
<code>  定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em>  定义强调文本。 
<i>   定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark>  New 定义带有记号的文本。
<meter> New 定义度量衡。仅用于已知最大和最小值的度量。
<pre> 定义预格式文本
<progress>New 定义运行中的任务进度(进程)。
<q>   定义短的引用。
<rp>  New 定义不支持 ruby 元素的浏览器所显示的内容。
<rt>  New 定义字符(中文注音或字符)的解释或发音。
<ruby>  New 定义 ruby 注释(中文注音或字符)。
<s>   定义加删除线的文本。
<samp>  定义计算机代码样本。
<small> 定义小号文本。
<strong>  定义语气更为强烈的强调文本。
<sub> 定义下标文本。
<sup> 定义上标文本。
<time>  New 定义一个日期/时间
<u>   定义下划线文本。
<var> 定义文本的变量部分。
<wbr>New  规定在文本中的何处适合添加换行符。
表单   
<form>  定义一个 HTML 表单,用于用户输入。
<input> 定义一个输入控件
<textarea>  定义多行的文本输入控件。
<button>  定义按钮。
<select>  定义选择列表(下拉列表)。
<optgroup>  定义选择列表中相关选项的组合。
<option>  定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset>  定义围绕表单中元素的边框。
<legend>  定义 fieldset 元素的标题。
<datalist>  New 规定了 input 元素可能的选项列表。
<keygen>  New 规定用于表单的密钥对生成器字段。
<output>  New 定义一个计算的结果
框架   
<iframe>  定义内联框架。
图像   
<img> 定义图像。
<map> 定义图像映射。
<area>  定义图像地图内部的区域。
<canvas>  New 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。
<figcaption>New 定义一个 caption for a <figure> element
<figure>  New figure 标签用于对元素进行组合。
Audio/Video  
<audio>New  定义声音,比如音乐或其他音频流。
<source>New 定义media元素 (<video> 和 <audio>)的媒体资源。media
<track>New  为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video>New  定义一个音频或者视频
链接   
<a>   定义一个链接
<link>  定义文档与外部资源的关系。
<main>  定义文档的主体部分。
<nav>New  定义导航链接
列表   
<ul>  定义一个无序列表
<ol>  定义一个有序列表
<li>  定义一个列表项
<dl>  定义一个定义列表
<dt>  定义一个定义定义列表中的项目。
<dd>  定义定义列表中项目的描述。
<menu>  定义菜单列表。
<command>New  定义用户可能调用的命令(比如单选按钮、复选框或按钮)。
表格   
<table>   定义一个表格
<caption> 定义表格标题。
<th>  定义表格中的表头单元格。
<tr>  定义表格中的行。
<td>  定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容(脚注)。
<col> 定义表格中一个或多个列的属性值。
<colgroup>  定义表格中供格式化的列组。
样式/节   
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span>  定义文档中的节。
<header>New 定义一个文档头部部分
<footer>New 定义一个文档底部
<section>New  定义了文档的某个区域
<article>New  定义一个文章内容
<aside>New    定义其所处内容之外的内容。
<details>New  定义了用户可见的或者隐藏的需求的补充细节。
<dialog>New   定义一个对话框或者窗口
<summary>New  定义一个可见的标题。 当用户点击标题时会显示出详细信息。
元信息  
<head>  定义关于文档的信息
<meta>  定义关于 HTML 文档的元信息。
<base>  定义页面中所有链接的默认地址或默认目标。
程序   
<script>  定义客户端脚本。
<noscript>  定义针对不支持客户端脚本的用户的替代内容。
<embed>New  定义了一个容器,用来嵌入外部应用或者互动程序(插件)。
<object>  定义嵌入的对象。
<param>   定义对象的参数。

小结

在编写网页之前,要对编写一些什么样的网页有一个基本的了解。后面的内容就按这些内容和问题一个一个的处理了。

相关文章
|
9天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
24 3
|
19天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
42 7
|
19天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
19天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
19天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
25 5
|
24天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
38 5
|
28天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
22天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
116 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
45 3