HTML笔记二 | Simple & Freedom

HTML 列表

<!--无序列表-->
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<!--指定类型的无序列表-->
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  
<!--有序列表-->
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<!--设定起始索引的有序列表-->
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<!--嵌套列表-->
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
<!--自定义列表-->
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dd>用来计算的仪器2 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

HTML 表单与输入

<!--文本域(Text fields)-->
<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>
<!--密码域-->
<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>
<!--复选框-->
<form>
我喜欢自行车：
<input type="checkbox" name="Bike"><br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>
<!--单选按钮-->
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" /><br />
女性：
<input type="radio" name="Sex" value="female" />
</form>
<!--下拉列表, 指定初始显示值的下拉列表,如果没有指定默认第一个为初始显示值-->
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<!--创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。-->
<textarea cols="30" rows="5">
领先的 Web 技术教程 - 全部免费
在w3school，你可以找到你所需要的所有的网站建设教程。
从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。
</textarea>
<!--创建按钮-->
<form>
<input type="button" value="Hello world!">
</form>
<!--创建group box-->
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

表单实例

<!--如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。-->
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
<!--如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。-->
<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form> 
<!--带有单选按钮的表单-->
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 
<!--从表单发送电子邮件-->
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

HTML 图像

<img src="/i/eg_mouse.jpg" width="128" height="128" />
<img src="/i/eg_cute.gif" width="50" height="50" />
<img src="/i/ct_netscape.jpg" />
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<body background="/i/eg_background.jpg">
<!--图像背景, gif 和 jpg 文件均可用作 HTML 背景,如果图像小于页面，图像会进行重复-->
<body background="/i/eg_background.jpg"></body>
<!--图片对齐方式, 请注意，bottom 对齐方式是默认的对齐方式。-->
<img src="/i/eg_cute.gif" align="middle">
<!--带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧-->
<img src ="/i/eg_cute.gif" align ="left"> 
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
为图片显示替换文本。在浏览器无法载入图像时，替换文本属性alt告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
<img src="/i/eg_goleft.gif" alt="向左转" />
制作图像链接
<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>
创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
把一幅普通的图像设置为图像映射
<a href="/example/html/html_ismap.html"><img src="/i/eg_planets.jpg" ismap /></a>

HTML 背景

如果图像小于页面，图像会进行重复

1 2	<body bgcolor="#d0d0d0"></body> <body background="/i/eg_bg_06.gif"></body>

HTML 样式(style)

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
没有下划线的链接
<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个没有下划线的链接！</a>
引用外部样式
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

HTML 头部(head)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>标题不会显示在文档区</title>
</head>
一个 target，所有的链接
使用 base 标签使页面中的所有标签在新窗口中打开。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank" />
</head>
<body>
<p>
<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。
</p>
<p>
<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。
</p>
</body>

HTML 元信息(meta)

本文档的 meta 属性标识了创作者和编辑软件。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="w3school.com.cn">
<meta name="revised" content="David Yang,8/1/07">
<meta name="generator" content="Dreamweaver 8.0en">
</head>
本文档的 meta 属性描述了该文档和它的关键词。
<meta name="description" content="HTML examples">
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
在网址已经变更的情况下，将用户重定向到另外一个地址
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
<body>
<p>对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a></p>
<p>您将在 5 秒内被重定向到新的地址。</p>
<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>
</body>

HTML 脚本(script)

运行于不支持脚本的浏览器

1 2	<script type="text/javascript"> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript>