HTML元素与属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44443506/article/details/107753725

HTML

HTML 元素

开始标签 *	元素内容	结束标签 *
	这是一个段落
	这是一个链接
	换行

HTML 属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML 标签

标签	描述
	定义 HTML 文档
	定义文档的主体
-	定义 HTML 标题
	定义水平线
	定义注释

HTML 文本格式化标签

标签	描述
	定义粗体文本
	定义着重文字
	定义斜体字
	定义小号字
	定义加重语气
	定义下标字
	定义上标字
	定义插入字
	定义删除字

HTML “计算机输出” 标签

标签	描述
	定义计算机代码
	定义键盘码
	定义计算机代码样本
	定义变量
	定义预格式文本

HTML 引文, 引用, 及标签定义

标签	描述
	定义缩写
	定义地址
	定义文字方向(左/右)
	定义长的引用
<blockquote cite="http://www.worldwildlife.org/who/index.html	定义一个摘自另一个源的块引用
	定义短的引用语
	定义引用、引证
	定义一个定义项目。

HTML 元素

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

实例 1 - 定义文档关键词，用于搜索引擎：

实例 2 - 定义web页面描述：

实例 3 - 定义页面作者：

实例 4 - 每30秒刷新页面：

标签	描述
	定义了文档的信息
	定义了文档的标题
	定义了页面链接标签的默认链接地址
	定义了一个文档和外部资源之间的关系
	定义了HTML文档中的元数据

HTML 图像

HTML 图像- 图像标签（）和源属性（Src）,Alt属性

在 HTML 中，图像由标签定义。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

定义图像的语法是：

<img src="*url*" alt="*some_text*">

标签	描述
	定义图像
	定义图像地图
	定义图像地图中的可点击区域

HTML 表格

标签

描述

定义表格

定义表格的表头

定义表格的行

定义表格单元

定义表格标题

定义表格列的组

定义用于表格列的属性

定义表格的页眉

定义表格的主体

定义表格的页脚

HTML 列表

标签	描述
	定义有序列表
	定义无序列表
	定义列表项
	定义列表
	自定义列表项目
	定义自定列表项的描述

HTML
和

标签	描述
	定义了文档的区域，块级 (block-level)
	用来组合文档中的行内元素，内联元素(inline)

HTML 布局

HTML 布局 - 使用

元素

div 元素是用于分组 HTML 元素的块级元素。

下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html布局(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
 
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

HTML 布局 - 使用表格使用 HTML

标签是创建布局的一种简单的方式。

大多数站点可以使用

或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
 
</body>
</html>

HTML 表单和输入

New : HTML5新标签

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮
datalistNew	指定一个预先定义的输入控件选项列表
keygenNew	定义了表单的密钥对生成器字段
outputNew	定义一个计算结果

HTML 框架

iframe语法:

<iframe src="*URL*"></iframe>

该URL指向不同的网页。

Iframe - 设置高度与宽度属性

默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

HTML 颜色

颜色值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-El9m3KL8-1596381520778)(C:\Users\windows\AppData\Local\Temp\1596370167077.png)]

Web安全色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e70bjxFd-1596381520787)(C:\Users\windows\AppData\Local\Temp\1596370242252.png)]

HTML字符实体

	实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

HTML 统一资源定位器(Uniform Resource Locators)

scheme://host.domain:port/path/filename

- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称

      | &#247;   |

HTML 统一资源定位器(Uniform Resource Locators)

scheme://host.domain:port/path/filename

- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称