<!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等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网(html.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
解析
|
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
HTML 元素:
<p>这是一个段落。</p>
头部元素包含关于文档的概要信息,也称为元信息(meta-information)。Meta 意为“关于某方面的信息”。
可以这么说,元数据(meta-data)是关于数据的信息,而元信息是关于信息的信息。
<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时,显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
|
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
|
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
|
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<meta> 一般放置于 <head> 区域
<script>标签用于加载脚本文件,如: JavaScript。
<script> 元素在以后的章节中会详细描述。
HTML head 元素
标签 | 描述 |
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了一个文档和外部资源之间的关系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
开始标签 | 元素内容 | 结束标签 |
<p> | 这是一个段落 | </p> |
<a href="default.html"> | 这是一个链接 | </a> |
<br> | 换行 |
HTML注释标签<!--...-->用来在源文档中插入注释。注释不会在浏览器中显示。可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
<!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 区块元素
可以通过 <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 源代码中使用字符实体(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元素标记。
*请认真填写需求信息,我们会在24小时内与您取得联系。