一、HTML5文档类型说明

 二、head部分-基本标签
1、<head>标签
head中主要放关于网页设置的相关语句。
 
2、<title>标签

 3、<link>标签
链接文件，要有属性及属性值
例，链接小图标代码：

4、<meta>标签
1、设置网页的字符集编码格式：
GB2312：国标码。简体中文的编码格式。
GBK：扩展的国标码。比国标吗多了更多的编码格式。
utf-8；万国码。可以兼容绝大多数国家的语言。
html4.01之前，声明字符集编码的格式：<meta http-equiv="Content-type" content="textml; charset=utf-8" />
 2、设置网页关键字
<meta name="keywords" content="杰瑞教育,html5,Web开发"/>
name="keywords"表示当前语句用于设置网页关键字
content=""表示网页的关键字内容。多个关键字之间用英文逗号分隔。
3、设置网页描述
<meta name="description" content="这是我开发的第一个网页。"/>
网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页的描述内容。
三、body部分

1、<body>标签
HTML标签，分为“块级标签”和“行级标签”。
【块级标签和行级标签的区别】
1、块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右一次显示；
2、块级标签的宽度默认是百分之百，行级标签的宽度由文字内容撑开；
3、块级标签可以设置宽度、高度、边距等属性，行级标签不能设置上述属性。

从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)”
成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。
例如：<h1></h1>  <p></p>  <title></title>
自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合(/可以省略)。
例如<hr /><link /><meta />
2、<h>标签
h标签：标题标签，默认加粗，数字越小标题越大

 
显示效果如图：
 
3、<hr/>标签
水平线标签
4、<br />标签
换行标签，在代码中敲回车，在网页中并没有作用。必须使用<br>断行。
5、<p>标签

6、<blockquote>标签

7、<pre>标签
预格式标签

显示效果如图：

五、基本行级/块级标签

常用的行级标签

1.span标签

2.[em/i/b 区别]

1)em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义。（强调的作用：可以让搜索引擎快速的抓取网页的重点部分。实现代码的语义化。）
2)em和strong都有强调的作用，但是em是倾斜，strong是加粗。而且，strong的强调程度要比em更高。

3.常用的引用标签

常见的引用标签有：blockquote、q、cite
区别：
① 显示效果上： blockquote整段缩进、q加引号、cite 倾斜
② 从功能上： blockquote用于引用一整段内容，是块级标签。 q用于引用一句话，是行级标签。 cite常用于引用作品名、书画名。

4.small标签和big标签

5.img标签

 1). src属性：表示图片所在的路径。

   [路径的表示方式]
   ① 网络图片地址。 并不建议使用。
   http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg 

   
   ② 可以使用图片的绝对路径。但是，严禁使用绝对路径。 因为，绝对路径使用file://协议，网页使用http://协议打开无法访问file://协议的文件。
   file:///C:/sunyang.jpg -- 绝对路径写法：file:///盘符:/文件路径
   
   ③ 使用相对路径。 推荐使用的唯一方式。
     a. 图片在当前文件的下一层， “文件夹名/图片名”
     b. 图片与当前文件在同一层，直接写"图片名"
     c. 图片在当前文件的上已成，"../图片名" 。
     注意： 图片必须包含在项目里面，不能退出项目根目录

2). width、height   宽度、高度属性

3). title：鼠标指上时显示的文字

4). alt： 图片无法加载时，显示的文字。 省略alt，将默认显示title内容

5). align: 图片周围的文字，相对于图片的排列方式；
  top 文字居上   center 文字居中  bottom 文字局底

6.a标签

1)超链接

2)功能性链接

6.其他的一些行级标签（不重要，了解即可）

块级标签

1.h标签、hr标签、p标签、blockquote标签、pre标签（前面已说过）

2.列表

1)有序列表

2)无序列表

3)定义列表

3.组合标签figure

4.div标签

HTML5基本标签的更多相关文章

  1. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  2. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  3. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  4. HTML语义化：HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  7. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  8. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  9. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  10. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

随机推荐

  1. Spring MVC 项目搭建 -3- 快速 添加 spring security

    Spring MVC 项目搭建 -3- 快速 添加 spring security 1.添加 spring-sample-security.xml <!-- 简单的安全检验实现 --> & ...

  2. RADIUS and IPv6[frc-3162译文]

    如今项目中需要涉及到RADIUS及IPv6的使用,而网络中的资料相对较少,现对frc-3162进行中文翻译,分享出来. 由于英语水平有限,翻译不恰当的地方,还请提出,便于在下及时修改. 原文链接 这份 ...

  3. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  4. 在使用<script>嵌入JavaScript代码时，不要在代码中的任何地方出现"</script>"字符串

    在使用<script>嵌入JavaScript代码时,记住不要在代码中的任何地方出现"</script>"字符串.例如浏览器执行下面代码会报错: <s ...

  5. Angular基础（一）

    AngularJS有五个主要核心特性,如下介绍: 双向数据绑定 -- 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然. 模板 -- 在AngularJS中,模板相 ...

  6. 适合初学者的一个分布式环境搭建过程(spring boot + zookeeper + dubbo + mybatis + mysql)

    本人也是才开始接触 阿里巴巴的开源分布式框架 dubbo,因为现在微服务框架 spring boot也非常的火,然后结合dubbo的官网搭建这个开发环境. 一.首先 zookeeper作为集群管理服务 ...

  7. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

  8. DELPHI下的SOCK编程

     DELPHI下的SOCK编程(转自http://www.cnblogs.com/devcjq/articles/2325600.html) 本文是写给公司新来的程序员的,算是一点培训的教材.本文不会 ...

  9. 用Left join代替not in

    很多人都知道 在各种数据库里面 not in 的效率极其低下.例如 select * from a where a.id not in ( select id from b ) 我们假如a表有 10万 ...

  10. js&jquery跨域详解jsonp，jquery并发大量请求丢失回调bug

    URL  说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...