web学习（一）html标签

来源：互联网发布：戴尔色彩软件编辑：程序博客网时间：2024/06/05 02:41

<!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 homeUser <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>  ![这里写图片描述](http://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>

0 0