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、©;版权符号。 空格
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时,取消提示
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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>
这是一个填写注册信息的表单,几乎涵括了上述标签及属性,供参考。