HTML知识（一）

最新推荐文章于 2022-05-05 15:43:18 发布

寻瀑

最新推荐文章于 2022-05-05 15:43:18 发布

阅读量920

点赞数 1

分类专栏： web前端文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/smell201611010513/article/details/123015541

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、HTML元素

HTML元素指的是从开始标签(start tag)到结束标签（end tag）的所有代码。

元素内容是开始标签与结束标签之间的内容。

某些HTML元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数HTML元素可拥有属性。

<hr/>水平线，可用于分隔内容。<br/>是换行符。

浏览器会自动地在段落的前后添加空行。（<p>是块级元素）

Style属性：font-family字体

2、HTML颜色名

仅有16种颜色名被W3C的HTML4.0标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow

如果使用其它颜色的话，就应该使用十六进制的颜色值。

3、HTML CSS

插入样式表的方式有三种：

（1）外部样式表

<head>

  <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

（2）内部样式表

<style type=”text/css”>

  body{  background:red}

</style>

（3）内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。

4、表格标签

<caption>定义表格标题

<th>定义表格的表头

<thead>定义表格的页眉

<tbody>定义表格的主体

<tfoot>定义表格的页脚

<col>定义表格列的属性

<colgroup>定义表格列的组

注意：<table>元素不是作为布局工具而设计的，<table>元素的作用是显示表格化的数据。使用<table>元素能够取得布局效果，因为能够通过css设置表格元素的样式。

5、自定义列表

自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。

6、HTML Iframe

Iframe用于在网页内显示网页。

添加iframe的语法：<iframe src=”URL” width=”200” height=”200”></iframe>

frameborder属性规定是否显示iframe周围的边框。设置属性值为0就可以移除边框。

使用iframe可以作为链接的目标，链接的target属性必须引用iframe的name属性。

7、HTML Javascript

（1）更改内容：

document.getElementById(“demo”).innerHTML=”Hello, 冰墩墩”

（2）修改样式

document.getElementById(“demo”).style.fontSize=”25px”

document.getElementById(“demo”).style.color=”red”

document.getElementById(“demo”).style.backgroundColor=”yellow”

(3) 更改属性

document.getElementById(“image”).src=”picture.gif”

<noscript>标签

该标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户。

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

8、HTML头部元素

<head>定义文档的头部信息

<title>定义文档的标题

<base>定义页面上所有链接的默认地址或默认目标

9、HTML5新语义元素（关于网页）

header—定义文档或节的页眉

nav—定义导航链接的容器

section—定义文档中的节

article—定义独立的自包含文章

aside—定义内容之外的内容（比如侧边栏）

footer—定义文档或节的页脚

details—定义额外的节

summary—定义details元素的标题

figure/figcaption—在书籍和报纸中，与图片搭配的标题很常见，标题的作用是为图片添加可见的解释，通过HTML5，图片和标题能够被组合在<figure>元素中。

10、HTML5样式指南和代码约定

（1）使用正确的文档类型

<!DOCTYPE html>或<!doctype html>

（2）使用小写元素名

（3）关闭所有HTML元素

（4）关闭空的HTML元素

（5）使用小写属性名

（6）属性值加引号

（7）一定要写必需的属性

（8）空格和等号

（9）避免长代码行

当使用HTML编辑器时，通过左右滚动来阅读HTML代码很不方便。请尽量避免代码行超过80个字符。

（10）空行和缩进

为了提高可读性，可增加空行来分隔大型或逻辑代码块；增加两个空格的缩进，请勿使用TAB。请勿使用没有必要的空行和缩进，没有必要再短的和相关项目之间使用空行，也没有必要缩进每个元素。
（11）不推荐省略<html>和<body>

在HTML5标准中，能够省略<html>和<body>标签，但不推荐。

（12）不推荐省略<head>

在HTML5标准中，<head>标签也能够被省略。默认地，浏览器会把<body>之前的所有元素添加到默认的<head>元素。通过省略<head>标签，可以降低HTML的复杂性。

（13）元数据

<title>元素在HTML5中是必需的，尽可能制作有意义的标题。为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好。

（14）HTML注释

短注释应该在单行中书写，并在<!- -之后增加一个空格，在- ->之前增加一个空格。

长注释，跨越多行，应该通过<!- -和- ->在独立的行中书写。长注释更易观察，如果它们被缩进两个空格的话。

（15）样式表

开括号与选择器位于同一行

在开括号之前用一个空格

使用两个字符的缩进

在每个属性与其值之间使用冒号加一个空格

在每个逗号或分号之后使用空格

在每个属性值对（包括最后一个）之后使用分号

只在值包含空格时使用引号来包围值

避免每行超过80个字符。

注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。

（16）在HTML中加载JavaScript

（17）通过JavaScript访问HTML元素

（18）使用小写文件名

（19）文件扩展名。

HTML文件使用扩展名.html（而不是.htm）

CSS文件使用扩展名.css

JavaScript文件应该使用扩展名.js

11、HTML字符实体

HTML中的预留字符必须被替换为字符实体。

HTML实体。在HTML中不能使用小于号(<)和大于号(>)，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体，类似

&entity_name;

或者

&#entity_number;

使用实体名而不是数字的好处是名称易于记忆，坏处是浏览器也许不支持所有实体名称

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
©	版权	©	©
®	注册商标	®	&#174；

12、HTML编码（字符集）

如果未规定，UTF-8则是HTML中的默认字符集。为了正确显示HTML页面，Web浏览器必须知道要使用哪个字符集。

从ASCII到UTF-8：

ASCII是第一个字符编码标准。ASCII定义了128种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。

ISO-8859-1是HTML4的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

13、HTML统一资源定位器

URL也被称为网址。URL可以由单词组成，或者是因特尔协议地址（IP地址）。URL（Uniform Resource Locator）即统一资源定位符，当你点击HTML页面中的某个链接时，对应的<a>标签指向万维网上的一个地址。统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。

URL Schemes：

Scheme	访问	用于...
http	超文本传输协议	以http://开头的普通网页，不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站
file		计算机上的文件

14、HTML背景

<body>拥有两个配置背景的标签，背景可以是颜色或者图像。背景颜色（bgcolor）属性值可以是十六进制数、RGB值或颜色名。background背景属性将背景设置为图像，属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。URL可以是相对地址，也可以是绝对地址。如果使用背景图片，需要注意：

（1）背景图像是否增加了页面的加载时间，图像文件不应超过10k；

（2）背景图像是否与页面中的其他图像搭配良好；

（3）背景图像是否与页面中的文字颜色搭配良好；

（4）图像在页面中平铺后，看上去还可以吗？

（5）对文字的注意力被背景图像喧宾夺主了吗？

15、XHTML元素

XHTML元素是以XML格式编写的HTML元素。

XHTML元素的语法规则：

（1）XHTML元素必须正确嵌套；

（2）XHTML元素必须始终关闭；

（3）XHTML元素必须小写；

（4）XHTML文档必须有一个根元素

XHTML属性是以XML格式编写的HTML属性。XHTML属性必须使用小写；必须用引号包围；最小化也是禁止的。

//这是错误的
<input checked>
<input readonly>
<input disabled>
<option selected>

//这是正确的
<input checked="checked"/>
<input readonly="readonly"/>
<input disabled="disabled">
<option selected="disabled">

16、HTML表单

HTML表单用于搜集不同类型的用户输入。<form>元素，HTML表单包含表单元素，表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。

关于formmethod属性请求方法：

GET永远不要使用GET发送敏感数据（提交的表单数据在UTL中可见！），URL的长度受到限制（2048个字符），适用于非安全数据（例如Google中的查询字符串）；

POST将表单数据附加到HTTP请求的正文中（不在URL中显示提交的表单数据），POST没有大小限制，可用于发送大量数据），带有POST的表单提交无法添加书签。

<input>type属性值有text（定义常规文本输入）、radio（定义单选按钮输入【选择多个选择之一】）、submit（定义提交按钮【提交表单】）

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）。值为on时，如果上次填过，则会提示选项
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的HTTP方法（默认：GET）
name	规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标（默认：_self）
autofocus	布尔属性，如果设置，则规定当页面加载时<input>元素应该自动获得焦点。
formaction	规定当提交表单时处理该输入控件的文件的URL
formenctype	规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对method="post" 的表单）
formmethod	定义用以向action URL发送表单数据（form-data）的HTTP方法
formnovalidate	规定在提交表单时不对<input>元素进行验证
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应
height	<input>元素的高度
width	<input>元素的宽度
list	引用的<datalist>元素中包含了<input>元素的预定义选项
min	规定<input>元素的最小值
max	规定<input>元素的最大值
multiple	如果设置，则规定用户在<input>元素中输入一个以上的值
pattern	规定用于检查<input>元素值的正则表达式
placeholder	规定用以描述输入字段预期值的提示（样本值或有关样式的简短描述），该提示会在用户输入值之前显示在输入字段中
required	如果设置，则规定在提交表单之前必须填写输入字段
step	规定<input>元素的合法数字间隔

<input> 
    属性：
    type
        text--文本输入
        password--密码字段
        submit--定义提交表单数据至表单处理程序的按钮。表单处理程序通常是包含处理输入数据的脚本的服务器页面
        radio--定义单选按钮
        checkbox--定义复选框
        button--定义按钮
        number--用于应该包含数字值的输入字段
        disabled--规定输入字段应该被禁用
        max--规定输入字段的最大值
        maxlength--规定输入字段的最大字符数
        min--规定输入字段的最小值
        pattern--规定通过其检查输入值的正则表达式
        readonly--规定输入字段为只读
        required--规定输入字段是必需的
        size--规定输入字符的宽度
        step--规定输入字段的合法数字间隔
        value--规定输入字段的默认值
        date--用于应该包含日期的输入字段
    value  规定输入字段的初始值
    readonly 规定输入字段为只读（不能修改）
    disabled 规定输入字段是禁用的
    size 规定输入字段的尺寸（以字符计）
    maxlength 规定输入字段允许的最大长度
    form 规定<input>元素所属的表单，此属性的值必须等于它所属的<form>元素的id属性。
    formaction 规定当提交表单时，对输入（数据）进行处理的文件的URL。
    formenctype 指定提交时应如何编码表单数据（仅适用于 method="post" 的表单）。
    formmethod 定义将表单数据发送到action URL的HTTP方法
    formtarget 指定一个名称或关键字，该名称或关键字规定在提交表单后如何在此处显示收到的响应。
    formnovalidate 规定提交时不应验证<input>元素
    novalidate 如果已设置，novalidate属性规定在提交时不应验证所有表单数据。
    
<select><option>定义下拉列表
<textarea>定义多行输入字段（文本域）
<button>定义可点击的按钮
<datalist>为<input>元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表。

HTML5增加了多个新的输入类型：

color用于应该包含颜色的输入字段、date、datetime（允许用户选择日期和时间【有时区】）、datetime-local（允许用户选择日期和时间【无时区】）、email应该包含电子邮件地址的输入字段、month允许用户选择月份和年份、number、range定义包含一定范围内的值的输入字段、search、tel用于应该包含电话号码的输入字段、time允许用户选择时间（无时区）、url用于应该包含URL地址的输入字段、week允许用户选择周和年等。

注意：老式Web浏览器不支持的输入类型，会被视为输入类型text。

HTML5新增的属性如下：autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、height、width、list、min和max、multiple、pattern(regexp)、placeholder、required、step。

寻瀑

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML知识（一）

1、HTML元素HTML元素指的是从开始标签(start tag)到结束标签（end tag）的所有代码。元素内容是开始标签与结束标签之间的内容。某些HTML元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数HTML元素可拥有属性。<hr/>水平线，可用于分隔内容。<br/>是换行符。浏览器会自动地在段落的前后添加空行。（<p>是块级元素）Style属性：font-family字体2、HTML颜色名仅有16种颜色
复制链接

扫一扫