HTML 标题(Heading)是通过<h1 - <h6 标签来定义的.
HTML 段落是通过标签 <p 来定义的.
HTML 链接是通过标签 <a 来定义的 . 在 href 属性中指定链接的地址。
换行 <br / 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
<b <strong 加粗文本
<i <em 斜体文本 缩小的
电脑自动输出
这是 <sub 下标</sub 和 上标</sup
使用 pre 标签对空行和空格进行控制
显示缩写 …</abbr
…</acronym
文字方向 <p<bdo dir="rtl"该段落文字从右到左显示。</bdo</p
删除和插入文本
<pMy favorite color is <delblue</del <insred</ins!</p
HTML使用标签 <a来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a 中使用了href属性来描述链接的地址。链接语法 <a href="url"链接文本</a
使用 target 属性,你可以定义被链接的文档在何处显示。
图片链接 <p创建图片链接:
<a href=“http://www.runoob.com/html/html-tutorial.html”
<img border=“10” src=“smiley.gif” alt=“HTML 教程” width=“32” height=“32”</a</p
<p无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html"
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"</a></p
跳出框架 <p跳出框架?</p
<a href=“http://www.runoob.com/” target="_top"点击这里!
创建电子邮件链接时如何发送邮件内容
使用关键字:mailto
在进行抄送时,需要使用关键字:cc
在进行密送时,需要使用关键字:bcc
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符
注:多个邮件地址用 ; 隔开,空格用 %20 代替。
CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用
这是一个标题
这是一个段落。
字体, 字体颜色 ,字体大小 使文本对齐方式用font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式: 文本对齐方式居中对齐的标题
图像
在 HTML 中,图像由<img 标签定义。
<img是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是:
<img src=“url” alt=“some_text”
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中,那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src=“boat.gif” alt=“Big Boat”
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
属性值默认单位为像素:
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
基本的注意事项 - 有用的提示:
注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
表格
表格由 <table 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格实例
实例
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
HTML无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用
- 标签
- Coffee
- Milk
Coffee
Milk
HTML 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签。
列表项使用数字来标记。
- Coffee
- Milk
Coffee
Milk
HTML 自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以
-
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
- 开始。
-
Coffee
- - black hot drink Milk
- - white cold drink
Coffee
- black hot drink
Milk - white cold drink
HTML 列表标签
标签 描述
ol 定义有序列表
ul 定义无序列表
li 定义列表项
dl>定义列表
dt 自定义列表项目
dd 定义自定列表项的描述
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1, <p, <ul, <table
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b, <td, <a, <img
HTML <div 元素
HTML <div 元素是块级元素,它可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用,<div元素可用于对大的内容块设置样式属性。
HTML <span 元素
HTML <span 元素是内联元素,可用作文本的容器
<span 元素也没有特定的含义。
当与 CSS 一同使用时,<span 元素可用于为部分文本设置样式属性。
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 来设置:
. input 元素 .HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签(<input)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
文本域(Text Fields)
文本域通过<input type="text"标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
form
First name: <input type=“text” name=“firstname”<br
Last name: <input type=“text” name=“lastname”
First name:
Last name:
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。
密码字段
密码字段通过标签<input type=“password” 来定义:
form
Password: <input type=“password” name=“pwd”
/form
浏览器显示效果如下:
Password:
注意:密码字段字符不会明文显示,而是以星号或圆点替代。
单选按钮(Radio Buttons)
<input type=“radio” 标签定义了表单单选框选项
form
input type=“radio” name=“sex” value="male"Male<br
input type=“radio” name=“sex” value="female"Female
/form
浏览器显示效果如下:
Male
Female
复选框(Checkboxes)
<input type=“checkbox” 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
form
<input type=“checkbox” name=“vehicle” value="Bike"I have a bike
<input type=“checkbox” name=“vehicle” value="Car"I have a car
/form
浏览器显示效果如下:
I have a bike
I have a car
提交按钮(Submit Button)
<input type=“submit” 定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
form name=“input” action=“html_form_action.php” method=“get”>
Username: <input type=“text” name=“user”
<input type=“submit” value=“Submit”
Username:
假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。
HTML 框架
Iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:“80%”)。
实例
iframe src=“demo_iframe.htm” width=“200” height=“200”</iframe
Iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
实例
iframe src=“demo_iframe.htm” frameborder=“0”</iframe
HTML 脚本
script 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!":
实例
script
document.write(“Hello World!”);