HTML

最新推荐文章于 2022-08-25 12:15:25 发布

Topology_l

最新推荐文章于 2022-08-25 12:15:25 发布

阅读量673

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/anonym_T/article/details/105269269

版权

图书管理系统专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目前记录的主要是自己遇到的一些内容，有些暂未记录的内容以（-）在目录中标出
详细完整的HTML内容见这里
标题和目录中的<...>均省略（不然显示不出来orz）

!DOCTYPE 声明

声明位于文档中的最前面的位置，处于标签之前，是用来告知 Web 浏览器页面使用了哪种 HTML 版本

没有结束标签，不区分大小写
在HTML 4.01中需引用DTD（文档类型声明），因为HTML 4.01基于SGML（标准通用标记语言），HTML5不要求引用
常见的 DOCTYPE 声明
HTML 5

<!DOCTYPE html>

HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML全局属性

<html ...>

告知浏览器这是一个 HTML 文档，是 HTML 文档中最外层的元素

lang

规定元素内容的语言

<element lang="language_code">

class

规定元素的类名，类名不能以数字开头
class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title

<element class="value">
	//多个类用空格分隔类名

id

规定元素的唯一id

data-*

data-*属性用于存储私有页面后应用的自定义数据，可以在所有的 HTML 元素中嵌入数据
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串

tabindex（?）

规定当使用 “tab” 键进行导航时元素的顺序

charset（-）

事件属性（-）

定义文档的头部，文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签或 <frameset> 标签之前。

<head>
  <title>文档的标题</title>
</head>

title（-）

link（-）

<link> 标签定义文档与外部资源的关系，最常见的用途是链接样式表
link 元素是空元素，它仅包含属性，此元素只能存在于 head 部分，不过它可出现任何次数。

rel 属性必需

定义当前文档与被链接文档之间的关系

<link rel="value">

值	描述
alternate	链接到该文档的替代版本（比如打印页、翻译或镜像）
author	链接到该文档的作者
help	链接到帮助文档
icon	导入表示该文档的图标
license	链接到该文档的版权信息
next	表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档
prefetch	规定应该对目标资源进行缓存
prev	表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档
search	链接到针对文档的搜索工具
stylesheet	要导入的样式表的 URL

URL统一资源定位系统（uniform resource locator）是因特网的万维网服务程序上用于指定信息位置的表示方法
样式表(style sheet)是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言

href属性

定义被链接文档的位置
href 属性规定外部资源（通常是样式表文件）的位置（URL）
可能的值：
绝对 URL - 指向另一个网站（比如 href=“http://www.example.com/theme.css”）
相对 URL - 指向网站内的一个文件（比如 href="/themes/theme.css"）

//实例
<link rel="stylesheet" type="text/css" href="theme.css">

style

<style> 标签定义 HTML 文档的样式信息，每个 HTML 文档能包含多个 <style> 标签
在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档
如果没有使用 “scoped” 属性，则每一个 <style> 标签必须位于 head 头部区域~~（？？？？？为什么我看的代码是写在head外部的？？而且运行时这里没有报错？~~

type属性

（必需）规定样式表的 MIME 类型，type 属性指示 <style> 与 </style> 标签之间的内容
值 “text/css” 指示内容是标准的 CSS

<style type="MIME_type">
	//MIME_type样式表的 MIME 类型，目前，唯一可能的值是 "text/css"

media属性（-）

为样式表规定不同的媒体类型

scoped属性（-）

（HTML5）如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

body

定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

支持全局属性、事件属性

div

定义 HTML 文档中的一个分隔区块或者一个区域部分，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<div> 元素经常与 CSS 一起使用，用来布局网页。
默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况

支持全局属性、事件属性

a

<a> 标签定义超链接，用于从一个页面链接到另一个页面，最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属
通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target
使用 CSS 来改变链接的样式
<a> 标签既可以是超链接，也可以是锚。在 HTML5 中，<a> 标签是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符

href属性

规定链接的目标 URL

<a href="URL">

超链接的 URL。可能的值：

绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
相对 URL - 指向站点内的某个文件（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）

form

用于创建供用户输入的 HTML 表单，<form> 元素包含一个或多个如下的表单元素：
<input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>

method 属性

method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）
表单数据可被作为 URL 变量的形式来发送（method=“get”）或者作为 HTTP post 事务的形式来发送（method=“post”）

get
默认
将表单数据（form-data）以名称/值对的形式附加到 URL 中
URL 的长度是有限的（大约 3000 字符）
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
对于用户希望加入书签的表单提交很有用
GET 更适用于非安全数据，比如在 Google 中查询字符串
post
以 HTTP post 事务的形式发送表单数据
将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签

action 属性

规定当提交表单时，向何处发送表单数据

<form action="URL">

label

<label> 标签为 input 元素定义标注（标记）
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（？）
“for” 属性可把 label 绑定到另外一个元素，把 “for” 属性的值设置为相关元素的 id 属性的值

eg.输入框的名字or选择题的选项描述

for 属性

for 属性规定 label 绑定的表单元素

form 属性（-）

input

<input> 标签规定了用户可以在其中输入数据的输入字段，<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件
输入字段可通过多种方式改变，取决于 type 属性
<input> 元素是空的,它只包含标签属性

type 属性

type 属性规定要显示的元素的类型，默认类型是：text

属性值

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）
checkbox	定义复选框。
colorNew	定义拾色器。
dateNew	定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
monthNew	定义 month 和 year 控件（不带时区）。
numberNew	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
rangeNew	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
searchNew	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
telNew	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew	定义用于输入时间的控件（不带时区）。
urlNew	定义用于输入 URL 的字段。
weekNew	定义 week 和 year 控件（不带时区

name属性

name 属性规定 <input> 元素的名称。
name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

required属性

required 属性是一个布尔属性，规定必需在提交表单之前填写输入字段
required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file

placeholder属性

placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）

该提示会在用户输入值之前显示在输入字段中

button

<button> 标签定义一个按钮。
在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处
始终为 <button> 元素规定 type 属性

type

规定按钮的类型


submit	该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）
button	该按钮是可点击的按钮（Internet Explorer 的默认值）
reset	该按钮是重置按钮（清除表单数据）

span

用于对文档中的行内元素进行组合,标签提供了一种将文本的一部分或者文档的一部分独立出来的方式
被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作

h1→h6（-）

script

<script> 标签用于定义客户端脚本，比如 JavaScript，既可包含脚本语句，也可以通过 “src” 属性指向外部脚本文件。
JavaScript 通常用于图像操作、表单验证以及动态内容更改。

<noscript>（-）

如果使用 “src” 属性，则 <script> 元素必须是空的
有多种执行外部脚本的方法：
如果 async=“async”：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer=“defer”：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

客户端脚本（-）

scr属性

规定外部脚本文件的 URL
在网站中的多个页面上运行相同的 JavaScript，就应该创建外部 JavaScript 文件，而不是重复编写相同的脚本。把脚本文件以 .js 扩展名进行保存，然后在 <script> 标签中使用 src 属性引用它
外部脚本文件不能包含 <script> 标签

<script src="URL">

转义字符

  空格
× 乘号

未解决

.alert{ }

<style type="text/css">
        .alert{
            margin: 0 auto 20px;
            text-align: center;
        }
    </style>

data-dismiss=“alert”

<a class="close" data-dismiss="alert" href="#">&times;</a>

role
aria-labelledby

<div class="modal fade" id="modal_info" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">

aria-label
aria-hidden

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Topology_l

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

目前记录的主要是自己遇到的一些内容，有些暂未记录的内容以（-）在目录中标出详细完整的HTML内容见这里标题和目录中的<...>均省略（不然显示不出来orz）目录!DOCTYPE 声明HTML全局属性langclassiddata-*tabindex（?）charset（-）事件属性（-）标签htmlheadtitle（-）metacharset属性name属性http-equi...
复制链接

扫一扫