整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一个基本的HTML5模板「建议收藏」

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="main.css" />
 <script type="text/javascript" src="myscript.js" ></script>
</head>
<body>
这里是内容
</body>
</html>

【说明】
第一行<!DOCTYPE html>用来声明这是个html5文档
html文档 以<html>开始,以</html>结束
<head></head>是头部信息,这部分是在页面上是不显示的,主要告诉浏览器一些信息,比如使用的字符集,
文档标题、需要加载的CSS(层叠样式表)和JavaScript文档。
<link>表示链接一个外部mian.css 的样式表文件。样式表用来美化页面元素,定义元素的参数。
<javascript>表示这是个浏览器脚本文件,里面的src属性表示链接一个外部脚本文件。
<body></body>表示主体,这部分是用来在浏览器页面是显示的,是用户可以真正看到的内容。body里面可
包含很多语义标签,像div,span,table,form,video,li等。
  • 文本标记语言(英文HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言!
  • 对于中文网页需要使用<meta charset='utf-8'>声明编码,否则会出现乱码。有些浏览器(如360浏览器)会设置GBK为默认编码,则你需要设置为<meta charset='gbk'>
    例子模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网(html.cn)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML?

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言:HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如
<html>
HTML 标签通常是成对出现的,比如
<b></b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>这是一个段落。</p>

HTML 头部元素

头部元素包含关于文档的概要信息,也称为元信息(meta-information)。Meta 意为“关于某方面的信息”。
可以这么说,元数据(meta-data)是关于数据的信息,而元信息是关于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时,显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题

HTML <BASE> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

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

HTML <STYLE> 元素

<style> 标签定义了HTML文档的样式文件引用地址.
<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<meta> 一般放置于 <head> 区域

<META> 标签- 使用实例

  • 为搜索引擎定义关键词:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 为网页定义描述内容:
    <meta name="description" content="免费 Web & 编程 教程">
  • 定义网页作者:
    <meta name="author" content="HTML">
  • 每30秒钟刷新当前页面:
    <meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

<script>标签用于加载脚本文件,如: JavaScript。
<script> 元素在以后的章节中会详细描述。

HTML head 元素

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

HTML 元素

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

开始标签

元素内容

结束标签

<p>

这是一个段落

</p>

<a href="default.html">

这是一个链接

</a>

<br>

换行


  • 说明:HTML 文档是由 HTML 元素定义的
  • 注:开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。

元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性
  • 注释: 您将在本教程的下一章中学习更多有关属性的内容。
  • 嵌套的 HTML 元素
  • HTML 文档由嵌套的 HTML 元素构成。大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
  • 空元素
  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  • <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
  • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
  • 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
  • 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

注释标签<!--...-->

HTML注释标签<!--...-->用来在源文档中插入注释。注释不会在浏览器中显示。可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用

标签定义及使用说明

  • <!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。
  • 您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。
  • 您也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中,这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。
<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>
  • 注释:命令行最后的两个正斜杠(//)是 JavaScript 注释符号。这确保了 JavaScript 不会执行 –> 标签。
  • 除了在源文档中有非常明显的作用外,许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档,从传统的 HTML/XHTML 注释中找到特定的字符序列,然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单地包括其他文件中的文本(即所谓的服务器端包含,server-inside include),也可能是复杂地执行其他命令去动态生成文档的内容。

HTML 段落与文字

标题

  • 在 HTML 文档中,标题很重要。标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。其中<h1> 定义最大的标题,<h6> 定义最小的标题
  • HTML中的标题标签通过<h1>-<h6>来设置,越往下标题越小

段落

  • 在HTML中段落是通过p标签来定义的,它可以将HTML文档分割为若干段落部分。因为p标签是块级元素,所以浏览器会自动地在段落的前后添加空行。
  • 注意: 因为p标签是块级元素,所以浏览器会自动地在段落的前后添加空行
  • 我们可以通过<br/>标签来对段落进行换行
  • 如果希望在不产生一个新段落的情况下进行换行,就可以使用<br /> 标签,注意它是一个单标签。

文本格式化

  • HTML可定义很多供格式化输出的元素,例:使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式,从而显示粗体 或者 斜体
    示例:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

HTML”计算机输出”标签

标签

描述

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

<code>

定义计算机代码

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

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目

区块

  • 大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束);而内联元素则不会。

HTML 区块元素

可以通过 <div> 和 <span> 将 HTML 元素组合起来

HTML块级元素

块级元素在浏览器显示时,通常会以新行来开始和结束 - 例:<h1>, <p>, <ul>, <table>

HTML内联元素

内联元素在显示时通常不会以新行开始 - 例:<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素,浏览器会在其前后显示折行 - 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。 - <div> 元素的另一个常见的用途是文档布局

HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器 - 与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性

HTML字符实体

  • 在 HTML 中,某些字符是预留的,这些预留字符必须被替换为字符实体;而,一些在键盘上找不到的字符也可以使用字符实体来替换。

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

&entity_name;

&#entity_number;

HTML 字符实体
不间断空格
HTML 中的常用字符实体是不间断空格( )
浏览器总是会截短 HTML 页面中的空格,如果需要在页面中增加空格的数量,需要使用 字符实体

有用的字符实体

显示结果

描述

实体名称

实体编码


空格



<

小于号

<

<

>

大于号

>

>

&

和号

&

&

引号

"

"

撇号

' (IE不支持)

'

¢

¢

£

£

£

¥

¥

¥

欧元

§

小节

§

§

©

版权

©

©

®

注册商标

®

®

商标

×

乘号

×

×

÷

除号

÷

÷

  • 注意:实体名称对大小写敏感

欢迎大家提议、分享、交流、共同学习进步

随着5G网络逐渐普及,手机已经成为了我们的一部分,从前出门要还要想着带个什么样子的包,现在的出门只要记得带好手机就足矣!以前手机要实现一个功能就需要安装相应的APP,而现在微信小程序等带给我们不一样的体验,我们不再需要安装各种各样的APP,很多都可以在微信小程序上完成。微信小程序的开发门槛虽然低了很多,但我们还是需要掌握一定的基础知识,而作为基础中的基础,HTML5是我们必须学习的。


一、HTML代码基础

1、HTML5的语法要求非常宽松,属性值可以用单引号、双引号包含起来,甚至可以不加引号。如:

id="wl" id='wl' id=wl 这三个是一样的效果。

但需要注意的是如果属性值中含有空格、单引号、大于小于号、反引号等字符时,则必须加引号,而当属性值中含有单引号时,可以加双引号,而值中有双引号时就可以 加单引号。为了养成一个好的习惯,建议好始终给属性值加双引号。


2、内容标签是标签中包含一段内容,如p和strong这样的元素;非内容标签(空元素)是指标签不包含内容,比如换行等,它只有起始标签,不需要结束标签,以HTML5以前为了强调结束,经常把非内容标签写成<br />样子,而在HTML5中规定,非内容标签不需要关闭。常见的非内容标签有:<meta>、<img>、<br>、<input>、<link>、<hr>、<embed>等。


3、注释:不论单选还是多行,只需要把注释放在<!-- 注释内容 -->。


4、HTML页面根元素,在整个页面中html是根元素,在这个元素中一般有两个属性,一个是lang,另一个是manifest。

<html lang="zh-cmn-Hans">:声明页面的语言为简体中文。(非标准写法为lang="zh-CN");manifest属性用于设定页面缓存,它一旦设置后,浏览器便会将需要缓存的文件保存在本地,主要适用于不依赖网络,且下载后不需要再次更新的HTML5游戏、应用等,如果页面内容需要频繁更新的应该少用该属性,具体用法可以查询HTML5手册,这里不详细说明。


5、Head元素包含五个主要部分,分别是title、link、style、base和meta元素。title元素即网页的标题;link元素定义了文档与外部资源的关系,除了CSS外,还有许多的外部资源也通过这一元素引入页面;style元素用于在页面中定义样式;base元素用于标记文档的基础URL地址,还可被用于设置全局的浏览器打开方式,如:<base target="_blank">设置页面中所有的链接均在新窗口中打开

;meta元素是head中各类最丰富的一个元素,虽然它包含了多种多样的元数据,但它被规定了必须包含name(元数据名称),http-equiv(编译指令)和charset(字符编码)三种属性的其中一种。如不希望页面被抓取并公开时,我们可以在页面中添加名为robots的meta标记,如:<meta name="robots" content="none">,反之则所有都被检索到<meta name="robots" content="all">

。meta元素还能完成诸如刷新、重定向、缓存时间等功能。


6、HTML5新增了header元素,专门用来表述这样的头部区域,section元素对应不用的内容版块,文章可以用article元素来表示,页面的侧边栏可以用aside元素来表示 ,而且不仅可以放在整个页面的代表侧边栏区域,还能放入section或article中,来容纳一些与版块和文章相关的内容。


7、footer元素和header元素并非区块内容,在这两种元素之内不能再嵌套放入类似section之类的元素。


8、不是所有的文字段落都适用p元素,如一段文字为联系信息时,则应使用address元素。


9、定义列表的除了有ul和ol外,还有一种更加自定义的形式,它由三种元素的组合而成,分别是dl、dt和dd。


10、内容分组元素figure元素,它主要用于展示插图、图表、照片、代码列表等。


11、HTML5加入了一种新的内容分组元素,用来指定页面的主要内容,main元素,每一个页面中最多只能有一个main元素,另外还有像水平分隔线的hr,表示源代码的pre,代表引用的blockquote等都同样属于内容分组元素。


12、在过去HTML版本中,a还可以当成锚点,如<a name="a1"></a>,但在HTML5中把这一特性去掉了,当href属性缺失时,它被视作一个占位符,而不会显示为一个超链接。


13、span元素是一种常见的文本元素,但如果不对span设置样式,则spqn中的文本和其他的文本看上去不会有任何差异。


14、在HTML5中有两种表示强调的文本元素,分别为em和strong,em元素更多代表语义、语气的加强,而strong则更加强调页面文本的重要性、紧急程度等,浏览器中em默认的显示为斜体,而strong则显示为粗体。


15、big标记的文本显示大于普通的段落文本,而small标记的文本则小于普通 的段落文本;当需要插入某句被引用的话,或者某段文字摘录时,可以使用q元素,而当需要插入文献的标题、作者、链接时使用cite元素,q元素默认在头和尾加上双引号,而cite元素默认显示为斜体。


16、表单在制作时需要设置method和action属性,分别用来指定表单提交数据的方式和目的页面;数据提交的方式有两种,get和post,get是把数据放在URL中,以明文的方式发送给后台,它不能传输过大的数据,也不能传输文件类数据,而post是把数据放在数据体内再发给后台,数据不能直接被看到,可传输的数据量较大,所以一般都选择使用post方式。


17、在文本输入框可以加入placeholder(占位符)属性,值为框内显示的文本,也可以为input元素添加required属性使该表单项必填,也可以添加autofocus属性使其自动获得焦点,一般设置第一个字段。


18、HTML5为input元素增加了很多新的类型,如电话的tel,电子邮件的email,日期的date等。


19、radio表示单选按钮,同一组的单选按钮具有相同的name属性,它的值由value属性决定,checked属性表示该按钮默认选中。如:

<p>
<label for="sex">性别:</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

还可以使用分区度更高的fieldset元素,它可以对表单内容的一部分进行打包,生成一组相关的表单字段,它使用legend元素指定标题。

checkbox的input元素为复选框,checked属性为选中状态;select元素生成下拉菜单,元素使用option元素标记。