第1天html笔记Word文档格式.docx

资源描述

第1天html笔记Word文档格式.docx

《第1天html笔记Word文档格式.docx》由会员分享，可在线阅读，更多相关《第1天html笔记Word文档格式.docx（33页珍藏版）》请在冰豆网上搜索。

第1天html笔记Word文档格式.docx

html>

●HTML标签通常是成对出现的，比如<

和<

/b>

●标签对中的第一个标签是开始标签，第二个标签是结束标签

●绝大多数的标签都具有属性,建议属性值使用引号引起。

例如:

bodytext=”red”>

●大多数标签是可以嵌套的

b）Html创建★★

Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或html

整个文件是在<

与<

/html>

标签之间在<

标签间有<

head>

body>

子标签。

c）空的html标签★

●没有内容的HTML元素被称为空元素。

空元素是在开始标签中关闭的。

●<

br>

就是没有关闭标签的空元素（<

标签定义换行）。

●在开始标签中添加斜杠，比如<

br/>

，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。

●即使<

在所有浏览器中都是有效的，但使用<

其实是更长远的保障。

d）Html大小写不敏感★★

HTML标签对大小写不敏感：

等同于<

。

许多网站都使用大写的HTML标签。

W3School使用的是小写标签，因为万维网联盟（W3C）在HTML4中推荐使用小写，而在未来（X）HTML版本中强制使用小写

文件标签

1.html标签

整个文件都处于<

标签中.

HTML>

用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

在HTML文件有两部分<

2.head标签

用于加载一些重要的资讯

它的内容不会被显示，只有<

的内容才会被显示

3.title标签

title>

只能出现于<

中。

它代表的是标题

4.body标签

中的内容会被显示。

常用属性:

●text:

用于设定文字颜色

●background：

用于设定背景图片

●bgcolor:

用于设定背景色

5.关于html中颜色取值★

颜色由红色、绿色、蓝色混合而成

有三种取取值方式:

1.rgb（0,0,0）值是在0-255之间

2.#000000#ff0000#00ff00#0000ff#ffffff

3.redgreenblue

文件标签案例demo2.html

排版标签

1.注释

在html中注释是<

--注释-->

在html中使用注释的目的与java中一样。

2.p标签

标签是段落标签，可以将html文档分割为若干段落。

浏览器会自动在段落前后添加空格。

标签常用属性

●align:

用于设定对齐方式可选值leftrightcenter默认值是left.

3.br标签

标签是换行标签。

因为浏览器会自动的忽略空白与换行，因此<

标签成为了我们最常用的标签。

4.hr标签

hr>

标签会生成一条水平线。

设置水平线对齐方式可选值leftrightcenter

●size:

设置水平线厚度以像素为单位。

默认为2

●width:

设置水平线长度.可以是绝对值或相对值。

默认为100%

●color:

设置水平线颜色.默认为黑色

5.关于html中数值单位★

Html的数值默认单位为像素（px）.

在有些位置可以使用百分比来设置。

hrsize=’3’>

这个就代表水平线厚席为3px.

hrwidth=’30%’>

这个就代表水平线长度为总长度的30%.

排版标签案例demo3.html

块标签

1.div标签

用于在文档中设定一个块区域。

2.span标签

用于在行内设定一个块区域。

Html中绝大多数元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始。

例如divp等

内联元素在浏览器显示时，通常不会以新行来开始。

span

块标签案例demo4.html

字体标签

1.font

font>

标签用于规定文本的字体，大小，颜色。

●face:

规定文本的字体

规定文本的大小

规定文本的颜色

2.h1-h6

h1>

h6>

标签用于定义标题.

最大标题

最小标题

字体标签案例demo5.html

列表标签

1.ul

ul>

标签表示的是一个无序列表。

●type:

规定列表的项目符号类型,可取值disc,square,circle.默认值为disc

2.li

li>

标签表示的是一个列表项

这个属性只适用于无序列表，用于设定项目符号，默认值为disc

●value:

这个属性只适用于有序列表，用于设定列表的项目数字

3.ol

ol>

表示的是一个有序列表。

这个属性规定列表中使用的标记类型。

可取值1AaIi.

这个属性规定列表的起始值

列表标签案例demo6.html

图形标签

1.img

img>

是一个图片标签，用于在页面上引入图片.

常用属性：

●src:

用于设定要引入的图片的url

●alt:

用于设定图像的替代文字

用于设定图片的宽度

●height:

用于设定图片的高度

●border：

图片边框厚度

用于设定图片的对齐方式

图形标签案例demo7.html

链接标签

1.a★★★★★★

标签用于定义超连接，用于从一个页面链接到另一个页面。

●href:

用于设定链接指向页面的url.

●name:

用于设定锚的名称

●target:

用于设定在何处打开链接页面。

链接标签案例demo8.html

表格标签★★★★

1.table

table>

标签用于定义表格

用于设定表格的对齐方式

用于设定表格的背景颜色。

●border:

用于设定表格边框的宽度

用于规定表格的宽度。

2.tr

tr>

标签用于定义表格的行,包含一个或多个th或td元素。

align:

用于设定表格中行的内容对齐方式。

bgcolor:

用于设定表格中行的背景颜色。

3.td

td>

标签用于定义表格单元

td元素中的文本一般显示为正常字体且左对齐。

用于设定单元格内容的对齐方式。

用于设定单元格背景颜色。

用于设定单元格的高度。

用于设定单元格的宽度。

●colspan:

用于设定列合并

●rowspan:

用于设定行合并。

4.caption

caption>

用于定义表格标题

标签必须紧随<

标签之后，一个表格只能有一个标题。

通过这个标题会被居中于表格之上。

5.th

th>

标签用于定义表格的表头，<

内部的文本通常呈现为居中加粗文本。

Html表格中有两种类型的单元格：

表头单元格th:

包含表头信息。

标准单元格td:

包含数据。

6.thead

thead>

标签用于定义表格的页眉

标签用于组合HTML表格的表头内容。

元素应该与<

tbody>

和<

tfoot>

元素结合起来使用。

注意:

内部必须有<

标签。

7.tbody

标签用于定义表格的主体

标签用于组合HTML表格的主体内容。

8.tfoot

标签用于定义表格的页脚

标签用于组合HTML表格中的表注内容。

表格标签案例demo9.html

综合案例1-显示商品信息

案例代码商品信息展示.html

案例分析与实现

整个页面分成五个部分，这五个部分分别是head,menu,search,content,fott我们使用五个div来控制

1.head部分

;

head部分有两块内容，一个是左边logo,一个是右边的连接，我们可以使用table来描述，使用一个一行两列的table,左边列显示logo,右边处理这些连接。

分析图

代码如下:

divid="

head"

tdalign="

left"

imgsrc="

images/logo.gif"

/td>

nbsp;

images/cart.gif"

购物车<

/a>

帮助中心<

我的帐户<

新用户注册<

/tr>

/table>

/div>

我们使用了&

，它代表的是空格，我们使用它来控制列与列之间内容的间隔。

后续我们学完css，会有更好的办法来解决间隔问题。

2.menu部分

menu部分我们使用一个一行列的table来控制，在<

中我们使用<

标签来描述所有的菜单，并且设置<

的背景色及居中对齐，对于超连接中的文本我们使用<

标签来控制文字颜色。

分析图:

menu"

tablewidth="

100%"

center"

bgcolor="

#1c3f09"

fontsize="

color="

white"

文学<

/font>

生活<

计算机<

外语<

经管<

励志<

社科<

学术<

少儿<

艺术<

原版<

科技<

考试<

生活百科<

yellow"

全部商品目录<

3.search部分

Search我们也使用一个一行一列的<

来描述，在列中我们使用文本框与按钮来组成搜索界面，并控制<

中右对齐，后续我们会详细讲解关于文本框与按钮，在这大家看到效果就可以。

search"

tablebgcolor="

#b6b684"

width="

right"

inputtype="

text"

button"

value="

搜索"

4.content部分

content这部分内容比较复杂,在<

divid=”content”>

中我们嵌套一个一行一列的<

，在<

中我们首先使用<

div>

来描述了关于首页>

旅游>

图书列表。

接下来我们嵌套了一个<

这个<

也是一行一列的，在<

中通过<

来描述商品目录，<

来分隔信息。

接下来通过<

来显示商品列表的图片。

最后我们又嵌套多个<

来完成图书列表的显示。

在图书列表中，我们使用一个一行四列的<

来描述一行图书信息的显示，向我们上图中，就会使用两个一行四列的<

来显示商品信息。

我们在分析一下关于书籍列表的操作

content"

divalign="

首页&

gt;

旅游&

图书列表&

align="

商品目录<

/h1>

计算机类<

共xxx种商品

images/productlist.gif"

bookcover/101.jpg"

130"

height="

197"

bookcover/102.jpg"

bookcover/103.jpg"

bookcover/104.jpg"

bookcover/105.jpg"

bookcover/106.jpg"

bookcover/107.jpg"

bookcover/code.jpg"

5.foot部分

foot中我们使用两行两列的table来描述，但是第一行中第一列跨了两行，我们要使用rowspan=”2”来控制，在第一行第一列中有一张图片，在第第一行第二列中是CONTACTUS文本，在第二行中第二列中是其它文字信息。

foot"

#efeedc"

tdrowspan="

valign="

top"

images/bottomlogo.gif"

CONTACTUS<

2008&

copy;

BookStoreAllRightsRESERVED

【笔试面试题】

div与span的区别

【重点总结】

本阶段的重点

1.超链接

2.表格

【第二阶段】

关于表单的标签，无论我们使用什么语言来完成web开，必然会用到，所有表单标签我们必须很好的掌握

【内容:

HTML表单标签】

form标签★★★★★★★

form>

标签代表一个表单，表单用于向服务器传输数据。

标签能够包含<

input>

，可以是文本字段，复选框，单选框或提交按钮等。

还可以包含<

textarea>

select>

等。

用

展开阅读全文