超文本标记语言HTML知识NOTES_动态网页和静态网页的扩展名-优快云博客

开始标记告诉浏览器从本处开始标记所表达的功能，再由结束标记告诉浏览器结束。<标记>内容</标记>，<标记>是字母关键组成的标记，如<div></div>组成一个层，<table></table>组成一个表格，内容是被标记修饰的部分。双标记可以多层嵌套，一个标记对的结束标记与最近一个标记对的开始标记配对，标记对不能交叉。

网页的最基本标记对为<html></html>表示html语言，其下面分成<head></head>、<body></body>，把头部信息放在<head>标记对中，如主题、字体编码设置，而正文等都放在<body>网页中。主题标记是在头部head里面的，段落p在body中。

2、常用HTML标记和格式

2.1、正文标题

标题设置，<hn>主题文字</hn>，n的范围为1-6，数字越大文字越小

2.2、设置段落

<p>段落</p>，段落中的空格添加，需要显示多个空格，可以加上多个“ ”，若不加“&nsp;”浏览器在解释HTML文件的多个空格时只会保留一个空格。

2.3、强制换行

<br>

2.4、给代码添加注释

2.5、文字的修饰

粗体与斜体：<b></b>粗体，<i></i>斜体，下划线<u></u>，删除线<s></s>

2.6、上标与下标

<sup></sup>上标，<sub></sub>下标

3、字体标记

3.1、字体大小，<font>要放大的文字</font>；设置字体大小：<font size="1">文字</font>，数字越大字体越大1-7；

3.2、字体颜色，<font color="">文字</font>，color可为rgb颜色值，如#000000，也可以用颜色的单词表示，如red

3.3、设置标题字体样式，<h1>标题</h1>，数字1-6；

3.4、物理字体，<TT>文字</TT>将字体设置成打字机字体，物理字体并不被font标记包含着，物理字体可以用来单独表现文字；逻辑字体，<EM></EM>强调文字，<STRONG></STRONG>字体加重，<CODE></CODE>显示编程代码，<SAMP></SAMP>显示示例文字，<KBD></KBD>显示键盘按键文字，<SMALL></SMALL>缩小文字，<BIG></BIG>放大文字

4、文字布局

4.1、行的控制

<p>可以单独使用：文字1<p>文字2，文字1后面有一对<p>，简写为<p>；强制换行标准写法：<br/>；不换行控制<nobr></nobr>

4.2、文字对齐，align="#"，#为方位：left、right、center，align可以放在p、div里面，表示文字在标记中向哪个方偏移，可以包括文字、图片。居中还可以用<center></center>

4.3、段落设置，<p></p>

4.4、列表，无序列表

<ul>

</ul>，决定无序的是ul，li只是里面的一列表项

有序列表

<ol>

</ol>，决定有序的是ol，在多个表项中，系统自动按顺序排列

4.5 用其他方式修饰文本

4.5.1、欲格式化文本在网页中输出的是在代码中的样式，因为如果代码没有欲格式化，就会去掉中间的空格。<pre>文字</pre>

4.5.2、计算机输出格式

<code></code>代码样式小型固定宽度字体显示的文本

<kbd></kbd>代码样式固定宽度字体渲染

<tt></tt>代码样式固定宽度字体渲染的文本

<var></var>代码样式斜体字渲染

4.6 制作滚动文字

使文字滚动<marquee direction=“”></marquee>，默认为从左到右循环滚动，direction有left、right、up、down；scrollamount内容滚动速度，behavior设置滚动方式，默认scroll循环滚动，当值为alternate将来回循环滚动，值为slide内容滚动1次即停止，不会循环，还有loop属性可设置滚动循环次数，默认无限制；scrolldelay内容滚动时间间隔，bgcolor内容滚动的背景色，width设置内容滚动背景宽度，height设置内容滚动背景高度

5、图像和链接

5.1图像的基本语法：插入图像<img src="#">，#表示图像url路径，如:<img src="cn.jpg">，img标记是放在body里面的。

图像无法显示时候的提示信息，参数alt表示鼠标指针在图片上面时显示交互文本信息，图像不正常显示的时候，在图像的区域显示alt中的文本，即使没有看到图像，也可给用户提供图像的主题。<img src="cn.jpg" alt="风景">

5.2 控制图像的大小

5.3图像与文字对齐

img中的align来决定左右、上下、中间middle

5.4 图像的边框

<a href="url"><img src="cn.jpg" alt="风景" width=“400px” height=“300px” border=“0px”></a>带超链接的图片

5.6 文字链接

<a href=" ">文字链接</a> ；

超链接网页的打开方式，<a></a>是链接代码，属性target表示链接的网页在浏览器中的打开方式，属性值可为_blank在新浏览器窗口打开网页,_parent将要链接的文件载入含有该链接框架的父框架或父窗口中，如果含有该链接的框架不是嵌套的，则浏览器全屏窗口中载入链接的文件,就像_self参数一样，_self在同一框架或者窗口中打开所链接的文档,_top在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

链接的注释：当鼠标指针放在文本链接上时候，稍后会出现一行文字注释，关键字为title

5.7图片链接

5.8锚点链接

点击带有命名锚的地址直接跳转到一个页面的锚点位置，这样打开网页后直接指向某一段落。

<a name="锚点名">文章中的文字</a>

定义命名锚后，链接中要指定这个命名锚，在名称前加#，使用name属性，要设置的两个方面：设定name的名称，设置一个href指向这个name

<a href=“#html”>点击到锚点链接</a>

5.9 邮箱地址链接

<a href="mailto:邮箱">作者的邮箱</a>

5.10相对路径与绝对路径

除超链接外，网页中还有背景音乐地址、css文件等。

相对路径：指的是文件所在位置与其他文件或文件夹的关系，也可以说是相对的位置，如HTML同一个目录的文件引用html超链接代码：c：\intepub，若源文件和引用文件在同一个目录，可以直接引用文件名。

在in.html加入info.html超链接：<a href="info.html">info.html</a>（在同一个目录），<a href="../info.html">info.html</a>（在上一级目录），<a href="../../info.html">info.html</a>在不同目录，<a href="html/info.html">info.html</a>在下级目录

绝对路径：带域名文件的完整路径

6、表单

6.1概述：表单元素在HTML网页中不属于动态技术，只是一种数据提交的方法，表单不是表格，不用来显示数据、布局网页，它提供一个界面、入口便于数据提交。<form></form>

表单是一个能够包含表单元素的容器，表单元素是能够让用户在表单信息中输入信息的元素。

6.2表单数据的传递方式

表单的两个属性：action表示表单提交后发送的url地址、method发送的方式

input中可选的有：text、password、CheckBox多选框、radio单选框、hidden、submit提交、reset重置按钮

6.3 文本和密码框

文本框：<input type="text">，密码框：<input type="password">

6.4 单选框和复选框

<input type="radio">单选框是在表示表单中有多个选项，且只能选一个的情况下使用。当选择一个选项后，为了区别这几个选项属于哪个单选框，用属性name表示。如果想指定某个选项处于选中状态，用checked在input中为radio类型里表示选状态，从第一个input结束到下一个input开始前的值表示前一个input的选项值。

<input type="checkbox">复选框

6.5 下拉列表与文本域

下拉列表是可以选择的列表；文本域是可以输入多行文本的区域，在表单中常常用到

文本域：可输入多行文本、大量文字<textarea>文本内容</textarea>

设置文本域的行数、列数：<textarea name=book rows=7 cols=10>文本内容</textarea>

6.6 按钮 <input type="submit" value="提交">

6.7 图像域、文本域、隐藏域

<input type="image" src="图片路径"/>上传图片、显示图片

<input type="file" />上传文件

当传给程序的数据不一定需要浏览者填写，可以用隐藏域传数据

7、表格

<table><table/>，<tr>标记对表示表格的行，<th>标记对表示表头，<td>标记对表示表元

7.1 跨多行、多列表元

7.2 设置表格具体属性、内容

表格具体属性设置：边框border，宽度width，高度height。表格文字对齐<tr/d align=#></tr/td>，<th valign=#></th>，#：left、right、center

表格在网页中对齐：<table align= border= width=500>

8、框架

8.1 用框架组织网页

框架页可以向浏览器中装载多个HTML网页文件，每个frame里的网页相互独立

框架的结构：框架页面上有多个帧frame，每个HTML文件占据1帧，而多个帧可以同时显示在同一个浏览器窗口中，组成一个大帧，包含多个HTML文档的HTML文件（框架集页面）。帧常用的使用方法是在一个帧中导航链接，然后将需要变化的内容HTML文件显示在另一个帧中。

<frameset></frameset>框架，<frame></frame>标记对放在<html>标记对下的head后面。

8.2、框架分栏

1、框架垂直分栏：frameset中用cols表示，后面的数字表示列宽。

2、框架水平分栏：<frameset rows="50%,50%">

3、常用属性：设置不可调节框架大小，网页文档frame中使用noresize=“noresize”

4、浏览器不支持框架：以前旧的浏览器中不支持框架，为了给予不支持框架浏览器友好提醒，可以用<noframes></noframes>显示文字，说明该浏览器不支持框架。

5、设置框架边框：在frameset中frameborder属性表示yes/1，no/0

6、设置滚动条：frame里面scrolling=auto，yes，no

8.3、框架链接

导航框架是在网页框架的frame里加入name属性，然后通过<a>标记的链接，并用target等于frame的名称。

</head>

<a href="http://www.163.com" target="myframe">导航链接</a> 点击上一个加载完成的网页的导航链接将跳转到163

内联框架：存在于<body>的单个HTML文件中，可以链接其他网页并显示，在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫作浮动框架。<iframe></iframe>

9、网页中的动态图文和多媒体

9.1移动属性的基本语法

图片的移动：<marquee width= height= bgcolor=“#666666”><img src="图片.gif"></marquee>

9.2设置对象的移动

移动方向direction，移动方式beahvior（scroll循环移动、slide只移动一个回合、alternate来回移动），移动次数loop，文本移动速度scrollamount，延时scrolldelay（1000毫秒表示1秒），移动区域有限，用width、height设置宽高

9.3 网页多媒体

网页多媒体可以播放flash、mid、wav、mp3等格式文件的多媒体文件，可以直接在标记中插入文件。<embed src=url>

设置自动播放：autostart=TRUE/FALSE；循环播放：loop=TRUE/FALSE/number

设置面板的隐藏：hidden=TRUE/FALSE

设置面板大小：width=，height=；背景颜色：bgcolor

设置对齐方式：align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom

10、DIV布局

div标记主要用来布局，可以作为容器使用，里面可包含其他对象：表格、表单、文本、图像等；div中可嵌套div，层数没有限制。div和span元素最大的特点是默认的都没有对元素内的对象进行任何格式化渲染，主要用于应用样式表，div是块元素，span是行内元素。

<div>

<div>第一个子层</div>

<div>第二个子层</div>

</div>

10.1 设置div选择符

#开头的为id选择符，.开头的为类选择符

<html>
    <head>
        <title>测试</title>
        <style type=text/css>
            /*设置选择符*/
            #header{}
            #logo{}
            .ad468{}
            #banner{}
            #content{}
            #newsad{}
            #news{}
            #bottom{}
        </style>
    </head>
    <body>
        <div id="header">
            <div id="logo">logo-网站图标</div>
            <div class="ad468">468像素广告</div>
        </div>
        <div id="banner">导航条</div>
        <div id="content">
            <div id="newsad">新闻右边的广告</div>
            <div id="news">新闻内容</div>
        </div>
        <div id="buttom">网页底部</div>
    </body>
</html>

10.2 设置css修饰div效果

用样式表修饰内容，样式表是用css来控制html标记，使标记达到预定效果。

<html>
	<head>
		<title>测试</title>
		<style type=text/css>
			/*设置选择符*/
			#header{
				width:778px;
				margin:auto;
				border:1px solid #bbbbbb;}
			#logo{
				width:180px;
				height:100px;
				float:left;
				border:1px solid #ccc;}
			.ad468{
				width:468px;
				height:60px;
				float:left;
				margin:20px 0px 0px 100px;
				border:1px solid #ccc;}
			#banner{
				width:778px;
				height:30px;
				margin:5px 0px;
				text-align:center;
				border:1px solid #ccc;}
			#content{
				width:480px;
				height:260px;
				margin:5px;
				border:1px solid #ccc;}
			#newsad{
				width:260px;
				height:260px;
				margin:5px;
				float:right;
				border:1px solid #ccc;}
			#news{				
				width:480px;
				height:260px;
				margin:5px;
				border:1px solid #ccc;}
			#bottom{
				width:778px;
				margin:auto;
				height:80px;
				margin-top:10px;
				border:1px solid #ccc}
		</style>
	</head>
	<body>
		<div id="header">
			<div id="logo">logo-网站图标</div>
			<div class="ad468">468像素广告</div>
		</div>
		<div id="banner">导航条</div>
		<div id="content">
			<div id="newsad">新闻右边的广告</div>
			<div id="news">新闻内容</div>
		</div>
		<div id="buttom">网页底部</div>
	</body>
</html>

设置div的背景颜色

10.3 span标记：行内标记元素，主要用于文本容器

与div一样，span也是一个标记，包含着一个容器，可放文本、图片等。span宽度依照包围着对象的宽度而定，所以不能用宽度属性width设置span标记对象的宽度，但可以设置外边距，设置span中对象位置与父对象的距离。

span可以接id、类class等

一个div内容不超过1行，所占的内容就是一行文本内容，因为div默认宽度是父对象的100%，而span标记中的内容宽度是指其内容所占的宽度，所以在一行文本中，相对其中文字设置样式，而又不使该行文本换行的条件下，可以选择span标记，图片中也是。

10.4 div与span区别

1、默认宽度不同：div为块级元素，可以包括段落、标题、表格、章节、摘要、备注等；span为行内元素，前后不会换行，无结构意义。

2、块元素和行内元素：它俩不是一成不变的，通过定义css的display属性值可以相互转化。diplay发属性值inherit内联对象/block

11、div与css结合

11.1 用css控制div：HTML中div标记对是放在body标记对中的，每个div标记对表示一层，div里面有很多属性：id、class、align、style等。用css控制div，即用样式表控制div，最基本的是在div标记里面用style表示，用来描述里面的样式：<div style=#></div>，#代表样式的内容，每个样式都以名值对出现，中间用分号隔开。

<div style="width:760px;height:200px">这表示一个层</div>

11.2 css文件链接

css文件可以使得网页节省很多空间，css文本的链接方式：内联定义、链入内部css、链接外部css

内联定义：在对象的标记内，使用对象的style属性定义适用的样式表属性。可以灵活设置对象样式，缺点是样式扩展性差，不能让其他的对象享用它的样式

链接内部css：链接内部样式所在的范围在整个网页中，在大型网站采用的比较多，加载整个网页更快。css内部链接是由<style></style>标记对放在<head></head>中，在style中有一个类型属性type，后面接text/css，表示css文本

/*写css内容*/

</style>

在div中可以对div的id和class进行修饰，id表示层的名称，class表示类，id在每个网页中只能用一次，而class可以重复使用，不限次数。ID在css中用#加ID名再接一对大括号组成，大括号里面用来写样式表内容；class用“.”表示，点后面接名称和大括号。

#myid

{

width:200px;

height:300px;

color:#cccccc;}

.myclass

{

width:200px;

height:300px;

color:#cccccc;

}

</style>

链接外部css：把css文件放在网页外面，通过链接css文件对文本网页的样式有效，这样的链接称为外链接。<link type="text/css" rel="stylesheet" src="style.css">

12、css知识

12.1 css文件链接方式：内链接、链接内部css、链接外部css

12.2 选择符：常用css选择符，html标记选择符、id选择符、class选择符

id选择符是唯一性选择符如#dreamdured{color：red；}，在html代码中对id符只引用一次；一个外部的样式文件定义一个id样式，可以在多个网页中使用，但不能在同一页面使用两次及以上。

class选择符是多重选择符，在一个页面中可以出现多次

12.3 伪类：选择符如div、p等标记类型的样式设置，称为类型选择符，除了类型选择符、id选择符、class选择符外，css也允许使用伪类选择和伪元素选择符。伪类选择符是基于一组预定义性质的选择符，html元素可以占有这些预定义性质，实际上这些性质与class属性的功能是相同的，css中称为伪类。

伪选择符标识虚拟元素，即在标记中不存在，但浏览器可以推理并应有样式的元素。在伪类中，没有对应伪元素的标记。

四个可以安全使用的用在链接上的伪类：

link：用在对象处于的链接状态上；visited：用在已访问过的链接上；active：用于获得焦点的链接上（比如被单击）；hover：用于鼠标光标置于其上的链接。

注解：/*注解*/

相对单位：em：em元素字体的高度；ex：x-height字母x的高度；px：像素，相对于屏幕的分辨率。绝对单位：in：英寸，1in=2.54cm；cm：厘米：mm：毫米；pt：点，1pt=1/72in；pc：帕，1pc=12pt。

颜色值是一个关键字或者一个rgb格式的数字。关键字16个：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow；RGB颜色：#rrggbb，如#00cc00；#rgb，如#0c0；rgb（x，x，x），x范围在0-255的整数；rgb（y%，y%，y%），y范围在0-100

13、字体设置和文本设置

字体是给对象设置文本特性的属性，css中字体用font表示，字体font的语法：font：font-style||font-variant||font-weight||front-size||line-height||font-family