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

小结

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

相关文章
|
1天前
|
人工智能 JavaScript IDE
HTML AI编程助手
HTML AI编程助手。
8 3
|
1天前
|
缓存 前端开发 JavaScript
HTML设计最新笔记
HTML设计最新笔记
7 1
|
3天前
|
Web App开发 监控 JavaScript
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
实现JavaScript鼠标框选内容上报,需关注`Range`和`Selection`对象,处理各种元素选择情况,如文本、图片、输入框等。事件监听包括`mousedown`、`mouseup`、`selectionchange`等,用`debounce`防止频繁触发。通过`Range`获取选中内容,判断是否包含特定标签,决定返回HTML或文本。完整代码示例展示了如何实现这一功能。
9 0
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
|
3天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
5 1
|
4天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
15 1
|
8天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
9天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
11天前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
10 1
|
11天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
前端开发 C++
前端开发:HTML知识总结——网页结构
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形,动画,声音,表格,链接等。
98 0
前端开发:HTML知识总结——网页结构