蒂姆.伯纳斯.李------万维网(www)发明人,没有他就没有html
html:HyperText Markup Language 超文本标记语言------用来对网页中内容进行描述
超文本:比普通文本表达更为丰富的内容;
标记:标识符号,即html中的标签,为了凸显内容的某些属性;
语言:html不是编程语言而是与浏览器交流的语言,浏览器会将html文件翻译为人们看到的网页;
文字、图片、音频、视频都可以通过HTML呈现在网页中
HTML源文件后缀名为.html或者.htm(DOS时代后缀名最多只能3位,现在推荐用.html为后缀)
----------------------------------------------------------------------------------------------------------------------------------
HTML标签分类:
单标签(空标签):<br />表示换行
双标签(围堵标签):<p>hello world!</p>,有开始标签<p>和结束标签</p>
HTML标签书写标准:
这些标准有些就算不遵守也不会对内容产生影响,但是出于标准化的考虑,以及为了阅读方便,强烈建议遵循这些规范
1,所有标签都写在尖括号<>之中
2,所有标签都有开始和结束,即使是单标签也要有表示结束的/,比如<br />、<img />、<hr />
3,建议所有标签及其属性和值中的字母都是小写
4,标签与属性之间,属性与属性之间必须有空格分开
5,属性的值须加上双引号/单引号
6,写出的属性必须有值,比如<p color="red" size="5">hello world!</p>;
我们想让一个分割线没有阴影,所以写出了noshade这个属性,但是传统意义上noshade就是noshade,
没有值这种东西,这时候我们为了标准统一,就让属性等于自己,例如<hr noshade="noshade" />
7,属性可写可不写,就算不写,系统自动会用默认值代入
8,标签与标签之间一定要正确嵌套
正确例子:<p>hello w<b>orl</b>d!</p>;
错误例子:<p>hello w<b>orld!</p></b>;也许这种错误实际显示没问题,但是标签不能交叉,这不符合规范
标签格式:
双标签:<开始标签 属性1="值1" 属性2="值2" 属性n="值n">内容内容内容内容</结束标签>
单标签:<开始标签 属性1="值1" 属性2="值2" 属性n="值n" />
无属性单标签:<开始标签 />
html文档格式:
查看html文档时,ctrl+home回到文档开头;ctrl+end跳到文档末尾;ctrl+f查找关键字
<html>
<head>
<title>标题标题标题</title> <!--这是注释-->
</head>
<body>
内容内容内容内容
</body>
</html>
<html>标签制定当前文档类型是网页;
<head>叫做网页的头部,包含网页的基本信息基本设置,其中<title>用来定义网站标题,会显示在浏览器标签中;
<body>所有能在浏览器页面看到的内容全部在body内部;
<!--注释注释-->这是html文档中的注释写法;
从上可见网页包含两部分<head>和<body>
----------------------------------------------------------------------------------------------------------------------------------
HTML标签分类:
1,文本修饰
1-1)<font></font>
属性:color:red,green,blue,yellow,默认为黑色black;
size:取值范围1~7,默认为3;
face:楷体/KaiTi,黑体/SimHei,宋体/SimSun,微软雅黑/Microsoft YaHei,仿宋/FangSong;
1-2)<body></body>
属性:text:设置整个页面的文本颜色;
bgcolor:设置背景颜色;
background:背景贴图(值为图片路径);
bgproperties:背景属性(值设置为fixed表示背景固定(有些浏览器不支持));
1-3)<big>内容</big>呈现放大的文本;
<small>内容</small>呈现缩小的文本;
1-4)<b>内容</b> 或者 <strong>内容</srong>,设置内容文本为加粗;
1-5)<i>内容</i> 或者 <em>内容</em>,设置内容文本为斜体;
1-6)<u>内容</u> 或者 <ins>内容</ins>,表示给内容文本加下划线;
<s>内容</s> 或者 <del>内容</del>,表示给内容文本加删除线;
1-7)<sup>内容</sup>,将内容文本变为上标形式;上标------superscript
<sub>内容</sub>,将内容文本变为下标形式;下标------subscript
练习:将一首带注释的唐诗按照格式显示在网页中。
2,文字排版
2-1)<p>内容</p>
属性:align(表示内容文本的对齐方式,值为left、center、right);
2-2)<h1>标题</h1>.........<h6>标题</h6>
h1~h6都是表示标题,字体大小依次递减
属性:align(表示标题文本的对齐方式,值为left、center、right);
2-3)<hr /> 水平分割线
属性:width(值可以为800px,或者80%,表示占据总宽度的80%);
size="5"(表示分割线的厚度);
color="red"(分割线颜色);
noshade="noshade"(无阴影);
2-4)<pre>预先格式化的文本内容</pre> predefined预定义格式化文本
2-5)<center>内容</center> 将内容文本居中
2-6)<br /> 表示换行
2-7)<div></div> division,块元素,单独占一行;<span></span> 行内元素,两个span元素可在同一行
块元素:<div>、<p>、<h1~h6>、<pre>、<li>......
行内元素:<font>、<b>、<strong>、<i>、<em>、<small>、<big>、<sup>、<sub>、<img>......
一定要用块元素包含行内元素,而不是反过来,否则排版将极不方便。
3,图片
3-1)<img src="图片文件路径" alt="图片无法显示时就显示这句话" title="balabala" />是行内标签,且是单标签
属性:src,source,值为图片文件路径;
width,宽度;height,高度(宽度,高度只要设置一个,另一个就会按比例自动变化,除非要改变比例);
align(left,right,没有居中)想居中可以加<center>标签;
alt,显示图片无法显示时的文本(此属性必须写);
title,鼠标放到图片上去后显示的的文本内容
hspace,vspace,设置图片水平、竖直方向与边缘之间的空白大小;
border,<img src="路径" alt="文本" border="5"/>设置图片边框,一般通过style设置边框而不用此属性;
4,链接
超链接,anchor锚,双标签,行内标签,<a>标签禁止内部嵌套其它<a>标签
<a href="url" target="_blank">内容内容(文字或图片)</a>;
href表示hypertext reference;url(Uniform Resource Locator统一资源定位器);
url就是一个网址,指向服务器上某一处的文件资源,指定的资源有唯一性;
URL例子:http://news.ifeng.com/?_114so 首要的http://表示HTTP协议,必不可少;
file:///------表示本机文件;http://------表示网络文件;ftp://------表示FTP下载协议;Thunder://;ed2k://;
target="_blank"表示从新页面打开此网址,默认从原页面打开target="_self";
target="_top"在顶部打开;target="_parent"在父窗口打开(一般不用);
超链接的种类:
1,外部链接:链接到别人的网站,比如用在友情链接之类的地方,可以提高搜索引擎PR值(PageRank访问量)
或者用于采集其它网站的信息(双方必须协商知情,否则是盗链行为);
2,内部链接:链接到自己网站的其他页面;
3,文本链接:<a href="url">文本内容</a>;
4,图片链接:<a href="url"><img src="" alt=""/></a>;
5,下载链接:<a href="bta.rar">点击下载</a> href的值应为本地文件路径;
6,空链接:点了之后没有反应<a href="#" >空链接</a>,一般用于测试CSS样式;
<a href="JavaScript:void(0)" >JavaScript空链接/死链接</a>用来配合JS程序;
7,电子邮件链接:<a href="mailto:ssyhf@qq.com">联系我们</a>,自动关联邮箱工具;
<a href="mailto:ssyhf@qq.com?subject='Hi!'">联系我们</a>,自动添加邮件主题信息;
8,锚点链接:首先定义锚点<a name="top"></a>;使用锚点<a href="#top">回到顶部</a>,点此可回到顶部;
也可以链接到另一份html文档的top锚点<a href="another.html#top">在文档间飞翔</a>;
5,表格
<table border="3" bordercolor="green" width="500" bgcolor="yellow" align="center" cellpadding="10" cellspacing="10" rules="all">
<tr>
<td colspan="2">11</td>
<td>12</td>
</tr>
<tr>
<td rowspan="2">21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
单元格合并
<table width="300" align="center" border="3" rules="all">
<caption><font size="5">工作证</font></caption>
<tr>
<th width="40">姓名</th><td width="80"></td>
<td width="80" height="120" align="center" rowspan="3"><img src="tableIDcard.jpg" width="80" alt="ID_card"/></td>
</tr>
<tr>
<th>部门</th>
<td></td>
</tr>
<tr>
<th>职务</th>
<td></td>
</tr>
<tr>
<th height=40>时间</th>
<td colspan="2"></td>
</tr>
</table>
6,列表
6-1)<ol> 表示有序列表,默认以1,2,3,4........为序号(属性type="a"则以abcde为序号,type="A"则以大写
<li>内容项</li> 字母为序号,type="i"则以小写罗马数字为序号,type="I"则以大写罗马数字为序号);
<li>内容项</li> 属性start表示从哪个序号开始,start="2",则数字序号从2开始;
<li>内容项</li> type属性对<ol>和<li>都有效;
</ol>
6-2)<ul> 表示无序列表,默认以黑圆点为序号(属性type="circle"则以黑圆圈为序号,type="square"则
<li>内容项</li> 黑方块为序号,type="disc"则恢复默认以黑圆点为序号;
<li>内容项</li>
<li>内容项</li> type属性对<ol>和<li>都有效;
</ul>
6-3)列表的嵌套
<ul>
<li>内容项1
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</li>
<li>内容项2</li>
<li>内容项3</li>
</ul>
6-4)自定义列表
<dl>
<dt>内容项1</dt>
<dd>111</dd>
<dd>222</dd>
<dd>333</dd>
<dt>内容项2</dt>
<dt>内容项3</dt>
</dl>
7,表单(控件)
用户名输入框,密码输入框,验证码输入框都是表单
<form></form>块元素,双标签,一般在<form>内部用<table>排版
属性:name,method(get,post),action(服务器接收到提交信息之后的行为),οnsubmit="JS函数",
enctype
表单元素:<input type="text" name="username" size="20" maxlength="30" />文本输入框
<input type="password" name="pwd" size="20" maxlength="30" /> 密码输入框
<input>本身是行内元素
表单提交:<input type="submit" value="提交" name="submit" />提交按钮
<input type="reset" value="重写" />重设reset按钮
8,框架
9,其他
9-1)<marquee color="red" width="600">滚动内容</marquee> 表示横向滚动内容
属性:color;width;height;direction(right,left,up,down);scrollamount(滚动速度);
scrolldelay:滚动延迟(单位是ms);behavior(scroll,slide,alternate);
不推荐使用<marquee>标签
9-2)<bgsound src="counting star.mp3" loop="-1"/>为页面插入背景音乐(src的值为音频文件的路径)
loop="-1"代表音乐无限循环;
有些浏览器不支持,有些必须用插件才支持;
9-3)<meta>标签描述了html页面的基本信息,被包含于<head>中
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />(http:超文本传输协议)
http-equiv表示服务器通知浏览器用什么字符来显示本页面;
content="text/html"表示此文档是大类text文本文件下的html文件;
charset="utf-8"设置字符编码为utf-8;
<meta http-equiv="refresh" content="3;http://www.bing.com" />
表示本页面经过3秒后,跳转到一个新页面http://www.bing.com,一般用在公司域名变更的时候;
<meta name="author" content="giveup_skyland" />表示网页作者为givup_skyland
<meta name="copyright" content="giveup_skyland" />表示网页版权所有人为giveup_skyland
(必写)<meta name="keywords" content="csdn博客,web前端" />给出网站关键词,搜索这些词可以查到本网站
(必写)<meta name="description" content="本网站是一个.........">给出网站的描述,即搜索后显示的摘要
-------------------------------------------------------------------------------------------------------------------------
HTML字符实体:
空格 1) (别忘了分号)。2)全角输入法(中文输入法)直接敲空格,浏览器会认为是一个空白汉字。
右尖括号(大于号) >
左尖括号(小于号) <
& &
¥ ¥
版权符号 ©
注册商标 ®
注册中的上标 ™
HTML颜色表示:
http://www.runoob.com/html/html-colors.html
字符编码:
ASCII:每个字符对应一个字节(1Byte=8Bit),但只编码了英文字母和常用符号,不通用;
Unicode:每个字符对应4个字节,编码了世界上所有语言的符号,通用,但是对于纯英文文本浪费内存及带宽;
UTF-8:优化了的Unicode码,不同字符对应字节数不同,既通用,又不浪费内存和带宽,推荐使用;
GB2312:80年代专门为了简体中文而创造的编码;
ANSI:你的计算机所用操作系统的编码(不同计算机不一样);
如何避免乱码?
要时刻注意编码的一致性:
1,HTML文档开头通过<meta charset="utf-8" />来规定文档所用编码;
2,文档编辑器(editplus、notepad++等等)设置的编码;
3,浏览器编码方式;
4,php的字符集设置;
5,MySQL数据库字符集设置;
必须保证各方面字符集设置一致