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

小结

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

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
817 0
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
560 7
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
300 6
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
507 4