目录
HTML标签
常用标签
- 标题：
<h1></h1>...<h6></h6> - 段落：
<p></p> - 换行：
<br/> - 分割线：
<hr/> - 格式化标签：如下表格：
| 标签 | 描述 |
|---|---|
<b> | 定义粗体文本。 |
<big> | 定义大号字。 |
<em> | 定义着重文字。 |
<i> | 定义斜体字。 |
<small> | 定义小号字。 |
<strong> | 定义加重语气。 |
<sub> | 定义下标字。 |
<sup> | 定义上标字。 |
<ins> | 定义插入字。 |
<del> | 定义删除字。 |
<s> | 不赞成使用。使用 <del>代替。 |
<strike> | 不赞成使用。使用 <del> 代替。 |
<u> | 不赞成使用。使用样式（style）代替。 |
- 计算机输出标签：
| 标签 | 描述 |
|---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<tt> | 定义打字机代码 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
<html>
<body>
<pre>
this is
pre tag
</pre>
</body>
</html>
- 引用和术语定义
| 标签 | 描述 |
|---|---|
<abbr> | ect. |
<acronym> | WWW |
<address> | 定义地址 |
<bdo> | 定义文字方向 方向 |
<blockquote> |
定义长的引用(浏览器通常会对
|
<q> | 定义短的引用(浏览器通常会为 |
<cite> | 定义引用，引证 |
<dfn> | 定义一个定义项目 |
-
链接:
<a>链接</a>，示例-
target 属性：使用 Target 属性，你可以定义被链接的文档在何处显示。
-
name 属性：name 属性规定锚（anchor）的名称。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a><a href="#C4">查看 Chapter 4。</a> <h2><a name="C4">Chapter 4</a></h2>
-
-
图像：
<img></img>，
- src:src 指 “source”。源属性的值是图像的 URL 地址；
- alt:alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的,在浏览器无法载入图像时，替换文本属性告诉者她们失去的信息；
- map:定义图像地图；
- area：定义图像地图中的可点击区域。
<body background="/i/eg_background.jpg">#背景图片 <h2>未设置对齐方式的图像：</h2> <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已设置对齐方式的图像：</h2> <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>请注意，bottom 对齐方式是默认的对齐方式。</p> <p> <img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 </p> <img src="/i/eg_mouse.jpg" width="50" height="50"> <br /> <img src="/i/eg_mouse.jpg" width="100" height="100"> <br /> <img src="/i/eg_mouse.jpg" width="200" height="200"> <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> <p> 您也可以把图像作为链接来使用： <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> <p>请点击图像上的星球，把它们放大。</p> <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> <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> -
表格：
<table><tr><td></td></tr></table>- 表格由
<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 - border:设置表格边框大小
- th：表头
- colspan:设置跨列数
- rowspan:设置跨行数
- cellpadding：创建单元格内容与其边框之间的空白
- cellspacing：增加单元格之间的距离
- frame：控制围绕表格的边框（box，above-线在上方,below-线在下方,hsides-现在左右两侧,vsides-现在上下两侧）
- 表格由
-
列表：
- 无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于
<ul>标签。每个列表项始于<li> - 有序列表：有序列表始于
<ol>标签。每个列表项始于<li>标签 - 自定义列表：自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> </ul> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
- 无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于
-
div 和 span
- div：HTML
<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器，<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 - span：
<span>元素是内联元素，可用作文本的容器。<span>元素也没有特定的含义
- div：HTML
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
标签属性
应该避免使用下面这些标签和属性：
| 标签 | 描述 |
|---|---|
<center > | 定义居中的内容。 |
<font> 和 <basefont> | 定义 HTML 字体 |
<s> 和 <strike> | 定义删除线文本 |
<u> | 定义下划线文本 |
| 属性 | 描述 |
|---|---|
align | 定义文本的对齐方式 |
bgcolor | 定义背景颜色 |
color | 定义字体颜色 |
-
class：对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式
<!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html> -
style属性
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。 -
文本常用属性介绍
- font-family：定义元素中文本的字体系列
- color :定义文本颜色
- font-size ：定义文本大小
<html> <body> <h1 style="font-family:arial;color:red;font-size:24px">一级标题</h1> <p style="background-color:red">这是段落</p> <h2 style="text-align:center">二级标题</h2> <!-- 淘汰了align属性--> </body> </html> -
背景
- 背景颜色：background-color / bgcolor
- 背景：background
CSS 样式
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<html>
<head>
<style type="text/css">
body {background-color-red}
p{margin:20px}
</style>
<body>
<p></p>
</body>
</head>
</html>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内联样式
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
布局
div
<!DOCTYPE html charset="utf-8">
<html>
<head>
<style type="text/css">
#header{
background-color:black;
text-align:center;
color:white;
padding:5px;
margin:0px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:100%;
width:100px;
float:left;
padding:5px;
}
#section{
width:300px
float:left;
padding-left:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<title>div布局</title>
<body style="background-color:red; padding:0px;">
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id = "section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id ="footer">
Copyright ? W3Schools.com
</div>
</body>
</html>
<! DOCTYPE html>
<html>
<head>
<style type="text/css">
header{
background-color:black;
padding:10px;
color:white;
font-size:32;
text-align:center;
}
nav{
background-color:#eeeeee;
width:100px;
height:100%;
line-height:30px;
padding-left:10px;
color:black;
font-size:20;
float:left;
}
section{
width:100px;
height:100%;
background-color:red;
float:left;
padding-left:10px;
}
footer{
background-color:black;
padding:10px;
color:white;
font-size:24;
text-align:center;
clear:both;
}
</style>
</head>
<title>HTML语义布局</title>
<body>
<header>标题</header>
<nav>
导航1</br>
导航2</br>
导航3</br>
</nav>
<section>
<h1>章节目录</p>
<p>
这是一个段落
</p>
</section>
<footer>页脚</footer>
</body>
</html>
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
实例
- 垂直框架
<html>
<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>
</html>
- 水平框架
<html>
<frameset rows="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>
</html>
标签
框架结构标签（<frameset>）
- 框架结构标签（
<frameset>）定义如何将窗口分割为框架 - 每个 frameset 定义了一系列行或列 rows/columns
- rows/cols 的值规定了每行或每列占据屏幕的面积
框架标签（Frame）
基本的注意事项 - 有用的提示
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=“noresize”。
为不支持框架的浏览器添加 标签。
内联框架
示例：
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
<html>
<head></head>
<title>内联框架</title>
<body>
<h1>一级标题</h1>
<iframe name = "frame" src="div_layout1.html" width="100px" height="100px" frameborder="0"></iframe>
<hr>
<p>
<a href="https://www.baidu.com/" target="frame">测试内联框架</a>
</p>
</body>
</html>
常用属性：
- width：设置宽度
- height：设置高度
- frameborder：设置边框大小，0表示去除边框
HTML表单
form表单
HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单：
<form>
for elements
</form>
form 属性
-
action：action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。
-
method：method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
<form action="" method="GET"> #如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息 #当您使用 GET 时，表单数据在页面地址栏中是可见的 </form> 或 <form action="" method="POST"> #如果表单正在更新数据，或者包含敏感信息（例如密码） #POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。 </form>
form表单属性列表
表单元素
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
input
<input> 元素是最重要的表单元素。根据属性 type不同可区分为不通的类型。
<input type="text"/> #文本输入
根据其type属性可区分成不同的类型
-
text：文本输入框
-
radio：单选按钮
<h2>单选按钮</h2> <input type="radio" value="男"/>男<br/> <input type="radio" value="女"/>女 -
submit:提交按钮
-
password：输入显示内容为密码
-
checkbox：复选框
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
-
button：等价于
<button>，按钮
HTML5新增输入类型
- color：选择颜色值
- date：选择日期
- datatime：选择日期时间
- datetine-local：选择日期时间，无时区
- email：输入邮箱
- month：选择月份
- number：输入只能是数字
- range：输入自定义范围
- search
- tel：输入电话
- time：输入时间
- url：输入url地址
- week：选择周
input属性
-
value：规定输入的初始值
-
readonly：输入字段为只读
<input type="text" name="firstname" value="John" readonly> -
disabled：禁用
<input type="text" name="firstname" value="John" disabled> <br> -
size：输入字段尺寸，以字符计算
-
maxlength：字段最大长度
HTML5 属性
HTML5 为 <input> 增加了如下属性：
-
autocomplete
-
autofocus
autofocus 属性是布尔属性。
如果设置，则规定当页面加载时 元素应该自动获得焦点。First name:<input type="text" name="fname" autofocus> -
form
-
formaction
-
formenctype
-
formmethod
-
formnovalidate
-
formtarget
-
height 和 width
-
list ：list 属性引用的
<datalist>元素中包含了<input>元素的预定义选项。 -
min 和 max
min 和 max 属性规定 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。 -
multiple：文件选择
Select images: <input type="file" name="img" multiple> -
pattern (regexp)
-
placeholder ：placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
-
required
-
step
select元素（下拉列表）
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
textarea 文本域
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
datalist
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML 事件
详见 W3school
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
