三、HTML

一、HTML简介

1.HTML(Hyper Text Markup Language)超文本标记语言

HTML用于描述网页的一种标记语言，非编程语言；

HTML使用标记标签描述网页，网页都是由HTML标签组成的；

HTML文档包含了HTML标签及文本内容，HTML文档也叫做web页面；

2.HTML版本

HTML版本很多,HTML,HTML+,HTML2.0,HTML3.2,HTML4.01以及当前常用的HTML5,

和XHTML，XHTML和HTML4.01几乎相同，只是XHTML语法更加严格；

3.HTML标签基本语法

<>所包含的关键字,一般成对出现,有开始<>和结束两个标签</>,如<p></p>;

标签之间可以嵌套,先后顺序保持一致即可；

标签不区分大小写,但建议小写为准；

4.HTML格式:<标签>内容</标签>

5.HTML元素:通常HTML标签和HTML元素描述相同的意思,但严格说,一个HTML元素包含了开始标签和结束标签；

6.HTML框架

<!DOCTYPE html>

<html>

<head>

<meta>

</head>
<body>

</body>
</html>

:注释标签,网页上不会显示

<IDOCTYPE>声明:定义文档类型，不同版本的HTML会对应不同的文档声明;

HTML5 <!DOCTYPE html>

HTML4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、HTML4基本标签

1.标题 <hx></hx> (x代表1-6)

1)通过<h1>-<h6>标签来定义的,其中<h1>代表最高级别的标题,重要性最高,依次递减,<h6>级别最低,标题标签只用于标题，不要为了生成粗体文本而使用标题；

2)标题的对齐属性 align=”属性值”

属性值：left 左对齐 right右对齐 center 居中对齐

例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>标题</title>
</head>
<body>
<h1 align="left">标题左对齐</h1>
<h1 align="center">标题居中对齐</h1>
<h1 align="right">标题右对齐</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>

显示效果：

3)提示：对于不同的浏览器,其确切的点阵尺寸的大小也不相同,但<h1>标题大约是标准文字高度的2~3倍,<h6>标题则比标准字体略小；

2.段落 <p>段落文字</p>

1)通过标签<p>来定义,浏览器会自动在段落前后添加空行.（<p></p>是块级元素）

2)换行标签 <br/>

作用：在不产生新段落的情况下将当前文本强制换行(新行),一个<br/>代表一次换行,<br>是唯一可以使文字分行的方法,<p>可以使文字分段；

3)不换行标签 <nobr>不换行文字</nobr>

作用：网页中若文本过长,浏览器会自动对这段文字换行,<nobr/>可禁止自动换行；

例：

代码

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>段落</title>
</head>
<body>
<p>江南的花香草香，风香雨香，即使太阳下的泥土,<br> 也生发出屡屡诱人的香味来。应一缕茶香牵挂， 因一桩久久不能释怀的心事，我偕同爱人出城， 向江西省贵溪市阳际峰国家自然保护区进发， 去寻知父亲走过的古盐道。 </p>
</body>
</html>

显示效果：

3.图片 <img src= ” url ” alt= ” some_te ” >

1)通过标签<img>来定义，<img>是空标签，即只包含属性，没有结束标签；

2)网页中图像格式通常有3种：JFG，JPEG,PNG；

3)img元素基本属性定义

属性	描述
src	图像的源文件(所在路径)
alt	提示文字
Width,height	宽度和高度
border	边框
align	对齐方式(left,center,right)

①图像的源文件src： <img src= ” 图像源文件所在路径>

路径分为：

绝对路径:如网址图像 http://www.w3school.com.cn/images/boat.gif

相对路径:如./image/boat.gif (代表当前级的上一级image文件夹中的boat.gif图像，../代表查找上二级，./查找上一级)

还有一种路径是本地磁盘路径，也是一种绝对路径，需要注意的是C:\Users\Administrator\Desktop这里的\需改为/，并且需要添加file:///通过浏览器开发者工具查找其端口号,这里WebStrom有一个内置服务器提供端口号，然后将图像路径改为http:// 格式；

②图像提示文字alt：作用一是当浏览该网页时，若图像下载完成，鼠标停留在图像上，鼠标旁边会出现提示文字，作用二是当图像下载失败，在图像的位置上就会显示提示文字；

③宽度width和高度height：单位是像素，若不定义会按照原始尺寸显示；

④边框border：如 border=”1”; (默认边框是黑色实线，border规定图像周边的边框宽度，也可以说是增加或去掉图像的边框)一般情况下不推荐使用，用css样式

注意：默认图像是没有边框的(除非图像在a元素内部,浏览器通常会把包含在<a>标签中的图像显示在两个像素宽的边框里,以表示读者可通过选择这个图像来访问相关联的文档.)

⑤align属性：对齐属性值left right top middle bottom 不介意使用，但所有浏览器都支持该属性；

需注意的是该属性定义了图片相对于周围元素的水平和垂直对齐方式；标准没有定义图像相对于其他文字时HTML图像通常会在行中伴随一行文字显示，align属性可用于控制带有文字包围的图像的对齐方式

例：

代码

代码
<!DOCTYPE html>
<html lang="en">
<head>
    	<meta charset="UTF-8">
    	<title>图像</title>
</head>
<body>
<img src="../img/TexturesCom_ManmadeBoxes0006_12_S.jpg" alt="急救包" width="100" height="100" border="5px" align="left">
<p>江南的花香草香，风香雨香，即使太阳下的泥土,也生发出屡屡诱人的香味来。</p>
</body>
</html>

显示效果：

不添加align属性

align=”left”

align=”center”

align=“right”

4.文本标签

①<font>文字</font> 规定文本的字体、字体尺寸、字体颜色；

属性：size=”字体尺寸值” (取值1-7)

color=”字体颜色”

②<b>文字</b> 规定粗体文本；

③<sub>下标文本</sub> 定义下标文本

<sup>上标文本</sup> 定义上标文本

④<i>斜体文本</i> 显示斜体文本效果

⑤<u>下划线文本</u> 为文本添加下划线

⑥<pre>预格式化文本</pre> 定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体.多用于表示计算机的源代码.

注意：可导致段落断开的标签(标题,<p>,<address>)绝不能包含在<pre>所定义的块里.

例：

代码

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
<font size="7" color="red">文字</font>
<b>粗体</b>
H<sub>2</sub>0
2<sup>2</sup>=4
<i>斜体</i>
<u>下划线</u>
<pre>
    int i;
    for(i=0;i<10;i++);
</pre>
</body>
</html

显示效果

5.HTML列表--制作菜单、标题、导航栏等

1)有序列表

<ol>

...

</ol>

属性：type=”排序方式”(默认用阿拉伯数字，也可用a/A/i/I)

2)无序列表

<ul>

...

</ul>

属性：type=”circle”(默认使用粗体小黑圆点，也可用小圆圈)

3)自定义列表是项目及注释的组合，多用于图文混排以及网页尾部的相关信息；

<dl>

<dt>自定义列表项</dt>

<dd>自定义列表项的定义</dd>

.....

</dl>

提示：

①列表可以嵌套，即在<li>标签内添加新的列表，用于制作多级菜单等；

②列表标签是组合标签，一般不单独使用，且最好不要插入其他标签，但li标签的的列表项内部可以使用段落，换行符，图片，链接以及其他列表等；

6.HTML水平线 <hr/> 在HTML页面中创键水平线，可用于分割内容

属性：size=”” 大小

width=”” 长度

color=”” 颜色

align=”” 对齐方式

noshade 布尔属性，谷歌浏览器中规定水平线呈现为纯色，而不是有阴影的颜色，html5不支持该属性；火狐浏览器规定水平线呈现圆角效果；

7.HTML链接 <a> 设置超文本链接，可是字词图像

属性：href 描述链接的地址

target 定义链接文档何处显示

title 当鼠标滑过链接显示的文字

锚点：

1)页面内部跳转：当网页特别长的时候使用，如淘宝回到顶部

<a href="#跳转位置<a>的name值">点击跳转到指定位置</a>

<a name="">跳转到此处</a> //可使用id代替name

2)页面之间跳转：

<a name="">跳转到此处</a> //可使用id代替name

8.HTML表格

<table>

<tr>

<th>表头单元格</th>

</tr>

<tr>行

</tr>

</table>

属性：border 边框属性，不设置则不显示边框

合并单元格：注意合并几行/列需删除此行/列后面多出的部分

合并行colspan="合并的行数"

rowspan="合并的列数"

9.HTML表单

<form>

<input type="text"> //文本

<input type="password"> //密码输入框

<input type="button"> //普通按钮

<input type="submit"> //提交按钮

<input type="reset"> //重置按钮

/*单选框按钮，需选项加设置相同的name值*/

/*复选框按钮 value是数据传输的值*/

/*下拉列表*/

</select>

/*多行文本域*/

</form>

10.HTML布局 <div></div>

盒子模型：div相当于一个盒子，盒子可以嵌套其他小盒子，可以将网页看做一个大的盒子中又放了很多小盒子，小盒子里面还可以其他的小盒子以及内容；即可以把<div>看做一个容纳网页元素的容器

11.<span></span> 此标签没有语义，只是为了给文字设置单独的样式，非强调；

猜你喜欢