空HTML元素的关闭: 从< br >到< /br >
HTML对标签大小写不敏感,但是一般推荐小写
HTML属性:
属性例子 1:
< h1 align=”center”> 拥有关于对齐方式的附加信息。
属性例子 2:
< body bgcolor=”yellow”> 拥有关于背景颜色的附加信息。
属性例子 3:
< table border=”1”> 拥有关于表格边框的附加信息。
始终为属性值加引号:
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如: name=’Bill “HelloWorld” Gates’
< hr />用于创建水平线
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
< !-- This is a comment -->
1 预格式文本: < pre>< /pre>标签可以保证内容中的空格保留
缩写和首字母缩写:
abbr title="etcetera">etc.</abbr
< br />
< acronym title="World Wide Web">WWW</ acronym>
块引用: 长引用是< blockquote>< /blockquote> 短引用是< q>< /q>
删除字和引用字效果: 分别是< del>和< ins>
用于联系信息的 HTML < address>
HTML < address> 元素定义文档或文章的联系信息(作者/拥有者)。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
条件注释
< !--[if IE 8]>
.... some HTML here ....
<![endif]-->
条件注释定义只有 Internet Explorer 执行的 HTML 标签。
样式使用三种方法: 外部样式表(通过link引入) 内部样式表(head标签里写style) 内联样式表(直接对元素写style=”“)
如何链接到一个页面的不同位置:
< html>
< body>
< p> < a href="#C4">查看 Chapter 4。< /a> /p>
< h2>Chapter 1< h2> < p>This chapter explains ba bla bla<
< h2>Chapter 2</ h2> < p>This chapter explains ba bla bla< p>
< h2>Chapter 3< /h2> < p>This chapter explains ba bla bla< /p>
< h2>Chapter 4</ a></ h2> < p>This chapter explains ba bla bla< /p>
< h2>Chapter 5</ h2> < p>This chapter explains ba bla bla</ p>
< h2>Chapter 6</ h2> < p>This chapter explains ba bla bla< /p>
< h2>Chapter 7< h2> < p>This chapter explains ba bla bla< /p>
< h2>Chapter 8</ h2> < p>This chapter explains ba bla bla</ p>
< h2>Chapter 9< /h2> < p>This chapter explains ba bla bla</ p>
< h2>Chapter 10
< p>This chapter explains ba bla bla</ p>
< /body> < /html>
图像的alt属性以及title属性 alt属性的内容是当图片不可见时显示,title属性是鼠标移到图标上时显示
表格:
< h4>两行三列:< /h4>
< table border="1">
< tr>
< td>100</ td>
< td>200< /td>
< td>300< /td>
< /tr>
< tr>
< td>400< /td>
< td>500< /td>
< td>600< /td>
< /tr> < /table>
表格的表头:
< tr> < th>Heading< /th>
< th>Another Heading< /th>
< /tr>
表格中的空单元格:
< td> & nbsp; < /td>
可以保证这个空单元格不显示,如果没有占位符 &n bsp; 那么这个单元格就会显示
表格标题:
< caption>我的标题< /caption>
横跨两列的单元格:
< tr> < th rowspan="2">电话</ th>
< td>555 77 854< /td>
< /tr>
单元格边距:
< table border="1" cellpadding="10">
< tr>
< td>First< /td>
< td>Row< /td>
< /tr>
< tr>
< td>Second< /td>
< td>Row< /td>
< /tr> </ table>
单元格间距:
< table border="1" cellspacing="10">
< tr>
< td>First< /td>
< td>Row< /td>
< /tr>
< tr>
< td>Second</t d>
< td>Row</t d>
< r> </ table>
在表格单元中排列内容:
< table width="400" border="1">
< tr>
< th align="left">消费项目....< /th>
< th align="right">一月< /th>
< th align="right">二月< /th>
< /tr>
< tr>
< td align="left">衣服< /td>
< td align="right">$241.10< /td>
< td align="right">$50.20</ td>
< /tr>
< tr> < td align="left">化妆品< /td>
< td align="right">$30.00< /td>
< td align="right">$44.45< /td>
< /tr>
< tr>
< td align="left">食物< /td>
< td align="right">$730.40< /td>
< td align="right">$650.00< /td>
< /tr>
< tr>
< th align="left">总计< /th>
< th align="right">$1001.50</ th>
< th align="right">$744.65</ th>
< /tr>
< /table>
无序列表:ul->li
有序列表:ol->li
使用 HTML5 的网站布局:
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
框架frame 垂直框架
< 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 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">
使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。 链接的 target 属性必须引用 iframe 的 name 属性:
body>
iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe
p>注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。
/body>
HTML的js脚本文件问题 如果浏览器压根没法识别 < script> 标签,那么 < script> 标签所包含的内容将以文本方式显示在页面上。 为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。 那些老的浏览器(无法识别 < script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。 而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。
script type="text/javascript" !--
document.write("Hello World!")
//-->
</script
HTML头部元素 所有链接一个目标 使用 base 标签使页面中的所有标签在新窗口中打开。
!DOCTYPE html>
html>
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />meta http-equiv="Content-Language" content="zh-cn" />
base target="_blank" / /head body
a href="http://www.w3school.com.cn" target="_blank">这个连接/a 将在新窗口中加载, target 属性被设置为 "_blank"。 /p p>
a href="www.w3school.com.cn">这个连接 也将在新窗口中加载, 即使没有 target 属性。 /p
/body
/html
重定向用户 把用户重定向到新的网址。
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta http-equiv="Refresh" content="5;url=www.w3school.com.cn" /
/head>
对不起。我们已经搬家了。您的 URL 是 a href="http://www.w3school.com.cn">http://www.w3school.com.cn
您将在 5 秒内被重定向到新的地址。
如果超过 5 秒后您仍然看到本消息,请点击上面的链接。
/body
/html
HTML < meta> 元素 针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述:
meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词:
<meta name="keywords" content="HTML, CSS, XML" /
name 和 content 属性的作用是描述页面的内容。
HTML表单元素:
method为get时,表单提交时数据会暴露
method为post时,表单提交时链接数据隐藏
Name 属性 如果要正确地被提交,每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段:
First name:
<input type="text" value="Mickey"
<br
Last name:<br
<input type="text" name="lastname" value="Mouse"
br><br
<input type="submit" value="Submit"
/form>
HTML表单输入类型: text、password、submit、radio、checkbox、button、number、date、color、month、week、time、datetime、email、search、tel、url
HTML表单属性: accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。
HTML表单输入限制:
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段