一、HTML5的概念
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
二、HTML5文档的结构
HTML文档主要包括三大部分:文档声明部分、<head>头部部分、<body>主体部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> </body> </html>
<!DOCTYPE html>
<!--
文档类型声明:让浏览器,按照html5的标准对代码进行解释和执行。
文档类型声明必不可少,而且,必须放在文档最上方。
如果不写文档类型声明,浏览器会默认按照兼容模式运行,可能会出现不明BUG。
-->
三、HTML5的基本标签
1、《head部分》:head中,主要放一些关于网页设置的相关语句。
1.1、meta标签
meta标签描述文档类型和编码、可以描述网页的关键字keywords和描述description。
meta标签常用属性:
1.1.1charset:设置文档的字符集编码格式
比如说Html5中设置字符集编码 <meta charset="UTF-8">
>>>常见的几种字符集编码格式:
a.UTF-8 :万国码,又称 Unicode8(此外还有Unicode16)。常用!
b.GB-2312 :国标码。
c.GBK :扩展的国标码。
1.1.2 http-equiv:将信息写给浏览器看,让浏览器按照这里面的要求执行,需要配合content属性使用。
(http-equiv属性只是表明需要设置那一部分,具体的设置内容,放到content属性中)。
可选属性值: Content-Type(文档类型) refresh(自动刷新)set-Cookie(设置浏览器cookie缓存) 。
1.1.3 name:使用方法同"http-equiv"将我们的信息写给搜索引擎看的。
常用且需要掌握的属性值:author(作者)keywords(关键字)description(网页描述)。
1.2、title标签
title:网页的标题,即网页的选项卡上的文字
1.3、link标签
link:链接网页与其他文件。
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="http://www.xxxxx.com"/> <meta name="keywords" content="HTML5,网页,web前端开发"/> <meta name="description" content="这是我的第一个网页"/> <title>我的第一个网页</title> <link rel="icon" href="ivicon.png"> </head> <body> </body> </html>
其中,
1.name="keywords" 表示当前语句用于设置网页关键字 content="表示网页的关键字内容。多个关键字之间用英文逗号分隔";
2.name="description" 设置网页描述: content="网页的描述,在搜索引擎中搜索网站时,标题下面的一段文字,就是网页的描述内容";
3.<link rel="icon" href="img/HBuilder.png" /> ①链接网页小图标:选项卡上的小图片;②rel属性:选择icon,表示链接的文件,将作为网页的icon图标。③href属性:选择图片所在的路径地址。
2、<body>主体部分:body中的内容,会显示在浏览器的展示区域。
2.1、标签分类
1、从功能上,HTML标签,分为“块级标签”和“行级标签”。
【块级标签和行级标签的区别】
① 块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右依次显示;
② 块级标签的宽度默认是100%;行级标签的宽度由文字内容撑开;
③ 块级标签可以设置宽度、高度、边距等属性;行级标签不能设置上述属性;
2、从写法上,HTML标签分为“成对标签”和“自闭合标签(空标签)”
① 成对标签: 成对出现,有开始标签,必须有结束标签,内容包裹在两个标签之间。 例如: <h1></h1> <p></p> <title></title>
② 自闭合标签/空标签: 只有一个标签,用/表示标签的自动闭合(/可以省略)。例如: <hr/> <link /> <meta />
2.2常用的块级标签
a. h标签:标题标签,默认加粗,h1最大,h6最小。
b. hr标签: 水平线标签。
c. p标签: 段落标签,表示网页中的一段文字。
d. br标签: 换行符号,在代码中敲回车,在网页中并没有作用。必须使用<br>断行
e. blockquote:引用标签。表示标签中的文字是引用自其他网站的内容。 浏览器默认显示效果:整段向后缩进;cite属性:表示引用内容的来源,常写引用的网址URL
f. pre标签:预格式标签。 与p标签不同的是,pre标签会保留代码中的空格和回车,在网页直接显示。
最常用的作用,是在网页中显示代码段,保留代码段格式。
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的块级标签</title> </head> <body> <h1>h1标题标签</h1> <h2>h2标题标签</h2> <h3>h3标题标签</h3> <h4>h4标题标签</h4> <h5>h5标题标签</h5> <h6>h6标题标签</h6> <hr/> <p>这是段落标签,=w= <br />这里是一段文字</p> <blockquote cite="此处一般为网址"> 物竞天择,适者生存 </blockquote> <pre>哈哈哈哈 哈哈哈哈</pre> </body> </html>
2.3基于布局的块级标签
列表:无序列表、有序列表、定义列表(图文结合)。
a.有序列表
<ol> (order list缩写)
<li>...</li> 列表项可以有n多个
<li>...</li>
<li>...</li>
</ol>
b.无序列表
<ul> (unorder list)
<li>...</li> n多个
<li>...</li>
<li>...</li>
</ul>
c.定义描述列表
<dl>
<dt>一般只有一项</dt> (列表标题)(标题顶格显示)
<dd>可以有很多项</dd> (列表描述项)(描述项相对标题缩进显示)
<dd>。。。。。</dd>
<dd>。。。。。</dd>
</dl>
d.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。
<figure>
<img/> 图片
<figcaption></figcaption> 图片的标题。
</figure>
e.分区标签
<div></div> 可以包裹任何标签,也可以被包裹进任何标签。
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于布局的块级标签</title> </head> <body> <ol> <li>这是第一项</li> <li>这是第二项</li> <li>这是第三项</li> </ol> <ul> <li>无序1</li> <li>无序2</li> <li>无序3</li> </ul> <dl> <dt>这是定义列表的标题</dt> <dd>这是描述项1</dd> <dd>这是描述项2</dd> <dd>这是描述项3</dd> </dl> <!--嵌套时,HTML标签一定不能交叉!!--> <figure> <img src="../img/ivicon.png"/> <figcaption>这是图片标题</figcaption> </figure> <div style="width:100px ;height: 20px;background-color: blue;">这是一个div </div> </body> </html>
2.4、分级标签
行级标签主要有:<span>
<em><i>
<strong><b>
<q>
<small><big>
<img>
<a>
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的行级标签</title> </head> <body> <a name="top"></a> <!--span(文本)--> <span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字(作用:无实际意义,对于某些<span style="color: blueviolet;">特别的文字</span>进行样式修改时用此标签包裹)</span> <br /> <!--em(强调)--> 这是一句话,<em>重点</em>在这里 <!--两者都是斜体,但前者拥有更着重的语气,而后者不具备这一点--> <br /> <!--i(倾斜)--> 这是一句话,<i>重点</i>在这里 <br /> <!--strong(强调)--> 这是一句话,<strong>重点</strong>在这里 <!--两者的区别同上--> <br /> <!--b(加粗)--> 这是一句话,<b>重点</b>在这里 <!--[注意] 1.强调程度来说: strong>em; 2.HTML5语言,要求标签尽可能的 实现语义化。(strong与em所包含的b与i不具备的强调含义) --> <br /> <!--q(短引用)显示为文字用引号包括--> <q cite="">知识短引用中的文字</q> <br/> <!--small(缩小字体)big(放大字体) 【两者可以多重嵌套,但不常用】--> <small>这个<small>比上面的<small>小</small></small></small> <br/> <big>这个<big>比上面的<big>大</big></big></big> <br /> <!--img(图片) 1.src: 表示引用图片的地址 路径地址的写法:a.★相对路径:以当前文件为准去寻找图片地址。 与当前文件处于同一层的图片直接写图片及其后缀名; 图片在当前文件下一层:文件夹名/图片名 图片在当前文件上一层:../图片名 b.绝对路径:严禁使用!!例如file:///D:/111.gif c.网络地址:网络上的图片链接。但是,一般不使用。 2.height width : 图片的高度和宽度,可以用css样式(style="height: ;width: ;")所代替 3.title :图片的标题,当鼠标之上后显示的文字。 4.alt:当图片无法加载的时候显示的文字。 *5.Align:图片两边文字所对应图片的位置。(top center bottom) --> <img src="此处为网络地址"/> <!--以上为网络地址写法--> <img src="此处为路径"/> <!--以上为绝对路径写法--> <img src="../img/ivicon.png"/> <img src="ivicon.png" /> <img src="练习用图/ivicon.png" /> <!--以上为相对路径写法--> <a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="这里没显示"/></a> <br /> <img src="QQ图片20170223092045.jpg"/ align="center">12333333333 <br /> <!--a(超链接) 1.href:超链接的路径(网络连接或者本地文件),路径确定同img。 2.target:blank 新页面打开 self 自身跳转 3.title:同上 4.rel(了解):指定当前文档与被连接文档的关系 prev(前一篇) next(后一篇) ★icon (被链接图片是当前文档的图标) ★stylesheet(被链接文档是当前文档的样式表) prefetch(预加载,当你在当前文档加载完成,利用空余时间,预加载即将链接文档) 5.锚链接: a.本页面锚链接 s1.设置锚点<a name="name"></a> s2.在超链接上使用 #name 跳转到对应锚点 b.页面间锚链接 在即将跳转的页面某位置设定锚点<a name="name"></a> 在超链接的href属性中使用"页面地址.html#name" 6.功能性链接: mailto:邮箱地址 用于给指定邮箱发送文件 tencen://message/?uin=qq号码 给指定qq发送消息 --> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="#weixin" target="_self">这是一个超链接,去看微信的</a> <a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一,自身跳转的</a> <a href="mailto:xxxxxxx@qq.com">这里发邮件</a> <a href="tencen://message/?uin=xxxxxxx">这里发信息</a> <a href="ivicon.png" target="_blank">picture</a> </body> </html>
2.5 表格
2.5.1 表格的结构
表格元素:行 列 格
表格 <table></table>
表格的行 <tr></tr>
每行中的列 <td></td>
表格的表头 <th></th>( 默认加粗,单元格居中。)
2.5.2 table的常见属性
1.border 边框,其增大时,只增加外围框线,单元格边框始终为1像素
2.cellspacing 单元格之间的间隙距离,当=0的时候,只会是单元格的
间隙等于0,但不会合并边框线,此时表格中线为两个像
素,若想使其合并,则★使用 style="border-collapse:collapse"★
3.cellpadding 单元格里边的文字与边框线的距离(不常用)
4.width height 宽度和高度
5.align 表格的对齐方式
【left right center】
【注意事项:相当于让表格浮动,会影响其后的元素的原有排列方式】
6.bgcolor 单元格的背景色,等同于style="background-color:;"
7.background 单元格的背景图片,等同于style="background-image:;"
且背景图会覆盖背景色
8.bordercolor 边框的颜色
2.5.3 tr td(th)相关属性
1.width height 单元格的宽度和高度
2.bgcolor 单元格的背景颜色
3.align (left right center)单元格中的文字水平对齐方式(text-align 文本居中)
4.valign (top center bottom)单元格中的文字垂直对齐方式
5.nowrap 单元格中文字不换行
【注意】当表格属性与行列属性相冲突时,以行列属性为准
(近者优先!!!)
table中的align控制表格在整个浏览器中的显示位置!
单元格中的align控制其中文字在单元格中的对齐方式!
表格的align属性并不影响单元格内文字的水平对齐方式!
tr的align属性可以控制一行中所有单元格的水平对齐方式!
2.5.4 表格的跨行和跨列
跨行:colspan="n列" N行对应删除右边N-1行。
跨列:rowspan="n行" N列对应删除右边N-1列。
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red"> <caption>我是表格的标题</caption> <tr> <th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1</th> <th colspan="3">表头2</th> </tr> <tr> <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> </table> </body> </html>
2.6. 表单
2.7.1 表单 form
一般情况下与table一起使用,但两者互不影响;
2.7.2 form表单有两个重要的属性:
action:表示,将表单提交给哪个服务器地址;
method:表单提交数据的方式,可选值有 get 和 post 两种。
[get和post区别]
① get使用URL传递数据。所有内容在地址栏可见,不安全;
post的数据无法在地址栏看到,比较安全。
② get传递的数据量有限,而且只能传递纯文字内容;
post可以传递大量数据,并且可以传递图片、视频等文件。
③ get的传输速度要比post快。
[get传递数据的URL格式]
http://原来的地址.html?name1=value1&name2=value2
比如:http://127.0.0.1:8020/0595.html?username=123
所以,input使用时,name属性必不可少。缺少name,将导致该输入框的数据不向后台传递。
2.7.3 input的常用属性:
① type :表示当前输入框是何种类型的输入框;
② name : 给输入框起别名。向后台传递时,使用name=value的形式传递
③ value: 当前input的默认值;
④ placeholder: 输入框的提示内容。当输入框有value时,提示内容消息。
⑤ hidden: 隐藏当前输入框。 可以写为hidden="hidden",也可以省略属性值,只写<input type="text" hidden />
隐藏的输入框内容,依然可以向后台传递数据
2.7.4 input的type类型:
① text: 普通的文本框;
② password: 密码框。 输入的内容 ,显示为小黑点。
③ radio: 单选按钮。 单选按钮的value不能省略,这个value需要传到后台;
单选按钮,凭借name是否相同,区分按钮是否为同一组。 同一组按钮只能选中一个,name必须相同。
checked="checked" 设置单选按钮,默认被选中。
④ checkbox: 多选按钮。 其他与单选按钮相同。
⑤ file: 文件上传框。
accept属性,可以限制只能上传何种类型的文件。 "*"表示可以接受所有文件,"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
⑥ submit: 表单提交按钮。
⑦ reset : 表单重置按钮。点击将表单恢复为初始状态。
⑧ image : 图形提交按钮。src属性导入图片,与submit都具有提交表单的作用。
⑨ button: 显示为按钮形状,但是没有任何作用。
⑩ hidden: 隐藏的输入框。与普通输入框+hidden="hidden"的作用相同。
⑥ disabled: 禁用当前输入框。 可以显示,不能使用。
被禁用的输入框内容,将不能向后台传递数据。
⑦ checked="checked" 设置单选按钮/多选按钮,默认选中
2.7.5、 select 下拉选择区块
① select里面的每一项,用<option></option>标签表示;
② name属性,需要写到select标签上;
③ option标签如果有value属性,则向后台传递的将是value属性的值,如果没有value属性,则传递的是<option></option>标签之间的文字。
④ option添加属性selected="selected", 设置默认选中项。
⑤ select添加属性multiple="multiple", 设置当前下拉控件可以多选
⑥ option添加属性title,表示鼠标指上后显示的文字。
⑦ select可以使用<optgroup></optgroup> 标签对选项进行分组,用label属性显示分组名。
<select >
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
</optgroup>
<optgroup label="内地">
<option>济南</option>
<option>临沂</option>
</optgroup>
</select>
2.7.65、 textarea 文本域
① 文本域大小控制:
可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)
可以使用CSS样式style="width:100px; height:100px;"
② 设置文本域大小不能拖动:
style="resize: none;"
③ 设置文本域为只读模式,不能修改:
<textarea readonly="readonly"></textarea>
④ 文字超出区域处理:
使用style="overflow: xx;"可以设置文字超出区域的显示的方式:
>>> overflow: hidden; 超出区域的文字隐藏不显示;
>>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
>>> overflow: auto; 自动,默认效果。文字多显示滚动条,文字少,不显示滚动条。
>>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-y: scroll; overflow-x: hidden;
2.7.7、
【HTML5 智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id,然后给表单外面的input添加form属性,指向这个id,就可以实现表单与input的绑定;
<form id="ff"></form>
<input form="ff"/>
2、 H5给我们新增了许多input的新的type类型。
range color date email url
3、H5新增的input属性:
① form属性: 关联指定表单的id。
② Placeholder: 输入框的提示内容
③ required="required" 必填
④ autofocus="autofocus" 指定输入框,自动获得焦点
⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态,设置为off表示关闭,设置为on表示打开。
可以给form标签设置autocomplete,控制表单所有输入框的自动提示功能。
举个例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>用户注册</h1> <form action="" method="get" id="form1"> <table> <tr> <td>用户名</td> <td> <input type="text" name="username" value="jianghao" disabled/> <input type="text" name="username" value="jianghao" hidden/> <input type="hidden" name="username" value="jianghao" /> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" placeholder="请输入密码"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女" />女 <input type="radio" name="sex" value="不明" checked="checked" />不明 </td> </tr> <tr> <td>兴趣</td> <td> <input type="checkbox" name="hobby" value="吃"/>吃 <input type="checkbox" name="hobby" value="喝" />喝 <input type="checkbox" name="hobby" value="玩" checked="checked" />玩 <input type="checkbox" name="hobby" value="乐" checked="checked" />乐 </td> </tr> <tr> <td>身份证</td> <td> <input type="file" name="card" accept="image/*" multiple="multiple" /> </td> </tr> <tr> <td>城市</td> <td> <select name="city" > <optgroup label="沿海城市"> <option value="123">青岛</option> <option selected="selected">烟台</option> </optgroup> <optgroup label="内地城市"> <option title="济南">济南</option> <option>临沂</option> </optgroup> </select> </td> </tr> <tr> <td>阅读服务协议:</td> </tr> <tr> <td colspan="2"> <textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll; overflow-x: hidden;" readonly="readonly">这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。 </textarea> </td> </tr> <tr> <td> <input type="submit" value="注册" /> </td> <td> <input type="reset" value="重置" /> </td> </tr> <tr> <td> <input type="image" src="img/icon.png" /> </td> <td> <input type="button" value="一个并没有什么卵用的按钮" /> </td> </tr> </table> </form> <input type="text" name="test" form="form1" required="required" autofocus="autofocus" autocomplete="off" /> <div style="height:400px; background-color: #ff8040;"></div> </body> </html>
四、博主寄语
---书山有路勤为径,学海无涯苦作舟!---
这是博主第一次发表博客,紧张之余,也为自己能够独立完成一片关于HTML5的知识博客感到开心,文章错误之处,还请多多见谅,感谢您能够对博主提出宝贵意见,不胜感谢。最后,祝大家都能够找到对自己有帮助的文章,也祝大家每天都能提高自己,早日实现自己的梦想。