HTML基础教程（一）

1、没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。

如<br>。在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法。

2、HTML标签对大小写不敏感，但推荐小写。

3、属性值应该始终被包括在括号内。

4、注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

<!-- This is a comment -->

5、使用空的段落标记 <p></p> 插入空行是个坏习惯。用 <br /> 标签代替它！

6、HTML5的style属性：font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸；background-color定义背景颜色；text-align属性规定了元素中文本的水平对齐方式。

<body style = "background-color:yellow">

7、HTML <code> 元素定义编程代码示例，<code> 元素不保留多余的空格和折行（使用<pre>实现保留）。

8、外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

<head>

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

</head>

内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。

<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

9、HTML 链接 - target 属性：使用 Target 属性，你可以定义被链接的文档在何处显示。

target="_black"时，表示网页将会在新窗口被打开。

10、使用邮件链接时，应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

11、替换文本属性（Alt）：alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

12、创建图像映射：http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

13、表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

14、表格的表头：表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

15、使用 "frame" 属性来控制围绕表格的边框：http://www.w3school.com.cn/tiy/t.asp?f=html_table_frame

16、无序列表始于 <ul> 标签。每个列表项始于 <li>。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

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

17、margin和padding的区别:

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

18、iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性。

<iframe src="demo_iframe.htm"name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn"target="iframe_a">W3School.com.cn</a></p>

19、<body> 拥有两个配置背景的标签,颜色（Bgcolor）或者图像(BackGround)。

（在最新HTML标准中已废弃，应该使用CSS来定义。）

20、如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

21、HTML <base> 标签为页面上的所有链接规定默认地址或默认目标（target）。

<head>

<base href="http://www.w3school.com.cn/images/" />

<base target="_blank" />

</head>

22、HTML<link> 标签定义文档与外部资源之间的关系，最常用于连接样式表。

<head>

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

</head>

23、HTML<meta>元素重定向：http://www.w3school.com.cn/tags/tag_meta.asp

<meta http-equiv="Refresh" content="5;url=http://www.baidu.com " />

24、HTML字符实体：

25、HTML 颜色：颜色由红色、绿色、蓝色混合而成。

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

26、带有最少的必需标签的 XHTML 文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Title of document</title>

</head>

<body>

......

</body>

</html>

27、如何从 HTML 转换到 XHTML：

向每张页面的第一行添加 XHTML <!DOCTYPE>、向每张页面的 html 元素添加 xmlns 属性、把所有元素名改为小写、关闭所有空元素、把所有属性名改为小写、为所有属性值加引号。

28、HTML表单:

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

GET（默认方法）：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的。

POST：如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

（GET 最适合少量数据的提交。浏览器会设定容量限制。）

Name 属性：如果要正确地被提交，每个输入字段必须设置一个 name 属性。

29、<fieldset> 元素组合表单中的相关数据，<legend> 元素为其定义标题。

30、HTML Form 属性：已设置所有可能的属性。

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

form elements

</form>

31、HTML5 <datalist> 元素：<datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

</form>

32、<input type="number">用于应该包含数字值的输入字段，能对数字做出限制。

<form>

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

</form>

33、这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

34、autocomplete 属性规定表单或输入字段是否应该自动完成，当自动完成开启，浏览器会基于用户之前的输入值自动填写值（on/off）。

autocomplete 属性适用于 <form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。

<form action="action_page.php" autocomplete="on">

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

<input type="submit">

</form>

35、novalidate 属性属于 <form> 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

<form action="action_page.php" novalidate>

E-mail: <input type="email" name="user_email">

<input type="submit">

</form>

36、formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性，适用于 type="submit" 以及 type="image"。

<form action="action_page.php">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" value="Submit"><br>

<input type="submit" formaction="demo_admin.asp"

value="Submit as admin">

</form>

37、formmethod 属性定义用以向 action URL 发送表单数据的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性，适用于 type="submit" 以及 type="image"。

<form action="action_page.php" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" value="Submit">

<input type="submit" formmethod="post" formaction="demo_post.asp"

value="Submit using POST">

</form>

38、formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收响应。

formtarget 属性会覆盖 <form> 元素的 target 属性，可与 type="submit" 和 type="image" 使用。

<form action="action_page.php">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" value="Submit as normal">

<input type="submit" formtarget="_blank"

value="Submit to a new window">

</form>

39、pattern 属性规定用于检查 <input> 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

<form action="/example/html5/demo_form.asp" method="get">

国家代码：<input type="text" name="country_code" pattern="[A-z]{3}">

<input type="submit" />

</form>

40、placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述），该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

<input type="text" name="fname" placeholder="First name">

41、required 属性是布尔属性。设置则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

Username: <input type="text" name="username" required>

42、step 属性规定 <input> 元素的合法数字间隔。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 、week。可与 max、 min 属性一同使用，来创建合法值的范围。

<input type="number" name="points" step="3">

HTML基础教程（一）相关推荐

Spring Cloud Alibaba基础教程：使用Nacos实现服务注册与发现
自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注.虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭 ...
[SQL基础教程] 1-5 表的删除和更新
[SQL基础教程] 1-5 表的删除和更新表的删除语法 DROP TABLE <表名>; 法则 1-12 删除的表无法恢复表定义的更新语法 ALTER TABLE<表名> ...
python 包用法_Python 基础教程之包和类的用法
Python 基础教程之包和类的用法这篇文章主要介绍了 Python 基础教程之包和类的用法的相关资料, 需要的朋友可以参考下 Python 是一种面向对象.解释型计算机程序设计语言,由 Guido ...
Spring Cloud Alibaba 基础教程：Nacos 生产级版本 0.8.0
Spring Cloud Alibaba 基础教程:Nacos 生产级版本 0.8.0 昨晚Nacos社区发布了第一个生产级版本:0.8.0.由于该版本除了Bug修复之外,还提供了几个生产管理非常重要 ...
Python培训基础教程都教哪些
根据相关数据统计,目前学习Python技术的同学大多数是零基础,都是从其他行业转型来学习的,那么Python培训基础教程都教哪些呢?好不好学呢?来看看下面的详细介绍. Python培训基础教程都教哪些 ...
深度学习之Pytorch基础教程！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货作者:李祖贤,Datawhale高校群成员,深圳大学随着深度学习的发展 ...
python平稳性检验_时间序列预测基础教程系列(14)_如何判断时间序列数据是否是平稳的(Python)...
时间序列预测基础教程系列(14)_如何判断时间序列数据是否是平稳的(Python) 发布时间:2019-01-10 00:02, 浏览次数:620 , 标签: Python 导读: 本文介绍了数据平稳 ...
%3c- r语言运算符,R语言基础教程之运算符
原标题:R语言基础教程之运算符运算符类型在R编程中有以下类型的运算符 - 算术运算符关系运算符逻辑运算符赋值运算符其他运算符1.算术运算符下表显示了R语言支持的算术运算符.运算符对向量的 ...
python分类器鸢尾花怎么写_python机器学习基础教程-鸢尾花分类
一: 环境准备: 1.导入的库: importnumpy as npimportmatplotlib.pyplot as pltimportpandas as pdimport mglearn 2.导 ...
【连载】【黑金动力社区原创力作】《液晶驱动与GUI 基础教程》 --序言(一)
声明:本文为原创作品,版权归黑金动力社区(http://www.heijin.org)所有,如需转载,请注明出处http://www.cnblogs.com/kingst/ 大家好,我是XiaomaG ...

HTML基础教程（一）

HTML基础教程（一）相关推荐

最新文章

热门文章