HTML(1)
[*]HTML介绍
html(hyper text markup language)----超文本标记语言
html标准---W3C
超文本--在文本内容的基础上,添加更加丰富的信息(图片、动画、声音等)
标记(markup--标签):<单词></单词>---挨着<是标记
标记通常有两层含义:
[*]表形:每一个标签都具有一定的表现形式
[*]表意:每一个标签都具有一定的意义
语言特点: 可以直接被浏览器解析,是一种超文本标记语言,与程序语言不同。
[*]HTML的标签分类
1.双标签: 由开始标签和结束标签构成,内容放入开始标签和结束标签之中
语法:<标签名 属性名="属性值">.....内容....</标签>
属性可理解为人的特征 性别="女"体重="45"身高="165"
例如 <div></div> <body></body>.....
2.单标签:只有开始标签,没有结束标签,没有内容
语法:<标签名属性名="属性值"属性名="属性值"/>注意:一定要闭合
例如:<link/><img/><meta/><br/>
[*]HTML基本骨架结构
<html>
<head>
<title>网站的标题</title>
</head>
<body>
</body>
</html>
文件的扩展名是xxx.html
html结构说明: 1.<html>含义:告诉浏览器网页的代码用什么格式来解析
2.<head>含义:告诉浏览器网页的汉字用什么字符集,使用的字符集不正确就会出现乱码。
gb2312 简体中文 (汉字操作系统下默认使用的字符集) gbk 国际码 utf-8多国语言
3.<title>含义:便于搜索引擎
4.<body>含义:网站的内容,99%的内容都放入<body></body>中,只有放在该标签中,才能在窗口显示
注意:tab键可以缩进
[*]HTML书写规范
1.Html不区分大小写,但是w3c使用的是小写的<body>,不推荐<BODY>
2.Html如果有标签嵌套,必须顺序嵌套,不能交叉
3.单标签一定要闭合,例如<br/>
4.属性:每一个标签有没有属性,有多少属性----已经由w3c规定好
5.属性值:双引号引起来,如<body background="black"></body>
[*]HTML文本标签
font设置文本的颜色文本的字体文本的大小
<font color="设置颜色" size="设置大小"face="设置字体"> 设置的内容</font>
<b></b> 加粗
<strong></strong>加粗加强语气
<i></i>倾斜
<em></em>倾斜加强语气
<u></u>下划线
<ins></ins> 插入的是文本例如 * | 之类的
<sup></sup> 上标使文本上标
<sub></sub> 下标使文本下标
[*]Html段落标签
<p></P> 一段
段落的属性有:
Align(居中方式)取值leftcenterright
标题:
<h1></h1>标题1
......
<h6></h6>标题6
属性:Align :leftcenterright
Pre标签:预定义标签,保留原有的空格和换行
Div标签:区域划分作用,独占一行,块标签 (p h1 tableul ol... )
Span标签:本身并没有什么含义,但是也是网站使用最多的标签之一,结合CSS一起使用构成功能,行内标签 (span em ib strong u)
注意:一般是块标签内含有行内标签
[*]无序列表
语法:
<ul>
<li>
</li>
<li>
</li>
</ul>
ul的属性:
type 设置列表前面的项目符号的样式 circle(空心圆) disc(实心圆) square(方形)
[*]图片标签(单标签、行内标签)
语法:<img 属性名="属性值" />
属性 : 图片的路径src="图片的地址"(图片要放到同一个站点下,即和html文件放在同一个文件夹)
图片的宽度 width="数值" 以像素为单位的px,但是在html标签中不写单位,如 width="300"
图片的高度 height="数值" 以像素为单位的px,但是在html标签中不写单位,如 height="200"
图片的边框 border="数值"
图片的解释 alt="对图片的描述内容"
(图片和内容左右之间的距离 hspace="数值"
图片和内容上下之间的距离 vspace="数值" ) 通常不用这两个,用CSS 实现
注意:图片等比例缩放,只设置宽度或高度
[*]表格介绍
语法:
<table>
<tr>
<td>
</td>
</tr>
</table>
通常表格<table</table>包括行<tr></tr>行里面包括单元格<td></td>
属性:表格的边框border默认值是0
表格宽度 width
表格高度 height(不建议使用)
居中方式 align="居中方式" 取值leftcenterright
表格中的内容和单元格之间的距离cellpadding="数值" 默认数值是 2px
表格中的单元格和单元格之间的距离 cellspacing="数值" 默认数值是 2px
表格的背景颜色 bgcolor="颜色值"
表格的背景图片 background="图片地址"(背景图片不能含有中文) ----修饰作用
表格的合并边框线rules="all" (w3c不推荐使用 用CSS实现)
表格的边框线颜色bordercolor="颜色值"(不建议使用)
注意:背景图片的优先级高于背景颜色
<tr>的属性:
行的高度height
背景颜色bgcolor
背景图片background
水平对齐方式align 取值 leftcenterright
垂直对齐方式valign取值 topmiddlebottom
<td>的属性:
背景颜色height
背景图片background
宽度 width
高度 height
内容在单元格中的水平对齐方式 align 取值 leftcenterright
内容在单元格中的垂直对齐方式 valign 取值 leftcenterright
[*]表格的扩充
合并单元格的问题:
横向合并(即左右合并): 若干个单元格合并为一个单元格
cosplan="数值" 例如:cosplan="3" 横向合并3个单元格
纵向合并(即上下合并)
rowspan="数值" 例如:rowspan="3" 纵向合并3个单元格
[*]链接
语法<a 属性="属性值"> 内容 </a>
属性:
链接的地址href="链接的地址" url 绝对地址或 相对地址
打开目标文件的窗口 target
_blank 在新的窗口中打开目标文件
_self 在原来的窗口打开目标文件(原来的窗口被覆盖)
定义锚点的名称 name
[*]绝对地址(网络地址)
语法<a href="http://www/taobao.com"> 淘宝 </a> 网络地址
<ahref="file:///C:/video/www/test.html">本地的html文件 </a>本地地址
[*]相对地址
在同一个站点下,在同一个文件夹
目标文件和当前文件在同一个目录,直接写名称
目标文件在当前文件的下一级目录,xx表示文件夹名 xx/文件名称
目标文件在当前文件的下两级目录下 xx/xx/文件名称
目标文件在当前文件的上一级目录 ../文件名称
目标文件在当前文件的上两级目录 ../../文件名称
[*]特殊链接
下载链接
文件不用下载可以直接做链接 .html .jpg
文件必须下载链接.zip.exe
邮件链接
<a href=mailto:邮件的地址> 内容 </a>
空链接
在当前页面做链接 <a href="#"> 内容 </a>
Javascript链接
<ahref="javascript:window.close()"> 内容 </a>
[*]锚点
同一个页面的不同区域跳转
定义锚点 <a name="自定义名称"></a>在页面中的任一处定义 <a></a>之间不加内容,给链接中的target用
跳转锚点 <a href="#锚点名称">内容</a> 跳转到定义锚点的位置
页:
[1]