HTML5

原创 2015年07月07日 13:50:16

1.html5基本的模板:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

2.常用元素(包括锚点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本结构</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
b元素:<b>html5</b><br>
strong<strong>html5</strong><br>
wbr元素:abs<wbr>fabafjfjs<wbr>ifkjfsjflkjlksjoijojoijrqjosjfj<wbr>isofjiwqjfsjfoi<br>
i元素<i>html5</i><br>
em元素:这是<em>html5</em><br>
del元素:这是<del>html5</del><br>
u元素:这是<u>html5</u><br>
ins元素:这是<ins>html5</ins><br>
small元素:这是<small>html5</small><br>
sub元素:这是<sub>html5</sub><br>
sup元素:这是<sup>html5</sup><br>
<!-- 以下在英文下有效果  <html lang="en">-->
code元素:这是<code>html5</code><br>
var元素:这是<var>html5</var><br>
samp元素:这是<samp>html5</samp><br>
kbd元素:这是<kbd>html5</kbd><br>
abbr元素:这是<abbr>html5</abbr><br>
dfn元素:这是<dfn>html5</dfn><br>
q元素:这是<q>html5</q><br>
cite元素:这是<cite>html5</cite><br>
ruby元素:这是<ruby style="font-size:100px">饕(taotie)餮</ruby><br><br>
bdo元素:这是<bdo dir="rtl">HTML5</bdo><br>
mark元素:这是<mark>HTML5</mark><br>
time元素:这是<time>2015-10-11</time><br>
span元素:这是<span>html5</span><br>

<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>

<a name="1"></a><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><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><br><br><br><br><br><br><br><br><br><br>


<a name="2"></a><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><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><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 name="3"></a><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><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><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

显示效果:
这里写图片描述
这里写图片描述

3.分组元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>这是一个段落</p>
<p>这是另一个段落</p>

<div>这是一个公益分组</div>
<div>这是另一个公益分组</div>

<blockquote>这是一个大段的来自他出的内容</blockquote>
<blockquote>这是另一个大段的来自他出的内容</blockquote>

<pre>
        #######
        ########
###                 #######
        ########
        ########
</pre>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ol start="2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

<ol reversed="reversed">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

<ol type="a">
    <li>1</li>
    <li>2</li>
    <li value="5">3</li>
    <li>4</li>
</ol>

<dl>
    <dt>这是一份文件</dt>
    <dd>这里是这份文件的详细内容1</dd>
    <dd>这里是这份文件的详细内容2</dd>

    <dt>这是2份文件</dt>
    <dd>这里是这2份文件的详细内容1</dd>
    <dd>这里是这2份文件的详细内容2</dd>
</dl>
<figure>
    <figcaption>这是一张图片</figcaption>
    <img alt="" src="img.jpg">
</figure>
</body>
</html>

显示效果:
这里写图片描述
这里写图片描述
这里写图片描述

4.表格的使用

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>
<br>
<table border="1" style="width: 300px">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
</table>
<br>
<table border="1" style="width: 300px">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计:共3人</td>
    </tr>
</table>
<br>
<table border="1" style="width: 300px">
    <tr>
        <th rowspan="4">基本情况</th>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计:共3人</td>
    </tr>
</table>
<br>

<table border="1" style="width: 300px">
    <caption>这是一个表格</caption>
    <tfoot>
        <tr>
            <td colspan="3">统计:共3人</td>
        </tr>
    </tfoot>

    <tbody>
        <tr style="background: red;">
            <td>张三</td>
            <td></td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>已婚</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
    </thead>
</table>
<br>

<table border="1" style="width: 300px">
    <colgroup style="background: white;" span="1"></colgroup>
    <colgroup style="background: red;" span="1"></colgroup>

    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计:共3人</td>
    </tr>
</table>
<br>
<table border="1" style="width: 300px">
    <colgroup>
        <col>
        <col style="background: red">
    </colgroup>

    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>张三</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td></td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">统计:共3人</td>
    </tr>
</table>
</body>
</html>

显示效果:
这里写图片描述
这里写图片描述

5.下拉列表和文本域

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://la.cc">
    <select name="fruit" size="10" multiple="multiple">
        <option value="1">矿泉水</option>
        <option value="2">维他命水</option>
        <option value="3">雪碧</option>
        <option value="4">农夫山泉</option>
    </select>
    <button>提交</button>
</form>

<form action="http://la.cc">
    <select name="fruit" size="10" multiple="multiple">
        <optgroup >
            <option value="1">矿泉水</option>
            <option value="2">维他命水</option>
            <option value="3">雪碧</option>
            <option value="4">农夫山泉</option>
        </optgroup>

        <optgroup >
            <option value="5">小米</option>
            <option value="6">大米</option>
            <option value="7">玉米</option>
        </optgroup>
    </select>
    <button>提交</button>
</form>

<form action="http://la.cc">
    <select name="fruit" size="10" multiple="multiple">
        <optgroup label="饮用水">
            <option value="1">矿泉水</option>
            <option value="2">维他命水</option>
            <option value="3">雪碧</option>
            <option value="4">农夫山泉</option>
        </optgroup>

        <optgroup label="粮食">
            <option value="5" selected="selected">小米</option>
            <option value="6">大米</option>
            <option value="7">玉米</option>
        </optgroup>
    </select>
    <button>提交</button>
</form>

<form action="">
    <textarea name="content">请留下您的建议!</textarea>
    <br>
    <textarea name="content" cols="30" rows="10">请留下您的建议!</textarea>
    <!-- 在谷歌浏览器能看到换行的效果,url地址栏 -->
    <textarea name="content" cols="30" rows="10" wrap="hard">在谷歌浏览器能看到换行的效果,url地址栏!</textarea>

</form>

<form action="http://ll.cc" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
    <input type="number" id="num1"> x <input type="number" id="num2">=
    <output for="num1 num2" name="res" ></output> 
    <button>提交</button>
</form>

<form action="http://ll.cc" novalidate="novalidate">
    <!-- 表单不需要验证 -->
    <!-- <input type="text" id="num1" required="required"> -->
    <input type="number" min="10" max="100" required="required">
    <input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">
    <button>提交</button>
</form>
</body>
</html>

显示效果:
这里写图片描述
这里写图片描述

6.常用属性

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- <meta charset="UTF-8"> -->
<meta name="author" content="jzz">
<meta name="keywords" content="html5,css3">
<meta http-equiv="content-type" content="text/html charset=utf-8">
<meta http-equiv="refresh" content="3">
<!-- <meta http-equiv="refresh" content="3;http://www.baidu.com"> -->
<title>Insert title here</title>
</head>
<body>
这是一段中文
<br>
快捷键alt+n
<input type="text" accesskey="n" name="user"><br>
<p contenteditable="true">我可以修改吗</p><br>
<p dir="rtl">文字方向</p><br>
<p dir="rtl" hidden="true">文字隐藏</p><br>
<p dir="rtl" lang="en">html5</p><br>
<p lang="en" title="这是html5">html5</p><br>

<input type="text" name="user1" tabindex="2">
<input type="text" name="user2" tabindex="1">
<input type="text" name="user2" tabindex="-1"><!-- -1不会被选中 -->
<p style="color:red">css样式</p>
</body>
</html>

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5+CSS3+jquery应用之美

  • 2017年11月15日 10:35
  • 72.94MB
  • 下载

html5散花动态背景

  • 2017年11月14日 20:47
  • 11KB
  • 下载

AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言      这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理...

基于mui的和html5电子签名

  • 2017年11月09日 10:27
  • 198KB
  • 下载

html5 - 超链接基础和锚点

超连接就是打开另外一个页面,可以是本地的,也可以是网页,也可以通过图片来打开。 一:基础超链接 超连接 超连接网址 链接到本地 发邮件 下载,...

HTML5新控件 - 日期和时间选择输入

HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。 注意:目前只有Chrome和Opera提供下拉式日历支持,其它浏览器仍是一个普通文本框。1,日期...

HTML5 video how to

  • 2017年11月07日 16:35
  • 2.52MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5
举报原因:
原因补充:

(最多只允许输入30个字)