零基础学习HTML5

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中设置字符集编码:

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>描述1dd>
         <dd>描述2dd>
dl>

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

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

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

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

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

<div style="width: 100px;height: 80px;background-color: aquamarine;">这是一个divdiv>
实际开发中常用的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.设置锚点:

               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:[email protected]">发邮件a>

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

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

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

13、bdo:表示文本方向

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

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

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

16、©;版权符号。 空格

17、u:下划线

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

19、time:表示时间。


 

表格

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

表格 table

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

表头:默认加粗,单元格居中

  【常用属性】

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>表头1th>
            <th>表头2th>
            <th>表头3th>
         tr>
         <tr>
            <td align="right" width="10">1-111111111111111111111111111111111111111111111111td>
            <td height="10" valign="center" nowrap="nowrap">1-22222222222222222222222222222222222td>
            <td>1-3td>
         tr>
         <tr>
            <td>2-1td>
            <td>2-2td>
            <td>2-3td>
         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的属性值
例如:男 提交时 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】
①写法:
②name属性,应该写在select上,所有选项只有一个name
③multiple="multiple":设置select控件为多选,可在界面使用Ctrl 鼠标单击进行单项
④option常用属性:
value="":当option没有value属性时,往后台传送的时标签中的文字;
当option有value属性时,往后台传递的时value的值
title="":鼠标指上后显示的文字
selected="selected":默认选中
:用于将option标签进行分组,label属性表示分组名
6、【文本域 textarea】
①写法:
②设置宽高style="width= ;height=;"自身有cols=""rows=""两个属性,但不常用
③readonly="readonly"设置为只读模式,不允许编辑
④style="resize:none"设置为宽高不允许修改
⑤style="overflow:;"设置当文字超出区域时,如何处理。
也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式
常用属性值:hidden超出区域的文字,隐藏无法显示
scroll 无论文字多少,均会显示滚动
auto 自动,根据文字多少自动决定是否显示滚动条(默认样式)
7、【表单的边框与标题】

//表单边框
联系方式表单标题

如果想要让标题嵌入到边框中,需将标题标签写到边框标签里面
一个表单,可以有多组边框 标题的组合
8、【html5 智能表单】
①、H5新增input的form属性,用于指向特定form表单的id,
实现input无需放在form标签之中,即可通过表单进行提交。



②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">伙伴与sjaijiejfaijjafssfsafa>
        div>
        form>
        
        
    body>
html>
View Code

这是一个填写注册信息的表单,几乎涵括了上述标签及属性,供参考。

你可能感兴趣的:(前端,HTML5,基础)