第1天html笔记Word文档格式.docx
- 文档编号:22588559
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:33
- 大小:599.19KB
第1天html笔记Word文档格式.docx
《第1天html笔记Word文档格式.docx》由会员分享,可在线阅读,更多相关《第1天html笔记Word文档格式.docx(33页珍藏版)》请在冰豆网上搜索。
html>
●HTML标签通常是成对出现的,比如<
b>
和<
/b>
●标签对中的第一个标签是开始标签,第二个标签是结束标签
●绝大多数的标签都具有属性,建议属性值使用引号引起。
例如:
<
bodytext=”red”>
●大多数标签是可以嵌套的
b)Html创建★★
Html文件可以直接使用文本编辑器来创建,保存时,后缀名为html或html
整个文件是在<
与<
/html>
标签之间在<
标签间有<
head>
body>
子标签。
c)空的html标签★
●没有内容的HTML元素被称为空元素。
空元素是在开始标签中关闭的。
●<
br>
就是没有关闭标签的空元素(<
标签定义换行)。
●在开始标签中添加斜杠,比如<
br/>
,是关闭空元素的正确方法,HTML、XHTML和XML都接受这种方式。
●即使<
在所有浏览器中都是有效的,但使用<
其实是更长远的保障。
d)Html大小写不敏感★★
HTML标签对大小写不敏感:
P>
等同于<
p>
。
许多网站都使用大写的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★★★★★★
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="
4"
color="
white"
文学<
/font>
生活<
计算机<
外语<
经管<
励志<
社科<
学术<
少儿<
艺术<
原版<
科技<
考试<
生活百科<
yellow"
全部商品目录<
3.search部分
Search我们也使用一个一行一列的<
来描述,在列中我们使用文本框与按钮来组成搜索界面,并控制<
中右对齐,后续我们会详细讲解关于文本框与按钮,在这大家看到效果就可以。
search"
tablebgcolor="
#b6b684"
width="
right"
Search
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="
2"
valign="
top"
&
images/bottomlogo.gif"
CONTACTUS<
copyright&
2008&
copy;
BookStoreAllRightsRESERVED
【笔试面试题】
div与span的区别
【重点总结】
本阶段的重点
1.超链接
2.表格
【第二阶段】
关于表单的标签,无论我们使用什么语言来完成web开,必然会用到,所有表单标签我们必须很好的掌握
【内容:
HTML表单标签】
form标签★★★★★★★
form>
标签代表一个表单,表单用于向服务器传输数据。
标签能够包含<
input>
,可以是文本字段,复选框,单选框或提交按钮等。
还可以包含<
textarea>
select>
等。
用
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 笔记