首页 > > 网页制作 > css >

零基础学习HTML5

2018-06-24 01:00:56来源：未知阅读 ()

HTML5在近几年异常火热，因其功能强大、灵活多变等特点而被追捧。

这篇博客是我跟随老师学习所的到的知识，从入门到精通需要的是坚持和系统地学习。

让我们开始吧！

HTML5的基本结构

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

</html>

第一行为文件声明，每个文件都必须要有而且必须要在第一行。

文件由html标签组成，大部分标签成对出现且闭合，也有单独出现的标签。不同标签之间可以嵌套，但是不可交叉。

这里出现的标签有：head标签，body标签这些是基本标签。

head 用于表示网页的元数据，即描述网页的基本信息。

head标签中又有meta标签和title标签，他们又有各自的属性。

meta标签常用属性：

1、charset：设置文档的字符集编码格式HTML5中设置字符集编码：<meta charset="UTF-8">

HTML4.01之前的格式为:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

可以看到之前的代码十分繁琐，这也是H5中改进的内容。

>>>常见的字符集编码格式：

a.GB-2312：国标码，简体中文

b.GBK:扩展的国标码

c.UTF-8：万国码

其中，UTF-8为最常用的编码格式，为各国通用。

2、http-equiv:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，

可选属性值：content-type(文档类型)refresh（网页定时刷新） set-cookie（设置浏览器cookie缓存）。

这个标签需要配合content属性使用（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）。

例如：

<meta http-equiv="content-type" content="text/html: charset=utf-8"/>

3、name：使用方法同“http-equiv”。name标签是将我们的信息写给搜索引擎看的。

常用且需要掌握的属性值：author（作者）

<meta name="author" content="http://www.jredu100.com"  />

keywords（网页关键字）多个关键字用半角逗号分隔.

<meta name="keywords"  content="HTML5,网页,web前端开发"/>

description（网页描述）搜索网站时，title下面的解释文字，至关重要。

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

后两个个属性设置，网页必不可少。

title标签：网页的标题，即网页选项卡上的文字。

一般网页选项卡中我们会看到标题前有小图标，这里就用到了link标签

link标签常用的属性：rel：声明链接文件的类型

type：图片的类型可以省略

href：表示图片的路径地址

事例：

<link rel="icon" type="image/x-icon" href="../img/icon.png">

怎样选择文件路径之后会进行详述。

基本结构之后就是一些常用的标签，这些标签便是用户访问网址时显示在页面上的东西，其中有些标签会让你的页面看起来比较丰富，还有一些标签的合理运用会使你的布局更加清晰。

常见的块级标签和行级标签

块级标签和行级标签的区分，部分书上会有不同。比较通用的区分方法是：该标签之后有无换行。有换行则为块级标签。

常见的块级标签：

1、h标签：标题标签,自动加粗，h1最大h6最小

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

2、hr标签：水平标签，一条水平线

<hr />

3、p标签：段落标签。

 <p>第一段文字</p>
 <p>第二段文字</p>

4、br标签：回车标签。

<br />

5、blockquote标签：引用标签,cite属性，表明引用的来源，一般表明引用的网址。浏览器默认显示为首行缩进。

<blockquote cite="http://www.jredu100.com">

6、pre标签：预格式标签。浏览器默认显示样式:1、显示为等宽字体；2、代码中的换行、空格等元素可在浏览器直接显示。一般要在网页中输入代码就会使用这种标签。

<pre></pre>

基于布局的块级标签

1、ol标签：有序列表

<ol>
      <li>第一项</li>
      <li>第二项</li>
</ol>

列表中li可以有N多项，下同。

2、ul标签：无序列表

<ul>
      <li>第一项</li>
      <li>第二项</li>
</ul>

有序列表前有序号，无序列表前为圆点。

3、dl标签：定义描述列表

<dl>
         <dt>这是定义列表的标题</dt>
         <dd>描述1</dd>
         <dd>描述2</dd>
</dl>

标题在页面中顶格显示，描述项相对标题首行缩进。

4、组合标签：用于显示图片及图片标题

<figure>
  <img src="../img/icon.png" />
  <figcaption>这是图片标题</figcaption>
</figure>

显示效果：图片下面一个标题，同时图片和标题前带缩进。

/5、div标签：极常用的标签，灵活多变，页面大多都大量使用此标签。其便于设置属性，而且还可以借助其他工具进行定义修改，之后会有相关内容。

<div style="width: 100px;height: 80px;background-color: aquamarine;">这是一个div</div>

实际开发中常用的4中块级结构：

div-ul-li：常用于分类导航或菜单等

div-dl-dt-dd(figure)：常用与图文混编

table-tr-td：常用于图文布局或显示数据

form-table-tr-td：常用于布局表单

常见的行级标签

行级标签从左往右逐一显示。

1、span标签：无实际意义，用于包裹某部分文字，修改特定样式。

<span>这是span中的标签</span>

2、em（强调）

3、i（倾斜）

4、strong（强调）

5、b（加粗）

strong、em、b、i标签的区别

①strong和em都表示强调，strong显示为粗体，em显示为斜体。而且，strong比em的强调程度更高。

②、strong和b都能加粗，em和i都能倾斜。但，strong和em多了一层强调的语义。HTML5语言要求标签尽可能的实现语义化。

6、q（短引用）：显示为“”中的文字

7、small（缩小字体）big（增大字体）可以多层嵌套，直到字号极限。但是不常用。

8、img（图片）

有以下属性

1、src表示引用图片的地址。

路径地址的写法：

①相对路径:以当前文件为准，去寻找图片地址。

a、与当前文件处于同意层的图片，直接写图片名。

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

②绝对路径：file:///盘符:/文件夹/图片.后缀名。但是严禁使用

③网络地址：网络上的图片链接。但是一般不用，网络上图片因由无法使用时链接会失效。

2、height=“”、width=“”图片的宽度和高度。可以使用css样式（style="width=; height=;"代替）

3、title：图片标题。当鼠标指上后显示的文字。

4、alt：当图片无法显示时显示的文字。

5、align：设置图片周围文字相对于图片的位置。 top center bottom

9、a（超链接）

1、href：超链接的路径，可以是网络连接，也可以是本地文件（路径确定同img）

2、target:超链接打开的位置，_self 当前页面打开（默认） _blank新页面打开

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

4、(了解) rel ：用于表明被链接文档与当前文档的关系：rel="prev"（被链接文档时前一篇文档）前一篇文档 rel="next"

rel=“icon”被链接图片时当前文档的图标

rel=“stylesheet”被链接文档时当前文档的样式表

rel=“prefetch”预加载：在当前文档加载完成后利用空余时间，预加载即将连接的文档。

5、锚链接：

①本页面锚链接：a.设置锚点：<a name="top"></a>

b.在超链接上，使用#name跳转到对应锚点。

  <a href="#top" target="_self" >超链接</a>

②页面间锚链接：a.在积极跳转页面的指定位置，设置锚点

b.在超链接的href属性中，使用“页面地址.html”

<a href="t.html#weixin">跳转到新页面指定部分</a>

6、功能性链接：

mailto：用于给指定邮箱发送邮件

tencent://message/?uin=523291845 给指定QQ发送消息

file:///e:/aaa.png打开本地文件

<a href="mailto:123456789@qq.com">发邮件</a>

10、s：有误文本。文本内容上会有一条删除线。

11、cite：浏览器显示为倾斜，常用于书、画作、作品的引用。

12、code：只表示计算机代码，不改变格式，需配合pre标签使用。

13、bdo:表示文本方向

<bdo dir="rtl">从右向左显示</bdo>

14、kbd：表示用户需要用键盘输入的内容。浏览器显示为等宽字体

15、sup：上标文本 sub：下标文本

16、&copy；版权符号。 空格

17、u：下划线

18、mark：高亮或标记文本，浏览器显示为黄色背景。

19、time：表示时间。

表格

表格十分的常用，用来布局或者做表单都很好用。但是要注意单元格的合并，否则可能会结构错乱。

表格 table

表格的行：tr 每行中的列：td

表头：<th></th>默认加粗，单元格居中

　　【常用属性】

1、border：给表格添加边框。当border属性增大时，只有外围框线增加，单元格的边框始终为1px

2、cellspacing:单元格与单元格时间的间隙距离。当我们使用cellspacing=0时，只会使单元格间隙为0但不会合并边框线

表格边框合并：style="border-collapse: collapse"，无需再写cellspacing=0

3、cellpadding:单元格中的内容与边框线的距离。

4、width、height：表格的宽高

5、align：在屏幕 left center right 位置显示

　　　　>>> 注意：给表格加上align属性，相当于让表格浮动，会直接打破表格后面元素的原有排列方式。

6、bgcolor：背景色等同于 style="backgroungd-color: ;"

7、background：背景图片等同于style="background-image",且背景图会覆盖背景色。

8、bordercolor:边框颜色

　　　　　　【tr和td的相关属性】

1、width/height：单元格宽高

2、bgcolor：单元格的背景颜色

3、align：left center right 单元格中的文字，水平对齐的方式

4、valign：top center bottom 单元格中的文字，垂直对齐的方式

5、nowrap：单元格中文字不换行

>>>注意：1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先，离内容越近的优先级越高）

　　 2、表格的align属性时控制表格自身在浏览器的显示位置。行和列的align属性是控制单元格中文字在单元格中的对齐方式

　　　　 3、表格的align属性，并不影响表格内，问你的水平对齐方式

tr的align属性，可以控制一行中所有单元格的水平对齐方式

实例：

<table width="500" border="1" cellspacing="0" style="border-collapse: collapse;"
       cellpadding="10" align="center" bgcolor="red" background="../img/icon1.png"
       bordercolor="blue">
         <caption>表格的标题</caption>
         <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
         </tr>
         <tr>
            <td align="right" width="10">1-111111111111111111111111111111111111111111111111</td>
            <td height="10" valign="center" nowrap="nowrap">1-22222222222222222222222222222222222</td>
            <td>1-3</td>
         </tr>
         <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
         </tr>
</table>

表格的跨行与跨列

colspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除

rowspan 跨行，当某个格跨N行时，其下方N-1个单元格需删除

<td colspan="3" align="center" valign="center">杰瑞教育</td>

这行代码的实现的是当前单元格跨3列，文字水平居中且垂直居中。

表格的结构化

完整表格结构 thead tbody tfoot

无论本部分在表格什么位置，显示时，caption在表格外上方，thead在表格上方

tfoot在最下方

表格的直列化

<col align="center" style="background-color: red;" /> 
<colgroup style="background-color: green;" >后两列为一组
        <col />
        <col />
</colgroup>

表单

我们在网页中进行的注册、登录等都是通过表单来实现的。

【form表单】

<form action="" method="post">
    <table border="" cellspacing="" cellpadding="">
        <tr>
            <td>
                <input type="text" name="" id="" value="" />
            </td>
        </tr>
        <tr><td></td></tr>
    </table>
    <input type="submit" value=""/>
</form>

这是一个表单的基本格式。

1、两个重要属性：action-表单提交的服务器地址
method-表单提交数据的方法（get/post）
2、get和post的区别：
①get：使用URL传参：http://服务器地址？name1=value1&name2=value2
(?表示传递参数，？后面采用name=value的形式传递，多个参数之间用&连接)
所以，URL传参不安全，所有信息可在地址栏看到,并且可以通过地址栏随意传递其他数据
URL传递数据量有限，只能传递少量数据。但是传参速度快。
②POST：使用http请求传递数据。URL地址栏不可见，比较安全。且传递数据量没有限制。
综上所述：常用post传递数据
3、【input标签及属性】
①type：表示input输入框的类型。可选值有：
②name：input输入框的别名。一般情况下，必填。因为，传递数据时，使用name=value的形式传递
③value：input输入框的默认值
④placeholder：input的提示内容，当输入框用value时，提示内容消失
⑤tabindex="1"控制点击tab键的跳转顺序，从最小的开始，逐个往大的数值跳转获得焦点
4、【input-type属性详解】
①text：文本输入框
②password：密码输入框
③radio：单选按钮。
checkbox：复选选项
name和value属性需同时存在，提交时，提交的value的属性值
例如：<input type="radio" name="sex" value="男" />男提交时 sex=男
radio凭借name属性区分是否为同一组。name相同，为同组，只能选择一个
checked="checked"默认选中（radio可以选一个，checkbox可以选多个）
④file：文件上传按钮。
⑤submit：提交按钮。提交表单数据
⑥reset：重置按钮。将表单重置为初始状态
⑦image：图形提交按钮。功能同submit 可以提交数据
⑧button：普通按钮。没有任何功能。
【input特殊属性值】
①checked="checked"默认选中
②disabled="disabled"设置控制不能使用。用在按钮上不能点击，用在输入框上不能修改。‘
而且，输入框disabled，则输入框信息不能往后台传递。
③hidden="hidden" 隐藏。等同于type="hidden".常配合disabled，或根据其他需要使用隐藏域传递数据
5、【下拉选择控件 select】
①写法：<select>
<option></option>//可以有N多个
</select>
②name属性，应该写在select上，所有选项只有一个name
③multiple="multiple"：设置select控件为多选，可在界面使用Ctrl+鼠标单击进行单项
④option常用属性：
value=""：当option没有value属性时，往后台传送的时<option></option>标签中的文字；
当option有value属性时，往后台传递的时value的值
title=""：鼠标指上后显示的文字
selected="selected"：默认选中
⑤<optroup label="山东省"></optroup> :用于将option标签进行分组，label属性表示分组名
6、【文本域 textarea】
①写法：<textarea></textarea>
②设置宽高style="width= ;height=;"自身有cols=""rows=""两个属性，但不常用
③readonly="readonly"设置为只读模式，不允许编辑
④style="resize:none"设置为宽高不允许修改
⑤style="overflow:;"设置当文字超出区域时，如何处理。
也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式
常用属性值：hidden超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条(默认样式)
7、【表单的边框与标题】
<fieldset>//表单边框
<legend>联系方式</legend>表单标题
</fieldset>
如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面
一个表单，可以有多组边框+标题的组合
8、【html5 智能表单】
①、H5新增input的form属性，用于指向特定form表单的id，
实现input无需放在form标签之中，即可通过表单进行提交。
<form id="foo">
</form>
<input ... form="foo">
②type新增属性
email week month time URL range color
③ input元素的新增属性：
Autocomplete：自动完成功能：记录用户之前输入的内容并在下次输入时自动提示
完成输入
属性值：on/off
可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
也可以在input上使用，对特定输入框进行修改
绝大部分浏览器默认开启

Autofocus：自动获得焦点.autofocus="autofocus",只能设置input元素自动获得焦点

Form：所属表单：通过form表单的id，确定此input输入哪张表单

Required：必填，required="required"设置input必填，否则阻止提交

Pattern：使用正则表达式验证input的模式

Placeholder：提示内容，当有value时，取消提示

<html>
    <head>
        <meta charset="UTF-8">
        <title>用户注册表单练习</title>
    </head>
    <body>
        <div style="background-color: #EEEEEE;width: 1013px;">
            <img src="img/icon1.png" /><b>用户注册</b>
        </div>
        <form action="" method="post">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td colspan="3">
                        <input type="text" name="username" id="username" value="" style="width: 200px;"/>
                        <span style="color: red;">*</span>
                        <a href="t.html">检查是否有相同的用户名</a>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" name="password" id="password" value="" style="width: 200px;"/>
                        <span style="color: red;">*</span>
                        <span style="color: gray;">（至少六位）</span>
                    </td>
                    <td>真实姓名：</td>
                    <td>
                        <input type="text" name="name" id="name" value="" style="width: 200px;"/>
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td>
                        <input type="text" name="pass" id="pass" value="" style="width: 200px;"/>
                        <span style="color: red;">*</span>
                            </td>
                <td>性别：</td>
                    <td>
                        <select >
                            <option>男</option>
                            <option>女</option>
                        </select>
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td>证件类型：</td>
                    <td>
                        <select style="width: 204.8px;">
                            <option>各种证</option>
                            <option selected="selected">身份证</option>
                            <option>学生证</option>
                        </select>
                        <span style="color: red;">*</span>
                        </td>
                <td>出生日期：</td>
                    <td>
                        <input type="text" name="birthday" id="birthday" value="" style="width: 200px;"/>
                        <span style="color: red;">*</span>
                        <span style="color: gray;">（格式为2010-02-05）</span>
                    </td>
                </tr>
                <tr>
                    <td>证件号码：</td>
                    <td>
                        <input type="text" name="idnumber" id="idnumber" value="" style="width: 200px;"/>
                    </td>
                    <td>国家：</td>
                    <td>
                        <input type="text" name="country" id="country" value="" style="width: 200px;"/>
                        </td>
                </tr>
                <tr>
                    <td>联系号码：</td>
                    <td>
                        <input type="text" name="phone2" id="phone2" value="" style="width: 200px;"/>
                    </td>
                    <td>城市：</td>
                    <td>
                        <input type="text" name="city" value="" style="width: 200px;"/>
                    </td>
                </tr>
                <tr>
                    <td>手机号码：</td>
                    <td>
                        <input type="text" name="phone" value="" style="width: 200px;"/>
                        <span style="color: gray;">（建议填写，以便进行短信通知）</span>
                    </td>
                    
                </tr>
                <tr>
                    <td>E-mail：</td>
                    <td>
                        <input type="text" name="email" value="" style="width: 200px;"/>
                        <span style="color: red;">*</span>
                    </td>
                    <td>邮编：</td>
                    <td>
                        <input type="text" name="post" value="" style="width: 200px;"/>
                    </td>
                </tr>
                <tr>
                    <td>联系地址：</td>
                    <td colspan="3">
                        <input type="text" name="address" value=""  style="width:738px ;"/>
                        <span style="color: red;">*</span>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td align="center">
                        <img src="img/reset.png" type="reset" value=""  style="width: 49px;height: 24px;"/>
                        <input type="submit" value="注册"/>
                    </td>
                </tr>
            </table>
            <div >
            <img  src="img/sl.png" style="width: 22px;height: 22px;"/>广告|
            <a href="http://baidu.com">伙伴与sjaijiejfaijjafssfsaf</a>
        </div>
        </form>
        
        
    </body>
</html>