属性总是在 html 元素的开始标签中规定。
属性例子 1:
定义标题的开始。
拥有关于对齐方式的附加信息。属性例子 2:
定义 html 文档的主体。
拥有关于背景颜色的附加信息。属性例子 3:
定义 html 表格。
拥有关于表格边框的附加信息。
完整的 html 参考手册提供了每个 html 元素可使用的合法属性的完整列表:
html参考手册:http://www.w3school.com.cn/tags/index.asp
2.标题标题(heading)是通过
- 等标签进行定义的。 定义最大的标题。 定义最小的标题。
标签在 html 页面中创建水平线。可用于分割元素
3.段落段落是通过
标签定义的。
① 使用空的段落标记
去插入一个空行是个坏习惯。用
标签代替它。② 如果希望在不产生一个新段落的情况下进行换行(新行),使用
标签
4.样式style 属性用于改变 html 元素的样式。
style 属性的作用是提供了一种改变所有 html 元素的样式的通用方法。通过 html 样式,能够通过使用 style 属性直接将样式添加到 html 元素,或者间接地在独立的样式表中(css 文件)进行定义。
background-color 属性为元素定义了背景颜色,如:
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。
text-align 属性规定了元素中文本的水平对齐方式:
this is a heading,可将center改为left,rght实现不同的效果。
5.引用① html 元素定义短的引用。浏览器通常会为 元素包围引号。
wwf 的目标是:构建人与自然和谐共存的世界。
② 用于长引用的 html
,html 元素定义被引用的节。浏览器通常会对 元素进行缩进处理。以下内容引用自 wwf 的网站:
五十年来,wwf 一直致力于保护自然界的未来。世界领先的环保组织,wwf 工作于 100 个国家,并得到美国一百二十万会员及全球近五百万会员的支持。
③ 用于缩略词的 html html 元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
6.css样式引入方式有以下三种方式来插入样式表:
① 外部:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
head>link rel=stylesheet type=text/css href=mystyle.css>head>
② 内部:当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过
head>style type=text/css>body {background-color: red}p {margin-left: 20px}style>head>
③ 内联:当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 css 属性。以下实例显示出如何改变段落的颜色和左外边距。
p style=color: red; margin-left: 20px>this is a paragraphp>
7.链接html 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
我们通过使用 标签在 html 中创建链接。
有两种使用 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签① 使用 target 属性,你可以定义被链接的文档在何处显示。如果把链接的 target 属性设置为 _blank,该链接会在新窗口中打开。
a href=http://www.w3school.com.cn/ target=_blank>visit w3school!a>
② 链接到同一个页面的不同位置:给该位置的标题加name属性,然后添加链接,注意在添加链接时要在name的值前面添加#,如:
html>body>p>a href=#c4>查看 chapter 4。a>p>h2>chapter 1h2>p>this chapter explains ba bla blap>h2>chapter 2h2>p>this chapter explains ba bla blap>h2>chapter 3h2>p>this chapter explains ba bla blap>h2>a name=c4>chapter 4a>h2>p>this chapter explains ba bla blap>h2>chapter 5h2>p>this chapter explains ba bla blap>h2>chapter 6h2>p>this chapter explains ba bla blap>h2>chapter 7h2>p>this chapter explains ba bla blap>h2>chapter 8h2>p>this chapter explains ba bla blap>h2>chapter 9h2>p>this chapter explains ba bla blap>h2>chapter 10h2>p>this chapter explains ba bla blap>h2>chapter 11h2>p>this chapter explains ba bla blap>h2>chapter 12h2>p>this chapter explains ba bla blap>h2>chapter 13h2>p>this chapter explains ba bla blap>h2>chapter 14h2>p>this chapter explains ba bla blap>h2>chapter 15h2>p>this chapter explains ba bla blap>h2>chapter 16h2>p>this chapter explains ba bla blap>h2>chapter 17h2>p>this chapter explains ba bla blap>body>html>
8.图像图像标签()和源属性(src)。在 html 中,图像由 标签定义。 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 指 source。源属性的值是图像的 url 地址。
语法:
img src=url />
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
① 替换文本属性(alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
img src=boat.gif alt=big boat>
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
② 设置图片背景
body background=/i/eg_background.jpg>
③ align属性可以设置图片的位置,如:
p>img src =/i/eg_cute.gif align =left> 带有图像的一个段落。图像的 align 属性设置为 left。图像将浮动到文本的左侧。p>
④ height,width属性设置图片大小,如:
img src=/i/eg_mouse.jpg width=50 height=50>
⑤ 图像链接:
a href=/example/html/lastpage.html>img border=0 src=/i/eg_buttonnext.gif />a>
⑥使图片不同区域链接不同网址:
map定义图像地图,将不同的区域量化
imgsrc=/i/eg_planets.jpgborder=0 usemap=#planetmapalt=planets />map name=planetmap id=planetmap>areashape=circlecoords=180,139,14href =/example/html/venus.htmltarget =_blankalt=venus />areashape=circlecoords=129,161,10href =/example/html/mercur.htmltarget =_blankalt=mercury />areashape=rectcoords=0,0,110,260href =/example/html/sun.htmltarget =_blankalt=sun />map>
9.表格表格由
标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
下面是一个两行两列的表格:
table>tr>td>row 1, cell 1td>td>row 1, cell 2td>tr>tr>td>row 2, cell 1td>td>row 2, cell 2td>tr>table>
① 如果不定义边框属性,表格将不显示边框。使用属性border来定义边框,如:
table border=1>
②表格的表头使用
标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。html>body>h4>表头:h4>table border=1>tr> th>姓名th> th>电话th> th>电话th>tr>tr> td>bill gatestd> td>555 77 854td> td>555 77 855td>tr>table>h4>垂直的表头:h4>table border=1>tr> th>姓名th> td>bill gatestd>tr>tr> th>电话th> td>555 77 854td>tr>tr> th>电话th> td>555 77 855td>tr>table>body>html>
③空单元格问题:在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来,如:
td> td>
10.列表html 支持无序、由序和定义列表
① 无序列表:
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于
标签。每个列表项始于 。ul>li>coffeeli>li>milkli>ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
② 有序列表:
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于
标签。每个列表项始于 标签。ol>li>coffeeli>li>milkli>ol>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
③ 定义列表:
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。dl>dt>coffeedt>dd>black hot drinkdd>dt>milkdt>dd>white cold drinkdd>dl>
④ 可以用type来改变每个列表项前面的标记:
ul type=disc> 实心圆点ul type=circle> 空心圆点ol type=a> a,b,c...ol type=i> 小写罗马
11.块大多数 html 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束),内联元素在显示时通常不会以新行开始。
①
html
元素是块级元素,它是可用于组合其他 html 元素的容器。
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 css 一同使用,
元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。②
html 元素是内联元素,可用作文本的容器。
元素也没有特定的含义。
当与 css 一同使用时, 元素可用于为部分文本设置样式属性。
12.类对 html 进行分类(设置类),使我们能够为元素的类定义 css 样式。
为相同的类设置相同的样式,或者为不同的类设置不同的样式。
① 分类块级元素
html
元素是块级元素。它能够用作其他 html 元素的容器。设置
元素的类,使我们能够为相同的 元素设置相同的类:实例:
doctype html>html>head>style>.cities { background-color:black; color:white; margin:20px; padding:20px;} style>head>body>div class=cities>h2>londonh2>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>div>div class=cities>h2>parish2>p>paris is the capital and most populous city of france.p>div>div class=cities>h2>tokyoh2>p>tokyo is the capital of japan, the center of the greater tokyo area,and the most populous metropolitan area in the world.p>div>body>html>
② 分类行内元素,html 元素是行内元素,能够用作文本的容器。设置 元素的类,能够为相同的 元素设置相同的样式。
实例:
doctype html>html>head>style> span.red {color:red;}style>head>body>h1>my span class=red>importantspan> headingh1>body>html>
