我的第一个HTML网页：
<!--文档类型-->
<!DOCTYPE html>
<html>
<!--head 是头标签-->
<head>
<!--页面编码是urf-8，表示支持中文-->
<meta charset="urf-8">
<title>我的网页</title>
</head>
<!--body 是html的body体-->
<body>
我的第一个网页，hello world!
</body>
</html> 网页效果：
一、文档类型<!DOCTYPE html>
浏览器有自己的默认处理机制，不完全依赖<!DOCTYPE html>声明。
除了<!DOCTYPE html>，目前在用的形式还有：
二、在EditPlus中添加模板
先编写好一个模板
命名为myHtml.html，放在EditPlus的安装目录下。选择，工具→配置用户工具→模板→添加→（选择新放入文件夹的myHtml.html）→菜单文本改名为myHtml→应用，以后在新建处就可以新建自己添加的模板。
三、头标签<base>
头标签<base>定义页面上所有链接的默认地址或默认目标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头标签</title>
<base href="http://www.baidu.com">
</head>
<body>
<a href="">第一次</a><br>
<a href="">第二次</a><br>
<a href="">第三次</a><br>
</body>
</html> （<br>表示换行）
网页效果：
点击超链接能在当前页面（不打开新的页面）转到百度搜索
四、在新窗口打开超链接
在<base href="http://www.baidu.com">后添加一句
<base target="_blank">，即可
五、段落标签<p></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!--段落标签-->
<p>你好！你好！你好！你好！你好！你好！你好！</p>
<p>你好！你好！你好！你好！你好！你好！你好！</p>
</body>
</html>网页效果：
七、字体样式
改变字体颜色<span></span>
<span style="（颜色）">（文本）</span>
<p>你好！你好！<span style="color:#F00;">你好！你好！你好！</span>你好！你好！</p> 网页效果：
CSS使用的文本属性和字体属性（在w3c手册可查）
想要将字体显示成 字体：微软雅黑；大小：20像素；颜色：红色；粗细：粗体；样式：斜体
<span style="font-family:'微软雅黑';font-size:20px;color:red;font-weight:bold;font-style:italic;">今天天气好！</span>网页效果：
font标签现在不用，而使用CSS来控制其样式。
使用CSS的基本语法是 style="属性:属性值;属性:属性值;属性:属性值;属性:属性值;"
八、标题标签<h></h>
<!--标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3> 网页效果：
由于<h1>-<h6>标题大小固定，如果需要不一样大小的标题也可以自己用段落标签来写标题
<p style="font-size:30px">标题4</p>
九、格式化标签，按格式显示一段代码<pre></pre>
<pre>
function sayHello(){
window.alert("hello");
}
</pre> 网页效果：
（补：<hr>可显示一段分界线）
十、显示右上角/右下角角标<sup></sup>和<sub></sub>
a<sup>2</sup>+b<sup>2</sup>=100;<br>
a<sub>2</sub>+b<sub>2</sub>=200; 网页效果：
十一、用实体表示字符
在很多网站最后都会有一个版权声明
虽然字符©可以直接显示，但不排除一些浏览器会将其显示为乱码。应该习惯用实体表示字符
< > & "
输出显示成： < > & "
十二、超链接 <a href="路径">显示的文字</a>
拓展：绝对路径（完整的路径）和相对路径。关于“相对路径”：
（../ 表示上一级目录 ../../表示上两级目录 ./表示同一级目录）
若文件夹x中有文件a.html，b.html，以及文件夹y，文件夹y中有文件c.html
如果要从当前文件c.html找到b.html： 【相对路径】href="../b.html"
【绝对路径】href="/x/b.html"
如果要从当前文件a.html找到c.html： 【相对路径】href="./y/c.html"
实现从一个网页点击超链接打开第二个网页（打开新窗口），点击第二个网页的“返回”打开前一个网页（在当前页面返回）。
文件03-chaolianjie.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接和锚点</title>
</head>
<body>
<a href="./03-chaolianjiefujian.html" target="_blank">走一波</a>
</body>
</html>文件03-chaolianjiefujian.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03-附件</title>
</head>
<body>
<a href="./03-chaolianjie.html" target="_self">返回</a>
</body>
</html>
点击“走一波”，打开新窗口显示：
点击“返回”，在当前页面显示：
十三、锚点
类似百度百科，点击“目录”能定位到目录的位置。
例如，在一个页面中前面设置一个超链接“查看详细信息”，在页面的后面是具体内容（中间添加很多回车，目的是使链接和内容不同时在屏幕上显示）。点击超链接后成功跳转定位到后面的内容。
同样在超链接处使用 <a href=""></a>句式，然后用‘#’号定义一个锚点的名字，例如flag；然后在具体内容处写上name="flag" id="flag"，以使超链接能跳转到对应锚点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点</title>
</head>
<body>
<a href="#flag">查看具体信息</a>
<br>
<br><!--中间省略很多回车-->
<br>
<p name="flag" id="flag">这是具体内容</p>
</body>
</html>
点击“查看具体信息”，就会跳转到显示“这是具体内容”。（用截图好难讲清楚哦，大概就这意思呗）
上面是同一个页面中用锚点进行跳转，其实不同页面之间也可以用锚点跳转哦。
在主文件中写<a href="./04-maodianfujian.html#flag1">查看附件的锚点</a>
其中04-maodianfujian.html是附件的文件名，附件中添加很多很多回车，最后写<p name="flag1" id="flag1">这是附件的锚点</p>
那么，点击主页面的“查看附件的锚点”，就能成功跳转到附件页面的“这是附件的锚点”。
十四、发送电子邮件（不常用）
<a href="mailto:邮箱地址">文字</a>
比如： <a href="mailto:abc@sohu.com">联系管理员</a>
但需要安装一个右键客户端软件才能生效，如foxmail ， express
十五、图像标签<img...>
<img src="图片路径" width="数字px" height="数字px" alt="当图片不能正常显示时，网页显示的文字" title="当鼠标移动到该图片时，显示的标题">
img是一个单标签，没有</img>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签</title>
</head>
<body>
<img src="./funny.jpg" alt="找不到图片" title="a funny picture">
</body>
</html>网页效果：
此时图片按默认大小进行显示。可以给定宽和高对图片进行缩放（通常不会同时给定宽和高，只需要给出宽即可，能按照比例进行缩放）
给定宽度为150像素： <img src="./funny.jpg" width="150px" alt="找不到图片" title="a funny picture">
比如我故意把图片路径写错，写成funny1.jpg，则浏览器不能正常找到该图片，网页就不能正常显示该图片，此时就会显示写在alt=" "中的文字
网页效果：
正常显示图片时，当把鼠标移动到图片之上，就会显示title=" "中的文字
<img>标签可选的属性：
如果想给图片加上边框，不再使用border属性，而是用CSS来解决：
<img style="border:5px solid black">
边框样式的选取可查看w3c手册的CCS→CSS边框。
图片宽度也可以不用像素值来固定大小，可以用百分比进行显示，写成 width="20%" ，这样图片会根据网页窗口大小而变化。通常情况下最好使图片按像素大小显示。
十六、图像映射标签<map></map>
除了文字，图片也是可以作为超链接的。而且还可以将图片进行划分，用图片中不同的物体的区域分别进行不同的超链接。比如一个图片中既有圆形又有矩形，可以点击圆形链接到一个页面，点击矩形链接到另一个页面。
就拿这个图片来实现映射。当鼠标点击上面橙色的那个圆圈后，跳转到百度页面；点击中间棕色的那个矩形后（不包括左边的圆形），跳转到搜狗页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像映射map</title>
</head>
<body>
<img src="./circle&rect.png" usemap="#tubiao" alt="图标">
<map name="tubiao" id="tubiao">
<area shape="circle" coords="43,46,34" href="http://www.baidu.com" target="_blank">
<area shape="rect" coords="75,167,238,227" href="http://www.sogou.com" target="_blank">
</map>
</body>
</html>在矩形的映射中，coords有四个参数，分别是： 左上角横坐标、左上角纵坐标、右下角横坐标、右下角纵坐标。
由于坐标的单位是像素，我选择用截图工具来选图读取坐标。
网页效果：
（两个黑色的框是截图时加上去的）
当把鼠标分别放在如图圆形和矩形上时，鼠标的指针会变成点击链接的手指（这个截不了图）。点击圆形能在新窗口打开百度页面，点击矩形能在新窗口打开搜狗页面。
图片映射的应用：
比如这样的导航条，鼠标移动到不同文字板块就可以点击跳转到不同页面，其实这导航条可以直接当作图片来处理。
只需要用矩形给每一个板块设计一个映射，点击对应的图片区域链接到不同的网页即可。
十七、表格<table></table>
一个两行两列的表格：（ <tr></tr>表示行，<td></td>表示列 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</body>
</html>
加上表格边框，设置宽度：
<table border="1px" width="300px">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
如果第一行有三列，第二行第三行只有两列；并且设置一个表格背景色：
<table border="1px" width="300px" style="background-color:#CFC">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
<table>中可选属性：
使整个表格在正中间显示：style="margin:0 auto;" 【margin控制表格上下边距为0】
<table border="1px" width="300px" style="background-color:#CFC; margin:0 auto;">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
使表格中元素在每一小格内居中显示：在<table style>中用text-align:center
<table border="1px" width="300px" style="text-align:center; background-color:#CFC; margin:0 auto;">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
将表格边框变成单线的：【cellspacing 属性规定单元格之间的空间】
<table border="1px" width="300px" style="text-align:center; background-color:#CFC;
margin:0 auto;" cellspacing="0px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
改变表格单元边界与单元内容之间的间距：cellpadding
<table border="1px" width="300px" style="text-align:center; background-color:#CFC;
margin:0 auto;" cellspacing="0px" cellpadding="20px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
表头单元格<th></th> （表头的标签，会自动加粗字体）
<table border="1px" width="300px" style="text-align:center" cellspacing="0px">
<tr><th>姓名</th><th>编号</th><th>性别</th></tr>
<tr><td>小明</td><td>001</td><td>男</td></tr>
<tr><td>小贝</td><td>002</td><td>女</td></tr>
<tr><td>小红</td><td>003</td><td>女</td></tr>
</table>
表格标题<caption></caption>
如果想控制某一列表格的宽度，可以在表头标签<th>中添加width
<table border="1px" width="300px" style="text-align:center" cellspacing="0px">
<caption><h3>学生信息表</h3></caption>
<tr><th>姓名</th><th width="150px">编号</th><th>性别</th></tr>
<tr><td>小明</td><td>001</td><td>男</td></tr>
<tr><td>小贝</td><td>002</td><td>女</td></tr>
<tr><td>小红</td><td>003</td><td>女</td></tr>
</table>
表格的行/列合并
colspan="x" 表示x列合并成一个单元格，rowspan="y"表示y行合并成一个单元格
注意其后的行/列需要去掉对应个数的单元格<td></td>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格合并：菜谱</title>
</head>
<body>
<table border="1px" width="500px" style="margin:0 auto; text-align:center; line-height:40px;
background-color:#FFDAB9; margin:0 auto;" cellspacing="0px">
<caption><h3>美味菜馆菜谱</h3></caption>
<tr><th colspan="3">菜谱</th></tr>
<tbody>
<tr><td rowspan="2">素菜</td><td>凉拌青瓜</td><td>醋溜土豆丝</td></tr>
<tr><td>生菜汤</td><td>水果沙拉 <img src="./fruit.png"></td></tr>
<tr><td rowspan="2">荤菜</td><td>豆豉蒸排骨</td><td>红烧鱼肉</td></tr>
<tr><td>牛肉牛杂</td><td>水晶凤爪</td></tr>
</tbody>
</table>
</body>
</html>
表格里也可以插入图片哦~
扫一扫
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
