标签:基础 宽度 rip 搜索 需要 row lang 自动跳转 href
html(hyper text markup language)----超文本标记语言
html标准---W3C
超文本--在文本内容的基础上,添加更加丰富的信息(图片、动画、声音等)
标记(markup--标签):<单词></单词>---挨着<是标记
标记通常有两层含义:
语言特点: 可以直接被浏览器解析,是一种超文本标记语言,与程序语言不同。
1.双标签: 由开始标签和结束标签构成,内容放入开始标签和结束标签之中
语法:<标签名 属性名="属性值">.....内容....</标签>
属性可理解为人的特征 性别="女" 体重="45" 身高="165"
例如 <div></div> <body></body>.....
2.单标签:只有开始标签,没有结束标签,没有内容
语法:<标签名 属性名="属性值" 属性名="属性值" /> 注意:一定要闭合
例如:<link/> <img/> <meta/> <br/>
<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键可以缩进
1.Html不区分大小写,但是w3c使用的是小写的<body>,不推荐<BODY>
2.Html如果有标签嵌套,必须顺序嵌套,不能交叉
3.单标签一定要闭合,例如<br/>
4.属性:每一个标签有没有属性,有多少属性----已经由w3c规定好
5.属性值:双引号引起来,如<body background="black"></body>
font 设置文本的颜色 文本的字体 文本的大小
<font color="设置颜色" size="设置大小" face="设置字体"> 设置的内容</font>
<b></b> 加粗
<strong></strong> 加粗 加强语气
<i></i> 倾斜
<em></em> 倾斜 加强语气
<u></u> 下划线
<ins></ins> 插入的是文本 例如 * | 之类的
<sup></sup> 上标 使文本上标
<sub></sub> 下标 使文本下标
<p></P> 一段
段落的属性有:
Align(居中方式) 取值 left center right
标题:
<h1></h1> 标题1
......
<h6></h6> 标题6
属性:Align : left center right
Pre标签:预定义标签,保留原有的空格和换行
Div标签:区域划分作用,独占一行,块标签 (p h1 table ul ol )
Span标签:本身并没有什么含义,但是也是网站使用最多的标签之一,结合CSS一起使用构成功能,行内标签 (span em i b 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="居中方式" 取值 left center right
表格中的内容和单元格之间的距离 cellpadding="数值" 默认数值是 2px
表格中的单元格和单元格之间的距离 cellspacing="数值" 默认数值是 2px
表格的背景颜色 bgcolor="颜色值"
表格的背景图片 background="图片地址"(背景图片不能含有中文) ----修饰作用
表格的合并边框线 rules="all" (w3c不推荐使用 用CSS实现)
表格的边框线颜色 bordercolor="颜色值" (不建议使用)
注意:背景图片的优先级高于背景颜色
<tr>的属性:
行的高度 height
背景颜色 bgcolor
背景图片 background
水平对齐方式 align 取值 left center right
垂直对齐方式 valign 取值 top middle bottom
<td>的属性:
背景颜色 height
背景图片 background
宽度 width
高度 height
内容在单元格中的水平对齐方式 align 取值 left center right
内容在单元格中的垂直对齐方式 valign 取值 left center right
合并单元格的问题:
横向合并(即左右合并): 若干个单元格合并为一个单元格
cosplan="数值" 例如:cosplan="3" 横向合并3个单元格
纵向合并(即上下合并)
rowspan="数值" 例如:rowspan="3" 纵向合并3个单元格
语法 <a 属性="属性值"> 内容 </a>
属性:
链接的地址 href="链接的地址" url 绝对地址 或 相对地址
打开目标文件的窗口 target
_blank 在新的窗口中打开目标文件
_self 在原来的窗口打开目标文件(原来的窗口被覆盖)
定义锚点的名称 name
语法 <a href="http://www/taobao.com"> 淘宝 </a> 网络地址
<a href="file:///C:/video/www/test.html"> 本地的html文件 </a> 本地地址
在同一个站点下,在同一个文件夹
目标文件和当前文件在同一个目录,直接写名称
目标文件在当前文件的下一级目录,xx表示文件夹名 xx/文件名称
目标文件在当前文件的下两级目录下 xx/xx/文件名称
目标文件在当前文件的上一级目录 ../文件名称
目标文件在当前文件的上两级目录 ../../文件名称
下载链接
文件不用下载可以直接做链接 .html .jpg
文件必须下载链接 .zip .exe
邮件链接
<a href=mailto:邮件的地址> 内容 </a>
空链接
在当前页面做链接 <a href="#"> 内容 </a>
Javascript链接
<a href="javascript:window.close()"> 内容 </a>
同一个页面的不同区域跳转
定义锚点 <a name="自定义名称"></a> 在页面中的任一处定义 <a></a>之间不加内容,给链接中的target用
跳转锚点 <a href="#锚点名称">内容</a> 跳转到定义锚点的位置
为什么要有字符集,是因为计算机只能处理二进制数据,为了让计算机能够识别人类的语言(0-9、a-z、A-Z、特殊符号),我们就需要对每一个字符进行"编码"
所谓"编码"就是:每一个字符用不同的二进制数表示;
ASCLL编码:用一个字节(8位二进制)来表示字符,共可以显示256
ANSI编码: ASCLL编码的扩展 用于显示本国的语言
在中文操作系统 gb2312 用两个字节(16个二进制) ,共可以表示2^16个字符
繁体操作系统 big5
GBK编码: 对gb2312进行扩充,收录了一些冷门字,罕见字,古汉语.......
Unicode编码:计划将世界所有字符收录,用4个字节(32位二进制)表示一个字符
UTF-8编码:(多国语言编码) 不同的字符,会自动选择合适的编码来进行翻译
描述网页文档属性
http-equiv 模拟的是http文件头信息,当内容从服务器端发送给客户端,告诉浏览器如何正确显示网页信息
字符集: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 多国语言
网页自动刷新: <meta http-equiv="refresh" content="4"/> 间隔4秒网页自动刷新
<meta http-equiv="refresh" content="5;http://www.baidu.com"/> 等待5秒自动跳转到百度页面
Name(设置网页的关键字,描述信息等): <meta name="keywords" content="关键字"> 便于搜索引擎的需要
<meta name="description" content="网站的描述信息"> 便于搜索引擎的需要
<meta name="author" content="网站作者">
标签:基础 宽度 rip 搜索 需要 row lang 自动跳转 href
原文地址:http://www.cnblogs.com/strive-for-life/p/6124184.html