您的位置：首页 > Web前端 > HTML

web学习（一）html标签

2016-03-08 18:00 399 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="load()">
<button id="target" onclick="test()">test</button>
</body>
<script>
function load(){
//下面两种方法效果是一样的
document.getElementById("target").onclick();
document.getElementById("target").click();
}

function test(){
alert("test");
}
</script>
</html>


1.超级链接

<a>超级链接


<a>标签 <a href="http://www.w3school.com.cn">W3School</a> 指向指向 w3school 的超链接：


2.标记缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.


3.标记缩写

<acronym title="World Wide Web">WWW</acronym>


4.
<br>
换行

<br>
可插入一个简单的换行符。

<br>
标签是空标签（意味着它没有结束标签，因此这是错误的：
<br></br>
）。在 XHTML 中，把结束标签放在开始标签中，也就是 
<br />
。

请注意，
<br>
标签只是简单地开始新的一行，而当浏览器遇到 
<p>
标签时，通常会在相邻的段落之间插入一些垂直的间距。

5.普通文本 粗体文本

<p>这是普通文本 - <b>这是粗体文本</b>。</p>


6.
<base>


<base>
是基于的意思，比如
<base href="http://www.lanrentuku.com">
那么就是说，网页中所有的路径都相对 http://www.lanrentuku.com的根目录的，一个单独的网页中就可以写
<img src="images/xx.jpg">
，这样图片也能显示，但是你跟本找不到图片夹，因为都在http://www.lanrentuku.com下

7.
<bdi>


User <bdi dir="rtl">my home </bdi> 60    60 my home
User <bdi dir="ltr">my home </bdi> 60    my home 60


8.
<bdo>


<bdo dir="rtl">Here is some text</bdo>  bdo 元素可覆盖默认的文本方向。


9.标记长的引用：
<blockquote>


<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

Here comes a long quotation:
This is a long quotation. This is a long quotation. This is a long          quotation. This is a long quotation. This is a long quotation.
请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。


10.
<br> 可插入一个简单的换行符。


11.
<button>


<button type="button">Click Me!</button>


请在 HTML 表单中使用 input 元素来创建按钮。

12.
<canvas>


如何通过 canvas 元素来显示一个红色的矩形：

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>


13.
<caption>


<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>这里写代码片




14.
<datalist>
下拉列表

<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>


15.
<dd>


<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>


计算机

用来计算的仪器 … …

显示器

以视觉方式显示信息的装置 … …

16.
<del>
中间横线 表划掉重写

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>


17.
<details><summary>


<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>


18.
<dialog>


<!DOCTYPE html>
<html>
<body>

<p><b>注释：</b>只有 Chrome 和 Safari 6 和支持 dialog 标签。</p>

<table border="1">
<tr>
<th>一月 <dialog open>这是打开的对话窗口</dialog></th>
<th>二月</th>
<th>三月</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

</body>
</html>




19.
<dir>


<dir>
<li>html</li>
<li>xhtml</li>  ![这里写图片描述](https://img-blog.csdn.net/20160308172604891)
<li>css</li>
</dir>




20.
<form>


标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>


21.
<frameset>


<frameset cols="25%,50%,25%">

<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">

</frameset>


frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

22.
<hr />


一条横线

23.
<img>


<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />


<img>
标签有两个必需的属性：src 属性 和 alt 属性。

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本

24.
<input>


标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

25.
<label>


标签的 for 属性应当与相关元素的 id 属性相同。

26 
<fieldset>
组合表单中的相关元素：

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>


27.
<link/>


<link rel="icon" href="favicon.ico" type="image/x-icon" />


link 标签的内容结构解释

href 值为外部资源地址这里是收藏夹图标地址

rel 定义当前文档与被链接文档之间的关系,这里是外部icon图标属性

type 规定被链接文档的 MIME 类,这里是值为image/x-icon

28.
<nav>


<nav>
<a href="/html/index.asp">Home</a>
<a href="/html/html_intro.asp">Previous</a>
<a href="/html/html_elements.asp">Next</a>
</nav>


29.
<style>
样式

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>


a21b
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5
相关文章推荐
新的分享
章节导航