Blogger Information
Blog 20
fans 1
comment 0
visits 15791
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端基础,HTML5常用标签学习总结
xiablog
Original
696 people have browsed it

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>
body标签

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>
属性
描述
autoplayautoplay自动播放
controlscontrols显示播放控件
looploop循环播放
mutedmuted静音
preloadauto音频加载方式
metadata
none
srcurl(链接地址)音频文件地址
<video width="320" height="240" controls>
    <source src="php.mp4" type="video/mp4">
    <source src="php.ogg" type="video/ogg">
</video>
属性描述
autoplayautoplay自动播放
controlscontrols显示播放控件
heightpixels视频容器高度
widthwidth视频容器宽度
looploop循环播放
mutedmuted静音
poster
url视频下载是显示图像,直到点击播放
srcurl视频地址
preloadauto视频加载方式,如使用 "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>标签,切忌不可标签之间胡乱套用。

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post