欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

从零开始HTML(一 2016/9/19)

程序员文章站 2022-04-07 19:01:27
...

1、属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,比如:name="value"

属性总是在 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 paragraph
p>

7.链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

我们通过使用 标签在 HTML 中创建链接。

有两种使用 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 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.图像

图像标签(从零开始HTML(一  2016/9/19))和源属性(Src)。在 HTML 中,图像由 从零开始HTML(一  2016/9/19) 标签定义。从零开始HTML(一  2016/9/19) 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(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定义图像地图,将不同的区域量化

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>

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 支持无序、由序和定义列表

① 无序列表:

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于

相关标签: 从零开始HTML(一 2016/9/19)

上一篇: Oracle中NUMBER类型如果不指定长度和小数点精度默认是多长

下一篇: HTTP协议实例详解

推荐阅读