前端开发入门 1：概述及HTML

你的名字 2021-01-29 08:28 718阅读 0赞

开始学些Html的时候主要进行一些简单的静态网页的处理：   
1、HTML 标题   
HTML 标题（Heading）是通过 h1-h6 加中括号<>等标签进行定义的。   
2、HTML 段落   
HTML 段落是通过  
标签进行定义的。   
3、HTML 链接   
HTML 链接是通过《a》标签进行定义的。   
4、HTML 图像   
HTML 图像是通过 标签进行定义的。   
5、HTML 元素   
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。   
6、HTML 元素语法   
a、HTML 元素以开始标签起始   
b、 HTML 元素以结束标签终止   
c、 元素的内容是开始标签与结束标签之间的内容   
d、 某些 HTML 元素具有空内容（empty content）   
e、 空元素在开始标签中进行关闭（以开始标签的结束而结束）   
f、 大多数 HTML 元素可拥有属性  
HTML的一般结构如下：
````
<html>----以<html>开始，以</html>结束，表示之间的文档是HTML  
<head>----HTML文档的头部，主要放文档的标题信息  
<title>未使用CSS的HTML文件</title>  
</head>  
<body>----HTML的主体部分   
<h1>未使用CSS的HTML文件</h1>  
<hr>----在网页中插入一条水平线  
<p>未使用CSS的HTML文件</p>  
</body>  
</html>
````
3.标记语法  
(1)标记在使用时必须用尖括号"<>"括起来；标记的大小写作用相同；  
(2)单标记：<标记名称>，例如`<br>`它表示换行；  
(3)双标记：<标记>内容</标记>  
例如：`<em>`第一：`</em>`，它表示突出对“第一：”的显示；  
(4)：标记可以包含标记本身，即可以嵌套使用
````
<html>  
<head>  
<title>请输入密码</title>  
</head>  
<body>  
<form>  
<table border="1", width="321">  
<tr>  
<td>请输入密码</td>  
</tr>  
<tr>  
<td>密码<input type="password" name="text1"></td>  
</tr>  
</table>  
</form>  
</body>  
</html>  
````
4. 属性语法  
大多数单标记和双标记的始标记内部都可以包含一些属性  
<标记名字 属性1 属性2 ...>  
例如单标记`<img>`表示在文档当前位置插入一幅图片
````
<img src="1.jpg" width="652px" height="1249px" alt="博客">
````
其中src属性规定显示图像的路径，width属性设置图像的宽度，height属性设置图像的高度，alt属性规定图像的代替文本，src属性为必需属性，其他属性为可选属性。  
  
5. HTML文件命名：  
(1)文件的扩展名要以.html或.htm结束；  
(2)文件名中只可由英文字母、数字或下划线组成；  
(3)文件名中不要包含特殊符号，如空格、￥等；  
(4)文件名师区分大小写的，在Unix和Windows主机中有大小写的不同；  
(5)网站首页文件名默认是index.htm或index.html；  
  
6. 编写HTML文件的注意事项：  
(1)所有标记都要用尖括号<>括起来；  
(2)成对出现的标记不要漏写；  
(3)采用标记嵌套的方式可以为同一个信息应用多个标记，如`<tag1><tag2>`同一个信息`</tag2></tag1>`；  
(4)在代码中，不区分大小写；  
(5)任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是&nbsp, <br>；  
(6)标记中不要有空格；  
(7)标记中的属性，可以用双引号("")引起来，也可以不引；
````
<hr color=red> 等价于 <hr color="red">  
````
  
7.`<p></p>`表示插入段落文字；  
8.绘制表格：三个成对标记`<table></table>`、`<tr></tr>`、`<td></td>`  
`<table width="650" border="1">` ----`<table>`是制作表格的标记，其后的属性依次为表格宽度，边框粗细  
`<tr>----<tr>`表示插入行，一对<tr>表示一行  
`<td>----<td>`表示一列  
HTML基础教程`<br>`  
作者：王占金等  
`<br>----<br>`表示换行，单标记  
定价49.00元`<br>`
````
</td>  
<td>  
<img src="1.jpg" width="69px" height="92" alt="HTML">  
</td>  
</tr>  
<tr>  
<td>  
搜索引擎营销-网站流量大提速<br>  
作者：（美）亨特<br>  
定价：69.80元<br>  
</td>  
</tr>  
  
</table>  
````
9. 设置页面标题：`<title>`页面标题`</title>`；
10. 设置基地网址`<base>`
(1)<base>标记一般用于设计文件的URL地址；  
(2)一个HTML文件只能有一个<base>标记，同时该标记必须放于头部文件中；  
(3)<base href="文件路径" target="目标窗口">  
href用于设置网页文件链接的地址，target用于设置页面显示的目标窗口。  
例如：
````
<html>  
<head>  
<title>设置基地网址</title>  
<base href="http://dandelioncloud.cn">  
</head>  
<body>  
2007年1月16日，电子工业出版社<a href="index">博文视点</a>公司召开了一次晚会。  
</body>  
</html>  
````
11.定义元信息`<meta>`
(1)该标记的主要功能是定义页面中的一些信息，但这些信息不会出现在网页中，而会在源文件中显示；  
(2)`<meta>`标记通过一些属性来定义文件爱你的信息，例如，文件爱你的关键字、作者信息、网页过期时间等，HTML文件的头部文件可以有多个`<meta>`标记；  
(3)基本语法：
````
<meta http-equiv="" name="" content="">
````
http-equiv属性用于设置一个http的标题域，但确定值由content属性决定，name属性用于设置元信息出现的形式，content用于设置元信息出现的内容。  
  
12.设置页面关键字--keywords  
(1)基本语法：`<meta name="keywords" content="value">`
(2)语法说明：keywords用于说明定义的是关键字，value用于说明该网页定义的关键字，可以是多个关键字；  
(3)例子：
````
<html>  
<head>  
<title>设置关键字</title>  
<meta name="keywords" content="计算机、英语、经管、财会、职场"> ----此行代码表示在该HTML文件中定义的关键字为“计算机、英语、经管、财会、职场”，当利用搜索引擎搜索图书时，输入任何一个关键字都可以搜索到该网页。  
</head>  
<body>  
......  
</body>  
</html>
````
13. 设置页面过期时间--expires  
(1)基本语法： `<meta http-equiv="expires" content="value">`
(2)语法说明： expires用于设计页面过期时间，content属性设置具体过期时间值；  
(3)例子：
````
<html>  
<head>  
<title>设置页面过期时间</title>  
<meta http-equiv="expires" content="FRI,1 Jun 2017 00 00 00 GMT">  
</head>  
<body>  
......  
</body>  
</html>  
````
14.设置页面背景  
(1)基本语法：`<body bgcolor="">`
(2)语法说明：bgcolor可以设置网页的背景颜色；  
(3)例子：
````
<html>  
<head> ...</head>  
<body style="background-color:blue">----此行代码表示：将网页背景颜色设置为蓝色，也可以设置为 red white等，也可以十六进制数表示，例如“#00ff00”，或者rgb(0,0,0)的形式  
......  
</body>  
</html>
````
15.设置页面边距  
(1)基本语法：`<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>`
(2)语法说明：topmargin 设置到顶端的距离  
leftmargin设置到左边的距离  
rightmargin设置到右边的距离  
bottommargin设置到低端的距离  
(3)例子：
````
<html>  
<head>......</head>  
<body topmargin=0 leftmargin=20 rightmargin=20 bottommargin=180>  
&nbsp;&nbsp;2016年5月9日，阴雨  
</body>  
</html>
````
16.设计正文颜色  
(1)基本语法：`<body text=""> ...</body>`
(2)语法说明：利用text属性设置文档的颜色时，还可以进行其他设置，例如：背景、字体等；  
(3)例子：
````
<html>  
<head>......</head>  
<body text="white" bgcolor="red">  
&nbsp;&nbsp;2016年5月9日，阴雨  
</body>  
</html>
````
17.添加注释 ``
18. 添加空格 `&nbsp;`
在主体中使用，一个&nbsp代表空一个字符  
19.添加删除线 `<del></del>`
使用成对标记`<del></del>`，在主体中添加
````
<body>
<del>请在此输入需要添加删除线的文字</del>
</body>````
20. 插入特殊符号  
符号对应代码  
&&amp  
TM &trade  
￥&yen  
等~~  
21.设置文字标注标记`<ruby>`
`<ruby>`
被说明的文字（当代最可爱的人）  
`<rt>`
文字的标注（志愿者）  
`</rt>`
`</ruby>`
22.简单文字修饰（加粗、斜体、下划线）
````
<body>  
普通文字的显示<br>  
<b>加粗文字的显示</b>  
<i>斜体文字</i>  
<u>给文字加下划线</u>  
</body>  
````
23.确定文字上下标-`<sup>/<sub>`
````
<body>  
<sup>上标内容</sup>  
<sub>下标内容</sub>  
</body>
````
24.设置地址文字`<address>`
在网页中添加地址文字，是为了更方便地突出显示联系方式，将联系人的地址信息突出显示
````
<body>  
<address>请在此添加地址信息</address>  
</body>
````
25.设置等宽文字 `<tt> <samp> <code> <kdd>`
多数情况用在英文文字显示中
````
<body>  
<tt>打字机风格显示</tt>  
<code>等宽文字设置内容</code>  
<samp>等宽文字设置内容</samp>  
<kdd>键盘输入</kdd>  
</body>
````
26.段落`<p></p>`----双标记  
回车`<br>`----单标记，强制性换行，可以放在`<p></p>`之间使用  
预格式化`<pre></pre>`
利用`<pre></pre>`标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落；  
设置段落缩进`<backquote>`
利用一对`<backquote></backquote>`标记可以缩进5个字符  
插入并设置水平线`<hr>`
水平线的属性有：align---水平线对齐方式，取值有3种：left，right和center  
width---水平线的长度，如500px  
size---水平线的粗细  
color---水平线的颜色，如red  
noshade---水平线是否有阴影  
标题标记`<hn>`，其中n为数字1-6，共分6级，数字越小，字体越大，表示越重要  
  
27.插入列表  
列表类型标记符号  
定义列表`<dl></dl>`
无序列表`<ul></ul>`
目录列表`<dir></dir>`
有序列表`<ol></ol>`
(1)插入定义列表`<dl></dl>`
````
<dl>  
<dt>联系人<dd>*** ----<dt>定义名称部分，只在<dl>中使用  
<dt>联系地址<dd>北京市海淀区----<dd>解释说明部分，只在<dl>中使用  
<dt>邮政编码<dd>100876  
</dl>
````
输出结果为：  
  
联系人  
\*\*\*  
联系地址  
北京市海淀区  
邮政编码  
100876  
  
(2)插入无序列表`<ul></ul>`
````
<ul>  
<li>联系人：***</li>  
<li>联系地址：北京市海淀区</li>  
<li>邮政编码：100876</li>  
</ul>
````
输出结果为：  
  
·联系人：\*\*\*  
·联系地址：北京市海淀区  
·邮政编码：100876  
补充：无序列表`<ul>`中用type属性来控制行的标号  
type=disc 设定一个实心圆点的行标号，表示默认项，如上面所示；  
type=circle 设定一个空心圆点作为行标号；  
type=square 设定一个方形实心点作为行标号；  
(3)插入有序列表`<ol></ol>`
`<ol>`
````
<li>联系人：\*\*\*</li>  
<li>联系地址：北京市海淀区</li>  
<li>邮政编码：100876</li>  
</ol>  
````
输出结果为：  
1.联系人：\*\*\*  
2.联系地址：北京市海淀区  
3.邮政编码：100876  
补充：有序列表的顺序是由属性type和start来设置的。type表示标号的类型，start表示列表的标号从第几项开始  
type=1 表示用数字标号（默认项）  
type=A 表示用大写字母  
type=a 表示用小写字母  
type=I 表示用大写罗马数字  
type=i 表示用小写罗马数字  
(4)嵌套定义列表
````
<dl>  
<dt>网页三剑客  
<dd>Dreamweaver  
<dd>Flash  
<dd>Fireworks  
<dt>编程三剑客  
<dd>VB  
<dd>VF  
<dd>VC  
</dl>  
````
显示结果为：  
网页三剑客  
Dreamweaver  
Flash  
Fireworks  
编程三剑客  
VB  
VF  
VC  
(5)嵌套有序与无序列表
````
<ul>  
<li>水果类  
<ol>  
<li>苹果</li>  
<li>香蕉</li>  
</ol>  
</li>  
  
<li>蔬菜类  
<ol>  
<li>萝卜</li>  
<li>白菜</li>  
</ol>  
</li>  
</ul>  
````
显示结果为：  
·水果类  
1.苹果  
2.香蕉  
·蔬菜类  
1.萝卜  
2.白菜  
  
28.超链接  
一般而言，一个网站的文件都是在同一个目录下的  
在HTML文件中提供了三种路径：绝对路径，相对路径，根路径  
在HTNL文件中，超链接可以分为内部链接和外部链接。所谓内部链接：指网站内部文件之间的链接；所谓外部链接，指网站内的文件链接到站点内容外的文件。  
(1)绝对路径：只文件的完整路径，包括文件传输的协议http，ftp等，一般用于网站的外部链接，例如：[http://dandelioncloud.cn][http_ysu.edu.cn], ftp://202.206.251.100  
(2)相对路径：只相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之内，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是建立两个文件之间的相互关系，可以不受站点和所处服务器位置的影响。  
相对位置如何输入  
同一目录输入要链接的文档  
链接上一目录先输入"../"，再输入目录名  
链接下一目录先输入目录名，后加"/"  
(3)根路径：适合内部链接的建立，一般情况下不使用根路径，以"/"开头，后面紧跟文件路径。  
  
29.超链接的建立  
(1)插入内部链接： `<a href="index.htm">链接内容</a>`
(2)插入外部链接： `<a href="[http://dandelioncloud.cn][http_ysu.edu.cn]">蒲公英云</a>`
(3)设置图像映射：  
基本语法：`<img src="URL" usemap=""></img>`
````
<map name="">  
<area shape="" coords=" , , " href="URL">  
</map>
````
语法说明：`<img>`标记表示插入图像文件，src表示插入图像的路径，`<map>`标记表示插入图像的映射；`<area>`标记表示图像映射区域；shape属性表示映射区域形状：rect表示矩形区域，circle表示椭圆形区域，poly表示多边形区域；coords表示感应区域的坐标。  
30.表格  
(1)`<table></table>`表示插入一个表格；  
(2)`<tr></tr>`表示插入一行，`<td></td>`表示插入一列；  
(3)`<caption></caption>`表示插入表格标题，用于`<table>`和`<tr>`之间；  
(4)设置表格表头`<th>`：将要作为表头的一行，列标记`<td>`改为`<th>`即可；  
(5)设置划分结构表格`<thead>`、`<tbody>`、`<tfoot>`  
所谓划分结构表格，指将一个表格分成三个部分在网页上显示
````
<thead></thead>表示定义一组表头行  
<tbody></tbody>表示定义表格主体部分  
<tfoot><tfoot>表示为表格添加一个标准
````
(6)设置表格的标记属性
````
<table width="" border="" frame="" rules="">
````
width设置表格的宽度border设置表格边框的粗细frame设置表格边框的样式rules设置表格内部边框的属性  
above 显示上边框，border显示上下左右边框， below显示下边框， hsides显示上下边框，lhs显示左边框，rhs显示右边框，void 不显示边框，vsides 显示左右边框；  
all 显示所有内部边框  
groups 显示介于行列之间的边框  
none 不显示内部边框  
cols 显示列边框  
rows 显示行边框  
(7)设置表格行：`<tr align="" valign="">`
align设置行内容的水平对齐：left（左对齐），right，center  
valign调整行内容的垂直对齐：top（顶端对齐），middle，bottom，baseline（基线）  
(8)设置跨行：rowspan
````
<table>  
<tr>  
<td rowspan="2"> &nbsp;</td>  
<td> &nbsp;</td>  
<td> &nbsp;</td>  
</tr>  
<tr>  
<td> &nbsp;</td>  
<td> &nbsp;</td>  
</tr>  
</table>
````
显示结果为一个两行三列的表格，但是第一列的两个表格合并为一个了，即跨行。  
(9)设置跨列：colspan
````
<table>  
<tr>  
<td colspan="2"> &nbsp;</td>  
<td> &nbsp;</td>  
</tr>  
<tr>  
<td> &nbsp;</td>  
<td> &nbsp;</td>  
<td> &nbsp;</td>  
</tr>  
</table>
````
显示结果为：  
一个两行三列的表格，但是第一行的前两列表格合并为一个表格。

[http_ysu.edu.cn]: http://dandelioncloud.cn