网站建设
 
    收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:从零开始到HTML

从零开始到HTML

 

1、属性

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

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。

<table border="1"> 拥有关于表格边框的附加信息。

 

完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表:

HTML参考手册:http://www.w3school.com.cn/tags/index.asp

 

2.标题

标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。<h1>
定义最大的标题。<h6> 定义最小的标题。

<hr /> 标签在 HTML 页面中创建水平线。可用于分割元素

 

3.段落

段落是通过 <p> 标签定义的。

① 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />
标签代替它。

② 如果希望在不产生一个新段落的情况下进行换行(新行),使用 <br /> 标签

 

4.样式

style 属性用于改变 HTML 元素的样式。

style 属性的作用是提供了一种改变所有 HTML 元素的样式的通用方法。通过 HTML 样式,
能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中
(CSS 文件)进行定义。

background-color 属性为元素定义了背景颜色,如:<body style="background-color:yellow">

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。

text-align 属性规定了元素中文本的水平对齐方式:<h1 style="text-align:center">This is a
heading</h1>,可将center改为left,rght实现不同的效果。

 

5.引用

① HTML <q> 元素定义短的引用。浏览器通常会为 <q>
元素包围引号

<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>

② 用于长引用的 HTML <blockquote>,HTML <blockquote> 元素定义被引用的节。
浏览器通常会对 <blockquote> 元素进行缩进处理。

<p>以下内容引用自 WWF 的网站:</p> 
<blockquote cite="http://www.worldwildlife.org/who/index.html"> 
五十年来,WWF 一直致力于保护自然界的未来。 
世界领先的环保组织,WWF 工作于 100 个国家, 
并得到美国一百二十万会员及全球近五百万会员的支持。 
</blockquote>

③ 用于缩略词的 HTML <abbr> HTML <abbr> 元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

6.CSS样式引入方式

有以下三种方式来插入样式表:

① 外部:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,
你就可以通过更改一个文件来改变整个站点的外观。

<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head>

② 内部:当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过
<style> 标签定义内部样式表。

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

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

有两种使用 <a> 标签的方式:

  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 1</h2> 
<p>This chapter explains ba bla bla</p> 

<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><a name="C4">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</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 11</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 12</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 13</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 14</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 15</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 16</h2> 
<p>This chapter explains ba bla bla</p> 

<h2>Chapter 17</h2> 
<p>This chapter explains ba bla bla</p> 

</body> 
</html>

 

 

 8.图像

图像标签(<img>)和源属性(Src)。在 HTML 中,图像由 <img> 标签定义。
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,
你需要使用源属性(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>

 

 

⑥<area>使图片不同区域链接不同网址:

 

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.表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),
每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),
即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 

下面是一个两行两列的表格:

<table> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 
</table>

 

① 如果不定义边框属性,表格将不显示边框。使用属性border来定义边框,如:

<table border="1">

 

 

②表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

<html> 

<body> 

<h4>表头:</h4> 
<table border="1"> 
<tr> 
  <th>姓名</th> 
  <th>电话</th> 
  <th>电话</th> 
</tr> 
<tr> 
  <td>Bill Gates</td> 
  <td>555 77 854</td> 
  <td>555 77 855</td> 
</tr> 
</table> 

<h4>垂直的表头:</h4> 
<table border="1"> 
<tr> 
  <th>姓名</th> 
  <td>Bill Gates</td> 
</tr> 
<tr> 
  <th>电话</th> 
  <td>555 77 854</td> 
</tr> 
<tr> 
  <th>电话</th> 
  <td>555 77 855</td> 
</tr> 
</table> 

</body> 
</html>

 

 

③空单元格问题:在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格
是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,
在空单元格中添加一个空格占位符,就可以将边框显示出来,如:

<td>&nbsp;</td>

 

 

10.列表

HTML 支持无序、由序和定义列表

① 无序列表:

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

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul> 
<li>Coffee</li> 
<li>Milk</li> 
</ul>

 

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

② 有序列表:

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol> 
<li>Coffee</li> 
<li>Milk</li> 
</ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

③ 定义列表:

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt>
开始。每个自定义列表项的定义以 <dd> 开始。

<dl> 
<dt>Coffee</dt> 
<dd>Black hot drink</dd> 
<dt>Milk</dt> 
<dd>White cold drink</dd> 
</dl>

 

 

④ 可以用type来改变每个列表项前面的标记:

<ul type="disc">  实心圆点 
<ul type="circle"> 空心圆点 
<ol type="A"> A,B,C... 
<ol type="i"> 小写罗马

 

 

11.块

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以
新行来开始(和结束),内联元素在显示时通常不会以新行开始。

 

① <div>

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table>
元素的作用是显示表格化的数据。

② <span>

HTML <span> 元素是内联元素,可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

 

12.类

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式,或者为不同的类设置不同的样式。

 

① 分类块级元素

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:

实例:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.cities { 
    background-color:black; 
    color:white; 
    margin:20px; 
    padding:20px; 
}  
</style> 
</head> 

<body> 

<div class="cities"> 
<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> 
</div> 

<div class="cities"> 
<h2>Paris</h2> 
<p>Paris is the capital and most populous city of France.</p> 
</div> 

<div class="cities"> 
<h2>Tokyo</h2> 
<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 <span> 元素是行内元素,能够用作文本的容器。
设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。

实例:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
  span.red {color:red;} 
</style> 
</head> 
<body> 

<h1>My <span class="red">Important</span> Heading</h1> 

</body> 
</html>

 


上一条: QQ公众号和微信公众号有何区别
下一条: html/css中两个div在同一行
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
推广经验分享
其它
网站建设资源
常见问题
网站知识
首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
COPYRIGHT(C) 2005-2019 亚网互联·中国 版权所有 ALL RIGHTS RESERVED (粤ICP备15005241号)
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦15楼 1529-1531 室   E-Mail:web@yanet.cn  
公司电话:0755-89812581(8线)  
深圳市亚网科技有限公司 深圳网站建设常年法律顾问:朱运德律师