Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
HTML网页主体结构
<!DOCTYPE html> <!--声明头--> <html> <!--头标签--> <head> </head> <!--体标签--> <body> </body> </html>
head头部标签
<head lang="en"><!--定义网站语言--> <title></title><!--定义网站标题--> <meta charset="utf-8" /> <!--设置页面字符集--> <meta name="keywords" content="关键字1,关键字2"/> <!--设置网站关键字,多个关键字之间用英文状态下的逗号分割--> <meta name="description" content="描述的内容" /><!--设置网站的描述--> <link rel="icon" type="" href=""/><!--加载标题icon图标--> <link rel="stylesheet" type="text/css" href="" /><!--加载CSS样式--> <style></style> <!--加载CSS样式--> <script></script> <!--加载JS脚本--> <!--阻止移动浏览器自动调整页面大小--> <meta name="viewport" content="initial-scale=2.0,width=device-width" /> <!-- name = "viewport" 说明此meta标签定义视口的属性 initial-scale = 2.0 意思是将页面放大两倍 width = device-width 告诉浏览器页面的宽度的能与设备的宽度 --> <meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" /> <!--允许用户将页面最大放大至设备宽度3倍,最小压缩至设备宽度的一半--> <meta name="viewport" content="initial-scale=1.0,user-scalable=no" /> <!--禁止用户缩放,可以在混合APP时,为了使html页面更逼真,使页面无法缩放。user-scalable=no是禁止缩放--> </head>
1、常用文本标签
<p></p> <!--段落标签--> <b></b> <!--加粗--> <strong></strong> <!--强调某段文本--> <em></em> <!--强调某段文本--> <i></i> <!--斜体--> <br/> <!--换行--> <hr /> <!--水平线--> <u></u> <!--下划线标签--> <del></del> <!--删除线标签--> <hn></hn> <!--h族标题标签--> <bdo></bdo> <!--覆盖默认的文本方向--> <sub></sub> <!--下标文本--> <sup></sup> <!--上标文本--> <details></details> <!--交互式控件、可见的或者隐藏的补充细节--> <summary></summary> <!--为details定义标题--> <dialog></dialog> <!--定义对话框或窗口--> <pre></pre> <!--原格式输出--> <figure></figure> <!--用于对元素进行组合。多用于图片与图片描述组合--> <mark></mark> <!--标记文本--> <figure> <img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>figure的标题</figcaption> </figure> <mark></mark> 定义带有记号的文本,它会给你要突出显示的文本下加个背景色。 如:<p>你是<mark>大长腿</mark>吗?</p>
2、语义化标签:语义化标签对搜索引擎友好,有了良好的结构和语义,网页内容就容易被搜索引擎抓取。
<div></div><!-- 标签定义页面中的一个分隔区块或者一个区域部分,多用于网页布局--> <span></span> <header></header> <footer></footer> <!--header和footer不能嵌套使用--> <nav></nav> <address></address> <section></section> <article></article> <aside></aside>
3、超链接标签a
<a> 标签定义超链接,用于从一个页面链接到另一个页面。 <a> 元素最重要的属性是 href 属性,它指定链接的目标。 <a>标签可以通过css改变它的默认样式
4、多媒体标签
<img /><!--<img>标签定义HTML页面中的图像。<img> 标签有两个必要属性:src和alt-->
<audio controls> <source src="php.ogg" type="audio/ogg"> <source src="php.mp3" type="audio/mpeg"> </audio>
属性 | 值 | 描述 |
autoplay | autoplay | 自动播放 |
controls | controls | 显示播放控件 |
loop | loop | 循环播放 |
muted | muted | 静音 |
preload | auto | 音频加载方式 |
metadata | ||
none | ||
src | url(链接地址) | 音频文件地址 |
<video width="320" height="240" controls> <source src="php.mp4" type="video/mp4"> <source src="php.ogg" type="video/ogg"> </video>
属性 | 值 | 描述 |
autoplay | autoplay | 自动播放 |
controls | controls | 显示播放控件 |
height | pixels | 视频容器高度 |
width | width | 视频容器宽度 |
loop | loop | 循环播放 |
muted | muted | 静音 |
poster | url | 视频下载是显示图像,直到点击播放 |
src | url | 视频地址 |
preload | auto | 视频加载方式,如使用 "autoplay",则忽略该属性。 |
metadata | ||
none |
5.表单标签
<table></table> <caption></caption> <tr></tr> <th></th> <td></td> <thead></thead> <tbody></tbody> <tfoot></tfoot> <input type="text" name="" value="" /> 普通文本域 <input type="password" name="" value="" /> 密码域 <input type="radio" name="" value="" />单选 <input type="checked" name="" value="" /> 复选 <label></label>为input元素定义标注(绑定元素) <input type="file" name="" value="" />文件上传 <input type="submit" name="" value="" />提交按钮 <input type="image" src="" title="" alt="" />用图片代替提交按钮 <input type="reset" name="" value="" />重置按钮 <input type="hidden" name="" value="" />隐藏域 <input type="button" name="" value="" />按钮 <button></button> 提交按钮 <button type="submit"></button>提交按钮 <button type="button"></button>按钮
6、标题标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <!--其中h1标签只能出现一次-->
7、列表标签
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <!--ol跟ul都有默认样式,根据项目需求用css更改-->
8、标签分类:块级标签,行内标签,行内块标签
块级元素:独占一行,可设置宽高;如果不给宽度,块级元素就默认为浏览器的宽度,高为内容高度。
p、div、ul、ol、li、dl、dt、dd、h1~h6、form
行内元素:可以多个标签存在一行,对宽高属性值不生效,依靠内容撑开。
a、span、em、strong、b、i、u、label、br
行内块元素:结合的行内和块级的优点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;
img、input、textarea
注意:块标签可以套行标签,行标签不可以套块标签。
总结:HTML标签繁多,其中最重要的的有div、p、ul、ol等。在进行网页布局中,合理使用语义化标签,不仅代码整洁有理,还有利于搜索优化,如网页中段落就用<p>标签,标题就用<h1>~<h6>标签,导航用<nav>标签,切忌不可标签之间胡乱套用。