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

小结

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

相关文章
|
10天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
16 0
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
18天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发 容器
|
前端开发 JavaScript 容器
js+css实现骰子的随机转动
网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览:   js+css3实现3D骰子特效 - 站长素材 * { margin:0; padding:0; } body { background:#efefef; overflow:hid...
928 0
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0