HTML5标签用法总结——基础篇（一）

时间：2022-02-22 09:45:31

HTML5标签用法总结——基础篇（一）

简介

HTML已经成为前端开发必须掌握的一门语言，内容虽然并不太难，但是比较繁琐，特在这里整理总结一下，日后方便查阅。

准备

1、软件 Sublime Text 3 （点击下载中文版）

2、前端插件（20 个强大的 Sublime Text 插件）

  • Emmet（强大的集HTML5+CSS3缩写的插件）
  • JsFormat（javascript格式化插件）
  • Sublime Alignment（文本对齐插件）
  • Bracket Highlighter（高亮插件）
  • Sublime CodeIntel（自动补全插件）
  • DocBlockr（快速注释）：/** +Tab
  • Colorpicker（取色器）：Ctrl + Shift + c

适合HTML5开发的浏览器

  • Chrome
  • Opera
  • Firefox
  • Microsoft Edge
  • iPhone Safari
  • UC
  • IE

正文

文档声明和编码

<!--用于声明改文件为HTML5文件-->
<!DOCTYPE html>

标签分类

  • 常用标签
    • title （页面名称）
    • h1，h2，h3，h4，h5，h6 （内容标题）
    • p （段落）
    • a （超链接）
    • img （图片）
    • br （换行）
    • hr （分割线）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<hr>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段</p>
<p>段落段落段落段落段落段 <br>落段落段落段落段落段落段落段落段落段落段落段落</p>
<a href="http://www.w3c.org">go www.w3c.org</a>

<img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" alt="W3C"/><a href="http://www.w3c.org">go www.w3c.org</a>
<p>w3c logo</p><a href="http://www.w3c.org">go www.w3c.org</a>
<figure>
<figcaption>w3c logo</figcaption>
<img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" alt="W3C">
<figcaption>w3c logo</figcaption>
</figure>
<style>
</body>
</html>
  • 集合类标签
    • table（表格），tr（行），td（列），th（表头），colspan（合并行单元格），rowspan（合并列单元格）
    • ul（无序列表）
    • ol（有序列表）
    • li（列表内一行数据）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<th rowspan="2">表头1</td>
<th colspan="2">表头2</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<ol>
<li>大菠萝</li>
<li>小菠萝</li>
</ol>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>

  • 容器标签

    • div
    • span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<span>span </span> <span>没有固定的格式表现</span>   。<span>当对它应用样式时</span> 
<span>它才会产生视觉上的</span>  ，变化。

</p>
</body>
</html>
  • 特定语义的标签
    • em（把文本定义为强调的内容）
    • strong（把文本定义为语气更强的强调的内容）
    • address
    • blockquote（标记长的引用）
    • q（标记短的引用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<em>把文本定义为强调的内容</em>
<strong>把文本定义为语气更强的强调的内容</strong>
<address>联系信息
    Written by <a href="mailto:shy_leoking@hotmail.com">leo</a>
</address>
<blockquote>标记长的引用</blockquote>
<q>标记短的引用</q>
</body>
</html>
  • 表单系标签
    • from（表单）
    • input（单行文本输入框）
    • textarea（多行文本输入框）
    • label（标签）
    • select（选择下拉框）
    • option（选项）
    • optgroup（选项分组）
    • fieldset（自定义字段，对表单中的相关元素进行分组）
    • legend（组合表单中的相关元素）
    • datalist（跟input联合使用，用于输入时自动模糊匹配）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
    User name:<br>
<input type="text" name="username">
<br>
     User password:<br>
<input type="password" name="psw">
     User info:<br>
<textarea rows="3" cols="20">
多行文本输入框多行文本输入框多行文本输入框多行文本输入框多行文本输入框多行文本输入框多行文本输入框多行文本输入框多行文本输入框多行文本输入框
</textarea>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
我喜欢自行车：
<input type="checkbox" name="Bike">
<!--通过name属性对radio进行分组，同一组的radio只能单选，不同组互不影响-->
<span>group1:</span> 
<input type="radio" id="radio1" name="group1" />radio1 
<input type="radio" id="radio2" name="group1" />radio2 
<br>
<span>group2:</span> 
<input type="radio" id="radio4" autofocus name="group2" checked="true" />radio4 
<input type="radio" id="radio5" name="group2" />radio5 
<!--自动模糊匹配-->
<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari"> 
<option value="顾芳">
</datalist> 

<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>

<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
<fieldset>
<legend>健康信息</legend>
          身高：<input type="text" />
          体重：<input type="text" />
</fieldset>
<!--选择文件-->
        Select images: <input type="file" />
</form>
</body>
</html>
  • 框架
    • frameset
    • frame
    • iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<frameset cols="25%,50%,25%">
<frame src="../from/demo1.html">
<frame src="../from/demo2.html">
<frame src="../from/demo3.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

<iframe src="" title="" style="height:100px;width:100px" />

</frameset>
</body>
</html>
  • HTML5文章结构新标签
    • header
    • nav
    • article
    • section
    • aside
    • footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。</p>
<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章内容详情</p>
<aside>
<h1>作者简介</h1>
<p>厚德IT</p>
</aside>
<footer>
       COPYRIGHT@厚德IT
</footer>
</article>
</body>
</html>
  • HTML Input新标签
    • email
    • url
    • number
    • range
    • Date
    • search
    • color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="f1">
        Month: <input type="month" placeholder=month/><br>
        Week: <input type="week" placeholder=week/><br>
        Time: <input type="time" placeholder=time/><br>
        Date and time: <input type="datetime" /><br>
        Date and time: <input type="datetime-local" required/><br>
        E-mail: <input type="email" /><br>
        zip code: <input type="text" name="country_code" pattern="[1-9]{1}[0-9]{5}" required placeholder="注意邮政编码的格式"><br>
        w3c Homepage: <input type="url" autocomplete readonly value="http://www.w3c.org" /><br>
        Homepage: <input type="url" autocomplete placeholder="要http://www.homepage.com的格式哦"/><br>
        Points: <input type="number" min="1" max="10" required placeholder=最小1最大10/><br>
        Points:<input type="number" min="0" max="10" step="3" value="6" required/><br>
        Color:<input type="color" /><br>
        Search:<input type="search" /><br>
        Range<input type="range" value="50" /><br>
<input type="text" list="mydata" placeholder="热门电影排行" /><br>
<datalist id="mydata">
<option label="Top1" value="让子弹飞"/>
<option label="Top2" value="非诚勿扰2"/>
<option label="Top3" value="大笑江湖"/>
<option label="Top4" value="赵氏孤儿"/>
<option label="Top5" value="初恋这件小事"/>
</datalist>
<br/>
<input type="submit" name="" value="sumit"/>
</form>


    Homepage: <input type="url" form="f1" /><br/>

</body>
</html>

  • HTML 多媒体新标签

    • video（视频）
    • audio（音频）
    • svg（动画）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--视频-->
<figure>
<figcaption>一部动画片</figcaption>
<video controls preload>
<source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type=""/>
<p> Your browser is old.</p>
</video>
<figcaption>一部动画片</figcaption>
</figure>
<p></p>
<p></p>
<!--音频-->
<script type="text/javascript">
function timeupdate(){
var e=window.event;
var t=e.target.currentTime;
var seconds=t%60;
var minutes=parseInt(t/60%60);
var hours=parseInt(t/3600%24);
 document.getElementsByTagName("p")[0].innerHTML=t;
 document.getElementsByTagName("p")[1].innerHTML=hours+":"+minutes+":"+seconds;
 }
function saveplaycurrenttime(){
var lastcurrenttime=document.getElementsByTagName("audio")[0].currentTime;
 localStorage.lastcurrenttime=lastcurrenttime;
 localStorage.currentSrc=document.getElementsByTagName("audio")[0].currentSrc;
 }
function onload(){
var currentSrc=document.getElementsByTagName("audio")[0].currentSrc;
var lastcurrenttime=localStorage.lastcurrenttime;
if (currentSrc==localStorage.currentSrc && lastcurrenttime) {
 document.getElementsByTagName("audio")[0].currentTime=lastcurrenttime;
 }
else{
 localStorage.lastcurrenttime=0;
 localStorage.currentSrc="";
 }
 }
</script>
</head>
<body onunload="saveplaycurrenttime()" onload="onload()">
<figure>
<figcaption>开学礼</figcaption>
<audio controls ontimeupdate="timeupdate()">
<source src="开学礼.m4a"/>
<b>  Your browser is old.</b>
</audio>
<figcaption>李克勤</figcaption>
</figure>
<p></p>
<p></p>
<!--svg-->
<svg style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>

<svg height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>

<svg height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>         
</svg>

<svg height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>

<svg height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>
标签：

相关文章