html 入门标签学习

目录

 

Html4

Html 5


Html4

1、物理字体

<b>…</b> 	设置标记间的文字为粗体       blod face
<i>…</i>	设置标记间的文字为斜体       italic
<u>…</u>	设置标记间的文字带下划线     under line
<sup>…</sup>	设置标记间的文字为上标       superscript
<sub>…</sub> 	设置标记间的文字为下标       subscript
<del>…</del>	设置标记间的文字带删除线     delete line

2、逻辑字体

<em>…</em>	一般强调(emphasis),斜体
<strong>…</strong>	特别强调,黑体
<address>…</address> 	表示地址
<q>…</q>	定义引用
<kbd>…</kbd> 	用户键入的文字,字体变细变轻
<cite>…</cite> 	一段引用的文字,斜体。用于书名、电影名
<small>…</small>	字体变小
<big>…</big>	字体变大
<dfn>…</dfn>	定义术语
<code>…</code>	源代码
<var>…</var> 	变量

3、hr 标签

<hr align="left" width="400" size="50" color="#ff0000">

4、center 标签

<center>…</center>

align="center"

5、无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

type    取值可以是disc、square、circle,分别表示用实心圆点、实心方点、空心圆作为列表符号。

6、有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

type    取值可以是1、a、A、i、I,分别代表编号使用阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。
start    指定序号的起始值,只能取数字。
reversed    反向编号列表

7、定义列表

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

8、a 标签

target    显示链接的窗口或框架,可取以下值:
_self    在本窗口或本框架中打开超链接
_parent  在上一级框架中打开超链接
_top     在整个浏览器窗口中打开超链接
target = "_blank" 在新窗口中打开超链接
download	filename	指定下载链接

9、body 标签

※ bgcolor	设置页面背景颜色。
background	设置页面的背景图片的URL。
bgproperties	取fixed 值时设置背景不随滚动条滚动,不设此属性时背景随滚动条滚动。
※ text	设置页面非超链接文字基本颜色。

10、img 标签

src	设置图像文件的URL。
alt	设置无法显示时的替代显示文本
height、width	设置图像高度、宽度
border	设置边框粗细,默认0
align	设置图像及图像周围内容的对齐方式
1、图像在页面中的对齐方式:left、right
2、图像和文字的对齐方式:top、middle、bottom

当设置 align 为 left 或 right 时,图片和内容会显示在一行;如果让其它内容换行,可以使用 <br clear="all">

11、字符实体

显示结果	描述		实体名	实体号
 	无间断空格	&nbsp;	&#160;
<	小于			&lt;	&#60;
>	大于			&gt;	&#62;
&	and符号		&amp;	&#38;
"	双引号		&quot;	&#34;
¢	分			&cent;	&#162;
£	英镑			&pound;	&#163;
¥	人民币元		&yen;	&#165;
§	章节			&sect;	&#167;
©	版权			&copy;	&#169;
®	注册			&reg;	&#174;
×	乘号			&times;	&#215;
÷	除号			&divide;&#247;
√	对号			&radic;	&#8730;

12、表格

<table> 
    <caption>成绩单</caption> 
    <tr><th>姓名</th> <th>英语</th></tr> 
    <tr><td>张三</td> <td>88</td></tr> 
    <tr><td>李四</td> <td>90</td></tr> 
</table>

13、table 标签

align	设置表格位置,可以为left、center、right。
width	设置表格的宽度。
height 	设置表格的高度。
border	设置表格外框的粗细。
bordercolor	设置表格外框的颜色。
cellspacing	设置两个单元格之间的间距。
cellpadding	设置单元格内文字与单元格边框的间距。
background	设置表格的背景图像的URL。
bgcolor	设置表格的背景颜色。

14、caption 标签

align	设置标题列相对于表格的摆放位置(水平),可选值为: left, center, right, top, middle, bottom。
valign	设置标题列相对于表格的摆放位置(上下),可选值为: top, bottom。与align同时使用来实现标题列在表格下方偏右。

15、tr 标签

bgcolor 	设置表格行的背景色。
align	设置水平对齐方式,可取left、center、right。
valign	设置垂直对齐方式,可取top、middle、bottom。

16、td 标签

width	单元格宽度(通常设置在第一行)。
height 	单元格高度(通常设置在第一列)。
rowspan	单元格占用表格行数。
colspan	单元格占用表格列数。
background 	设置单元格背景图像。
bgcolor 	设置单元格背景色。
align 	设置内容水平对齐方式,可选left、center、right。
valign	设置内容垂直对齐方式,可选top、middle、bottom。

17、iframe 

src	指定框架显示的HTML文件的位置。
name	指定窗口的名称。
width	指定框架的宽度
height	指定框架的高度
frameborder	是否显示框架。0-不显示,1-显示;默认为1
scrolling	是否显示滚动条。no-不显示,yes-显示,auto-自动设置;默认为auto。

Html 5

1、<!DOCTYPE> 标签

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"> 
    <title>文档标题</title>
    </head> 
    <body>
        文档内容......
    </body> 
</html>

2、<abbr> 标签

用来表示一个缩写词或者首字母缩略词(当鼠标移动到缩略词上面会出现全称)

The<abbr title="World Health Organization ">WHO</abbr> was founded in 1948.

3、<article>标签

标签定义独立的内容

<article>
    <h1>Internet Explorer 9</h1>
    <p>Windows Internet Explorer 9 在2011年3月14日21:00发布。</p>
</article>

4、<aside> 标签

通常用于显示侧边栏或者补充的内容。例如:目录、索引等。

<p>My family and I visited The Epcot center this summer.</p> 
<aside> 
    <h4>Epcot Center</h4> 
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

5、<address> 标签

某个文档中所属作者或者所有者的相关的联系信息

<address>
    Written by <a href="#">Jon Doe</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

6、<base> 标签

规定页面上所有链接的默认 URL 和默认目标

<head><base href="//statics.w3cschool.cn/images/w3c/" target="_blank"></head> 
<body>
    <img src="logo.png" width="24" height="39" alt="w3cschool">
    <a href="logo.png">w3cschool logo</a>
</body>

7、<blockquote> 标签和<q> 标签

<blockquote> 用来引用大段的内容块,处于该标签内的文本会独自分离出来,并且自动缩进;<q> 用于定义一个短引用,效果就是加了一对双引号。

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. 
</blockquote>

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

8、<bdo> 标签

改变显示文本的方向

<p>该段落文字从左到右显示</p>
<p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>

9、<col> 标签与<colgroup> 标签

为表格中的三个列设置了背景色

span : 表示 col 横跨的列数

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>

10、<del> 和 <ins>

一段带有已删除部分和新插入部分的文本

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

11、<details> 标签

只有谷歌浏览器和Safari 6支持

<details> 标签规定了用户可见的或者隐藏的需求的补充细节。

<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

<details> 元素的内容对用户是不可见的,除非设置了 open 属性。

与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details>

12、<embed> 标签

用来嵌入 flash 动画片

<embed src="helloworld.swf">

height      pixels              规定嵌入内容的高度。

src            URL               规定被嵌入内容的 URL。

type         MIME_type     规定嵌入内容的 MIME 类型。

注:MIME = Multipurpose Internet Mail Extensions。

width       pixels       规定嵌入内容的宽度。

13、<figure>和<figcaption> 标签

使用 <figure> 元素标记文档中的一个图像, <figcaption> 表示标题

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

14、<form>标签的新属性

novalidate      如果使用该属性,则提交表单时不进行验证。

15、<fieldset> 标签和<legend> 标签

disabled           disabled          规定该组中的相关表单元素应该被禁用。

form                 form_id            规定 fieldset 所属的一个或多个表单。

Name               text                  规定 fieldset 的名称。

<legend>定义了标题

<form>
    <fieldset>
        <legend>Personalia:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
    </fieldset>
</form>

16、<hgroup> 标签

对标题进行组合

<hgroup>
    <h1>Welcome to my WWF</h1>
    <h2>For a living planet</h2>
</hgroup>

17、<input> 标签

autocomplete	        on/off			规定 <input> 元素输入字段是否应该启用自动完成功能
autofocus		autofocus		属性规定当页面加载时 <input> 元素应该自动获得焦点
list			datalist_id		引用<datalist>元素,其中包含<input>元素的预定义选项
max			numberdate		属性规定 <input> 元素的最大值
min 			numberdate		属性规定 <input> 元素的最小值
maxlength		number 			属性规定 <input> 元素中允许的最大字符数。
minlength		number 			属性规定 <input> 元素中允许的最小字符数。
multiple		multiple		允许用户输入到 <input> 元素的多个值
pattern		        regexp 			规定用于验证 <input> 元素的值的正则表达式。
placeholder	        text 			input 里面简短的提示信息
readonly		readonly		只读
required		required		规定必需在提交表单之前填写输入字段
size			number 			属性规定以字符数计的 <input> 元素的可见宽度
// max 与 min
<form action="/statics/demosource/demo-form.php">
    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>
    输入 2000-01-01 之后的日期:
    <input type="date" name="lday" min="2000-01-02"><br>
    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5"><br>
    <input type="submit">
</form>
// maxlength
<form action="demo-form.php">
    Username: <input type="text" name="usrname" maxlength="10"><br>
    <input type="submit" value="提交">
</form>

属性 type 的值:

button          定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox        定义复选框。
color           定义拾色器。
date            定义 date 控件(包括年、月、日,不包括时间)。
datetime        定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
datetime-local  定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email           定义用于 e-mail 地址的字段。
file            定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden          定义隐藏输入字段。
image           定义图像作为提交按钮。
month           定义 month 和 year 控件(不带时区)。
number          定义用于输入数字的字段。
password        定义密码字段(字段中的字符会被遮蔽)。
radio           定义单选按钮。
range           定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset           定义重置按钮(重置所有的表单值为默认值)。
search          定义用于输入搜索字符串的文本字段。
submit          定义提交按钮。
tel             定义用于输入电话号码的字段。
text            默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time            定义用于输入时间的控件(不带时区)。
url             定义用于输入 URL 的字段。
week            定义 week 和 year 控件(不带时区)。

18、<lable> 标签

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>

19、<mark> 标签

部分文本高亮显示

<p>Do not forget to buy <mark>milk</mark> today.</p>

20、<nav> 标签

用于制作导航栏

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>

21、<noscript> 标签

<script>
document.write("Hello World!")
</script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

22、<option> 标签和 <optgroup> 标签

<option> 标签的属性:

disabled   disabled   规定此选项应在首次加载时被禁用。

label         text          定义当使用 <optgroup> 时所使用的标注。

selected  selected  规定选项(在首次显示在列表中时)表现为选中状态。

value        text          定义送往服务器的选项值。

<optgourp>是用来对<option>进行分组的:

<select>
    <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>
</select>

23、<progress> 标签

用于表示进度条

<progress value="22" max="100"></progress>

24、<section> 标签

对文档中的内容进行分块或分段

<section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
    <h1>WWF's Panda symbol</h1>
    <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

25、<textarea> 标签

cols                 number           规定文本区域可见的列数

rows                number           规定文本区域可见的行数

maxlength       number           规定文本区域允许的最大字符数

猜你喜欢

转载自blog.csdn.net/weidong_y/article/details/82119460