HTML5入门必知

第一部分　　认识HTML

一、认识HTML

　　1、HTML

　　HTML：超文本标签语言Hyper Text Markup Language

　　 HTML：网页源代码。

　　浏览器：“解释和执行”HTML源码的工具。

　　2、HTML的结构组成：

　　<!DOCTYPE html>

　　 //文档类型声明：声明当前文件是一个HTML5文件.

　　文档类型声明在一个html文件中必不可少！而且必须在网页的第一行！

　　<html>

　　 <head>

　　 <title>这是一个网页</title> //标题，即网页选项卡上的文字

　　 </head>

　　<body>

　　 Hello world!

　　 </body>

　　 </html>

第二部分　　HTML的基本标签

一、HTML的基本标签

　　1、 HTML标签：<></>

　　 HTML标签属性：

　　是标签的一部分，用于包含额外的信息

　　可多个属性属性和属性值成对出现

　　例如：<img scr=""></img>

　　　　HTML注释快捷键：ctrl+/

　　2、link标签

　　 ① <head></head>双标签

　　　　形如<link/>这样的标签，叫做自闭合标签，也叫空标签。

　　　　这样的空标签只有一个标签，标签在最后用/表示结束。

　　　　 <head>　　 //链接css标签

　　② <link />

　　　　 link标签用于将网页和其他文件进行连接。

　　　　rel="icon"rel属性表示即将连接的文件，与当前网页的关系。属性值选择icon表示即将连接的文件，是当前网页的图标。

　　　　 rel 是标签的属性 "icon"是标签的属性值，属性值必须用引号引起来。href=""表示所要连接的图片地址。

　　　　<link rel="icon" href="image/icon.PNG" /> //添加图标

　　3、meta标签

　　（1）声明当前网页所采用的字符集编码格式。

　　（2）常见的中文编码格式：

　　gb-2312：国标码，简体中文的编码格式。

　　　　GBK：扩展的国标码，也是简体中文，但是比GB2312多了更多的编码格式。

　　　　utf-8：Unicode编码，万国码，基本兼容各国语言编码。常用！！！

　　　　例如：<meta charset="utf-8" />

　　（3）name="keywords"表示这一行meta语句是要设置网页的关键字。

　　 content="" 设置当前网页的关键字内容，多个关键字用英文逗号隔开。

　　　　　name属性和content属性必须同时设置，name表示需要设置的项目，content表示设置的具体内容。

　　<meta name="keywords" content="HTML5.web前端,网页开发,杰瑞教育"/>

　　（4）设置网页的描述，网页描述在网页中非常重要，在搜索引擎中搜索网页时，网页标题下面显示的一段文字，就使网页的描述。

　　　　<meta name="description" content="这是我在杰瑞教育开发的第一个网页">

二、块级标签

　　1、各类标签

　　　　① 标题标签 <h1></h1>

　<h6></h6> 　　自动加粗！！h1最大，h6最小。

　　　② 水平线标签 <hr />

　　　③ 段落标签 <p></p> 没有特殊含义，仅仅表示当前文字是一个段落。

　　　④ 引用标签 <blockquote></blockquote> 表明当前文字引用自其他地方.浏览器会默认向右缩进显示，但可以通过css进行调整。

　　　⑤ 预格式标签 <pre></pre> 会保留代码中的回车、缩进、空格等，并在网页中显示。

　　2、用于布局的块级标签：

　a、无序列表

　　<ul></ul> ul: unorder list

　　　　type表示符号类型 circle：小圆圈 square：正方形

　　　　代码示例：

　　　　　　<li>第一项

　　<ul> //默认符号类型为 circle

　　　　　　　　</ul>

　　</li>

　　　　</ul>

　b、有序列表

<ol></ol> ol: order list

　　　　有序列表中的每一项用list表示

　　　　type属性表示序号的类型：1 表示数字，a/A表示字母，i/I表示罗马数字

　　　　代码示例：

　　　　　</ol>

　　3、定义描述列表

　　　　<dl>

　　　　　　<dt>这是定义列表的标题</dt> 　　 //使用dt 表示标题

　　　　　　<dd>这是描述项1</dd> 　　　　　//使用dd 表示描述项

　　　　　　<dd>这是描述项2</dd>

　　　　　　<dd>这是描述项3</dd>

　　　　</dl>

　　注意：标题一般只有一个，描述项可以有多个。

　　　　　标题顶格显示，描述项相对于标题向右显示。

　　4、其他块级标签

　　　① 图片组合标签 figure

　　　　用于将图片与下方的标题进行包裹，图片使用img表示，标题使用figcaption表示。

　　　　　　代码示例：

　　　　　　　　<figcaption>这是图片的标题</figcaption>

　　　　　　</figure>

　② 分区标签 div

　　　　　是网页开发过程中最常用的标签，div标签可以包裹任何标签，通常配合css使用。

　　　　　代码示例：

　　　　　　　　这是一个div标签。

　　　　　　</div>

三、行级标签

　　1、主要行级标签

　　　⑴ span（文本）

　　⑵ img（图片）

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

　　　　　　　[路径的表示方法]

　　　　　　　① 网络图片地址，但不建议使用。

　　　　　　　② 使用图片在本机的绝对路径，但是严禁使用。因为，使用file://协议引入的图片，由于网页使用的是http://协议，所以无无法使用file://协议引入的文件。

　　　　　　　　<img src="file:///c:/logo.png" /> (//协议、/回到根目录)

　　　　　　　③ 使用相对路径，推荐使用的唯一方式。

　　　　　　　　a.当图片在当前文件的下一层时，使用“文件夹名/图片名”表示。

　　　　　　　　b.当图片与当前文件在同一层时，直接用“图片名”表示。

　　　　　　　　C.当图片在当前文件的上一层时，使用“../图片名”表示。

　　　　注意：图片必须包含在项目目录里面，不能退出项目根目录。

　　　　　　 2.width/height：图片的高度、宽度。

　　　　　 3.title：当鼠标指上后显示的文字。

　　　　　　 4.alt：当图片无法加载时显示的文字，如果省略alt属性，则图片无法加载时将显示title的文字。

　　　　　　5.align：图片两边的文字相对于图片的排列方式；

　　　　　　top 文字居上；center 文字居中：bottom 文字居底（默认）。

　　　 (3) em（强调）

　　　 (4) strong（强调）

　　　 (5) i（倾斜）

　　 (6) b（加粗）

　　　 (7) small（小一号字体）

　　 (8) big（大一号字体）

　　 (9) q（短引用）

　　 (10) blockquote(块引用)

　　（11） cite（标题引用）

　　（12） a（超链接）

　　　　　　1.href属性：超链接即将要跳转的页面，可以是网络地址，也可以是本地的html文件。

　　　　　　2.target属性：设置新页面打开的位置。

　　　　　　　　_self 当前页面打开（默认）；_blank 在新页面打开。

　　　　　　3.title：当鼠标指上后显示的文字。

　　　　　　【功能性链接】

　　　　　　1.mailto：给指定邮箱发邮件。

　　　　　　　　<a href="mailto://jianghao@jerei.com">给XX发邮件！！</a>

　　　　　　2.tencent：与指定QQ聊天。

<a href="tencent://message/?uni=2831705549">跟XXQQ聊天！！</a>

　　　　　　3.锚链接：点击超链接，跳转到页面的指定位置（锚点）。

　　　　　　　① 在页面的指定位置，定义一个锚点：

　　　　　　　　　　<a name="top"></a> （锚点名称最好不用数字开头，用字母）

　　　　　　　　　　<a href="#top">点击我回到顶部</a>

　　　　　　　③ 跳转到其他页面指定位置的方式：

　　　　　　　　　<a href="02-HTML基本块级标签.html#div_top">跳转到另一个页面中间</a>

　　　2、其他行级标签

　　　　⑴ <s>删除线</s>

　　　　⑵ <u>下划线</u>

第三部分　　表格

一、表格

　　1、格式

　　　　<table>

　　　　　　<tr>　　//行

　　　　　　　　<th></th>　　//表格标题，表头

　　　　　　</tr>

　　　　　　<tr>

　　　　　　　　<td></td>　　//单元格

　　　　　　</tr>

二、表格的各种属性

　　【表格的各种属性】

　　1. border：给表格的每个td和整个table添加标签。如果border>1，则只有最外层边框会加粗，td上的边框不会变化。

　　2. width/height：表格的宽度、高度。

　　3. cellspacing：设置单元格与单元格之间的间距。

　　如果cellspacing="0"，则单元格之间的间距为0，但是相邻的边框不会合并，而是显示两条边框的宽度。

　　[设置表格边框合并]

　　　　可以CSS设置：style="border-collapse: collapse;"

　　　　设置边框合并后，cellspacing属性将会失效，因为两条边框已经合并到一起，不能再产生间距。

　　4. cellpadding：设置单元格内边距，单元格中的文字与边框之间的距离。

　　5. align：设置表格在父容器中居左、居中、居右。

　　 align属性相当于使表格浮动，会影响表格后面内容的布局。

　　6. bgcolor：表格背景色。

　　 background：表格背景图。背景色与背景图同时存在时，背景图生效。

　　 bordercolor：边框颜色。

三、表格的跨行跨列

1、表格跨列：colspan 如果一个单元格跨n列，则其右方n-1个单元格需删掉；

2、表格跨行：rowspan 如果一个单元格跨n行，则其下方n-1个单元格需删掉。

四、表格的结构化与直列化

　　1、表格的结构化：

　　完整的表格应该包括以下几部分：

　　　　caption：表格的标题，永远在表格最上方居中。

　　　　thead：表格的表头部分，无论thead放在表格的什么地方，显示时永远在表格的最上方。

　　　　tbody：表格的主体部分，在thead之下，tfoot之上，一个表格根据需要可以有多个tbody。

　　　　tfoot：表格的尾部，无论tfoot放在表格的什么地方，显示时永远在表格的最下方。

　　2、表格的直列化：

　　表格有几列，就可以在表格的最上方写几个<col/>标签，每个<col/>标签就对应着表格的每一列，这就是表格的直列化。

　　如果要同时修改多列，可以将多个<col/>标签，使用<colgroup><colgroup/>进行包裹，统一修改。

第四部分　　表单

　　1、表单有两个重要属性：

　　　　action：表示表单提交的后台服务器地址：

　　　　method：表单提交数据的方法，可选值有get和post两种。

　　　　　【get和post的区别】

　　　　　① get使用URL地址栏进行传递数据，所有地址在地址栏可见，不安全；

　　　　　　 post传递数据在地址栏无法显示，比较安全。

　　　　　② get传递的数据量有限，而且只能传递纯文字数据；

　　　　　　 post可以传递大量数据，而且可以传递图片、视频、文件等。

　　　　　③ get传递数据的速度要比post快。

　　2、input的常用属性：

　　　　① type：表示当前输入框是什么类型；

　　　　② name：给输入框起名称，向后台传递数据时，name属性必不可少。

　　　　③ value：给input赋默认值。

　　　　④ placeholder：输入框的提示内容。当输入框存在value时，提示内容消失。

　　　　⑤ disabled="disabled"（disabled）禁用当前输入框。可以显示，不能编辑。

　　　　　　被disabled禁用的输入框，数据将不再向后台传递。

　　　　⑥ hidden="hidden" 隐藏输入框。隐藏的数据框中的数据，依然可以向后台传递。

　　3、input的type类型：

　　　① text：文本输入框

　　　② password：密码输入框，输入的内容显示为小黑点。

　　　③ radio：单选框。

　　　　单选按钮的value不能省略，这个value需要向后台传递。

　　　　radio凭借name是否相同，区分是否同一组，同一组中name必须相同，而且只能选一个。

　　　　checked="checked"设置单选按钮的默认选中项。

　　　④ checkbox：多选框。其他与radio相同。

　　　⑤ file：文件上传框。

　　　　multiple="multiple" 设置可以上传多个文件。

　　　　accept="" 设置可以上传的文件类型，"*"表示所有文件，"image/*"表示所有图片

　　　⑥ submit：表单提交按钮。

　　　⑦ reset：表单重置按钮，将表单恢复到最初状态。

　　　⑧ image：图形提交按钮。src属性用于导入图片，功能与submit相同。

　　　⑨ button：显示为按钮形状，但是没有任何功能。

　　　⑩ hidden：作用与普通输入框加hidden="hidden"属性的效果相同。