HTML5

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>

这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dczjzz/article/details/46788501
文章标签: HTML5
个人分类: html5
想对作者说点什么? 我来说一句

html5 教程 html5 教程

2011年08月09日 334KB 下载

HTML5入门HTML5入门

2011年08月05日 843KB 下载

HTML5 俄罗斯方块

2011年10月23日 170KB 下载

HTML5游戏开发

2011年09月28日 2.91MB 下载

html5教程和手册

2011年10月11日 473KB 下载

HTML5 入门

2013年01月07日 1.39MB 下载

html5中文参考手册

2011年04月07日 188KB 下载

HTML5入门教程

2013年08月30日 1.17MB 下载

html5游戏,跨平台

2011年08月11日 22KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭