本期知识点:
HTML介绍
HTML标签
未完待续...
HTML介绍
HTML标签
一.HTML介绍
1.概述:
HTML ( HyperText Markup Language )超文本标记语言
用它编写出文档的文件扩展名是“.html”或“.htm”(微软的操作系统),他是可供浏览器解释浏览的文件格式。你可以使用记事本,写字板或者是专业的IDE如:Dreamweaver等等编辑工具来编写HTML文件。
2.语言特点:
a.简易性:
超级文本标记语言版本升级采用超级方式,从而更加灵活方便。
b.可扩展性:
超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
c.平台无关性:
虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(www)盛行的另一个原因。
3.html的文档结构
a.<html></html>
- <html>标记用于html文件的最前面,用来表示html文件的开始。
- </html>标记则是放在html的最后面,用来表示html文件的结束,两个标记必须一起使用
b.<head></head>
- <head>和</head>构成html文件的头部部分,在此标记对之间可以使用<title> </title>和<script> </script>等等标记对。
- <head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
c.<body></body>
- <body>和</body>是html文档的主体部分,在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记,他们所定义的文本,图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
二.HTML标签
1.META标签
a.概述:
META标记是html语言的head部分的一个辅助性的标记,他位于head和title标记之间,他提供给用户不可见的信息。
b.例:
<meta name="Author" content="作者"> <meta name="Keywords" content="关键字"> <meta name="Description" content="描述">
2.TITLE标签
a.概述:
在头部的<head></head>中,有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里,作为网页的主题。
b.例:
<title>百度一下,你就知道</title>
3.文字上的分隔标签
a.常用的分隔标记:
强制断行标记<br>强制分段标记<p>空格
4.排版的标签
a.文字的置左,置右,置中:
分段标记“<p>”在加上一些简单的属性设定,就可以让其的文字置左,置右,置中。
例:<html> <head> <title>文字的置左,置右,置中</title> </head> <body> <p align = "left">希望有个如你 一般的人</p> <p align = "center">如山间清爽的风</p> <p align = "right">如古城温暖的光</p> </body> </html>
b.置中标记:
使用:<center>内容</center>
例:<html> <head> <title>文字的置左,置右,置中</title> </head> <body> <center>从清晨到夜晚</center> <center>从山野到书房</center> </body> </html>
c.保持原始数
使用:<pre>内容<pre>据格式标记
例:<html> <head> <title>文字的置左,置右,置中</title> </head> <body> <pre> 只要最后是你就好 是你就是你! </pre> </body> </html>
5.字体标签
a.标题标记
使用:<h1>内容</h1>
例:<html> <head> <title>标题标记</title> </head> <body> <h1>标题1</h1> <br> <h2>标题2</h2> <br> <h3>标题3</h3> <br> <h4>标题4</h4> <br> <h5>标题5</h5> <br> <h6>标题6</h6> <br> </body> </html>
b.设置字体标记
使用:<font size=“2” color=“red” face=“黑体”>内容</font>
例:<html> <head> <title>文字字体设定</title> </head> <body> <font size="4" face="黑体" color="red">只要最后是你就好</font> </body> </html>
c.字体变化标记
加粗:<b></b>
斜体:<i></i>
下划线:<u></u>
删除线:<s></s>
上标:<sup></sup>
下标:<sub></sub>
闪烁:<blink><blink>
强调:<em></em>
加强:<strong></strong>
6.背景标签
a.背景颜色
使用:<body bgcolor="red" backgroud="bg.jpg">
例:<html> <head><title>背景颜色</title> </head> <body bgcolor="red"> <font size="4" face="微软雅黑" color="red">背景颜色</font> </body> </html>
7.分隔线标签
a.使用:上一部分<hr>下一部分
例:<html> <head> <title>背景颜色</title> </head> <body> abcdefg<br> <hr color="blue" size="2" noshade> higklmn </body> </html>
8.<img>标签
a.向网页中插入图片
使用:
<img src="D:\Pictures\Saved Pictures" alt="图片加载失败" align="left" border="0" height="800" width="550" title="帆之亦然工作室">
例:<html> <head> <title>图片</title> </head> <body> <img src="D:\Pictures\Saved Pictures\YF.jpg" alt="图片加载失败" border="0" height="800" width="550" title="帆之亦然工作室"> </body> </html>
9.序列标签
a.无序列表
说明:<html> <head> <title>无序列表</title> </head> <body> <ul> <li>第一赛季 <li>第二赛季 <li>第三赛季 <li>第四赛季 </ul> </body> </html>
- 其中<ul>就是无序列表,没增加一列内容,就需要加一个<li>;
- 可以为 <ul>添加属性type="disk"(实心点),type="square"(小正方形)type="circle"(空心点)
b.有序列表
i.
<html> <head> <title>有序列表</title> </head> <body> <ol> <li>第一赛季 <li>第二赛季 <li>第三赛季 <li>第四赛季 </ol> </body> </html>
说明:
- 其中<ol>就是有序列表,没增加一列内容,就需要加一个<li>;
- 可以为 <ol>添加属性type="1"(数字),type="A"(大写字母),type="a"(小写字母),type="I"(大写罗马),type="i"(小写罗马);
ii.可以指定序列的开始数目。
<html> <head> <title>有序列表</title> </head> <body> <ol start="2"> <li>第二赛季 <li>第三赛季 <li>第四赛季 </ol> </body> </html>
c.自定义列表
例:<html> <head> <title>有序列表</title> </head> <body> <dt>第一赛季</dt> <dd>第二赛季</dd> <dt>第三赛季</dt> <dd>第四赛季</dd> </body> </html>
10.特殊字符标签
html中有很多特殊的字符是需要特殊的处理。
< —— <
> —— >
& —— &
" —— "
11.超链接标签
a.连接到其他的文档
例:<html> <head> <title>超链接1</title> </head> <body> <a href="特殊字符.html" target="_blank" >连接其他文件</a> </body> </html>
注意: target="_self" 在自身窗口打开
- 绝对路径:是指从根目录到文件的完整路径。
- 相对路径:是指相对于当前文件的文件位置。
b.网页的内部链接
例:<html> <head> <title>超链接2</title> </head> <body> <a href="#c7">查看章节7</a> <h2>章节1</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节2</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节3</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节4</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节5</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节6</h2> <p>该章节是关于。。。。。。。。。。</p> <a name="c7"> <h2>章节7</h2> <p>该章节是关于。。。。。。。。。。</p> </a> <h2>章节8</h2> <p>该章节是关于。。。。。。。。。。</p> </body> </html>
c.网页的外部链接
例:<html> <head> <title>链接的外部文件</title> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
d.图片的锚点链接
例:<html> <head> <title>图片的锚点链接</title> </head> <body> <img src="D:\Pictures\Saved Pictures\YF.jpg" usemap="#mymap" width=800 height=550></img> <map name="mymap"> <area shape="rect" coords="100,20,30,30" href="http://www.baidu.com"/> <!-- 几个数字 代表矩形的 xy 坐标 以及矩形的长宽 --> <area shape="circle" coords="300,400,300" href="http://www.baidu.com" target="_blank"/> <!-- 几个数字代表 圆形的xy坐标 以及圆点半径 --> </map> </body> </html>
未完待续...