编程笔记 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>   定义对象的参数。

小结

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

相关文章
|
6月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
6月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
6月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
6月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
8月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
236 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
6月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
6月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应