HTML的核心标签
1.HTML头标签
|
序号 |
标签 |
标签解释 |
|
1 |
<head> |
定义关于文档的信息 |
|
2 |
<title> |
定义文档标题 |
|
3 |
<base> |
定义页面上所有链接的默认地址或默认目标 |
|
4 |
<link> |
定义文档和外部资源的关系 |
|
5 |
<meta> |
定义关于html文档的元数据 |
|
6 |
<script> |
定义客户端脚本 |
|
7 |
<style> |
定义文档的样式信息 |
1）使用Editplus定义一个html的模板文件
l 新建模板文件**.html，将模板文件放在editplus目录下
l 配置一下。工具/配置用户工具/模板/添加/应用
l 文件/新建下即可看见该模板
Head标签、tittle标签和base标签的用例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>New Document</title>
<base href="http://www.imeixue.cn">
<base target="_blank">
</head>
<body>
<a href="">测试一把</a><br>
<a href="">东方求败</a><br>
<a href="">西方求胜</a><br>
<a href="">南方求水</a><br>
</body>
</html>
2.DOCTYPE标签
<!DOCTYPE html >，目前基本上是此标签
该标签必须放在最前面，处于<html>标签之前
用于告知浏览器文档使用哪种html规范
如果此标签不存在，文档可以正常解析，主要看浏览器的解析方式，和版本
3.关于文本显示的几个标签
P
font
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>关于文本格式的标签</title> </head> <body> <!--段落标签--> <p>你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！2017/2/12 <span style="color:#F00">nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!nihao!</span> </p> <!--font标签，不用，使用css来控制其样式 使用css基本语法是：style="属性:属性值;属性:属性值;属性:属性值;属性:属性值;属性:属性值;" 查找位置：W3C/css/字体 --> <span style="font-size:34px;color:red;font-weigt:bold;font-style:italic;font-family:'华文新魏';">窗前明月光！</span>
</body>
</html> |
文本其它标签
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>文本和格式</title> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <!--如果希望更大或更小字体--> <p style="font-size:200px">标题4</p> <p style="font-size:2px">标题5</p>
<b>hello，word！</b> <br>abc100 <hr> <!--显示一段代码--> <!--格式化标签--> <pre> function sayHello() { window.alert("ok"); } </pre>
a<sup>2</sup>+b<sup>2</sup>=100; <br> a<sub>2</sub>+b<sub>2</sub>=200;
</body>
</html> |
在后面一个页面中设置一个返回的超链接，点击返回后返回原页面
4.字符的实体
案例
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>New Document</title> </head> <body>
© <br> < < <br> > > <br> & & <br> " “” <br> <!--空格注意： ；全角的空格--> 空格 <br> ' ‘ ， <br> '
</body>
</html> |
注意的细节：字符的实体区分大小写
5.超链接标签
基本的用法：<a href=”你的页面或资源的url地址”>文字，图片</a>
超链接和锚点技术
案例
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>超链接和锚点技术</title> </head> <body> <!--href属性指定跳转到哪里 target标示是当前页面打开还是在新窗口打开 _self,在本页面打开窗口 _top，替换整个窗口 --href路径的指定：绝对路径，http://www.baidu.com/aaa/bbb.html --href路径的指定：相对路径， --> <a href="./06.01.test.超链接和锚点技术.html" target="_blank">老鼠爱大米</a> </body>
</html> |
|
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <h1>老鼠爱大米<h1> <br> <h6>我听见你的声音，有种特别的感觉，让我不断想，不敢再忘记你........<h6>
</body> </html>
|
返回原页面的操作，在后面一个文档添加超链接
|
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <h1>老鼠爱大米<h1> <br> <h6>我听见你的声音，有种特别的感觉，让我不断想，不敢再忘记你........<h6>
<a href="./06.02.test.html " target="_blank">返回</a> </body> </html>
|
同一页面建立锚点
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>超链接和锚点技术</title> </head> <body> <!--href属性指定跳转到哪里 target标示是当前页面打开还是在新窗口打开 _top --href路径的指定：绝对路径，http://www.baidu.com/aaa/bbb.html --href路径的指定：相对路径， --> <a href="./06.01.test.超链接和锚点技术.html" target="_blank">老鼠爱大米</a> <a href="#a">查看具体信息</a> </body> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p name="a" id="a">这是具体的内容</p>
</html> |
跨页面建立锚点
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>超链接和锚点技术</title> </head> <body> <!--href属性指定跳转到哪里 target标示是当前页面打开还是在新窗口打开 _top --href路径的指定：绝对路径，http://www.baidu.com/aaa/bbb.html --href路径的指定：相对路径， --> <a href="./06.01.test.超链接和锚点技术.html" target="_blank">老鼠爱大米</a> <a href="./06.01.test.超链接和锚点技术?.html?#flag1" target="_blank">老鼠爱大米</a> <a href="#a">查看具体信息</a> </body> <br> <br> <br> <br> <br> <br> <br> <br> <p name="a" id="a">这是具体的内容</p>
</html> |
|
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <h1>老鼠爱大米<h1> <br> <h6>我听见你的声音，有种特别的感觉，让我不断想，不敢再忘记你........<h6>
<p id="flag1" name="flag1">这是test页面的内容</p> <a href="./06.02.test.html " target="_blank">返回</a> </body> </html>
|
name及id即是锚点名称
发送电子邮件
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>超链接和锚点技术</title> </head> <body> <!--href属性指定跳转到哪里 target标示是当前页面打开还是在新窗口打开 _top --href路径的指定：绝对路径，http://www.baidu.com/aaa/bbb.html --href路径的指定：相对路径， --> <a href="./06.01.test.超链接和锚点技术.html" target="_blank">老鼠爱大米</a> <a href="./06.01.test.超链接和锚点技术?.html?#a" target="_blank">老鼠爱大米</a> <a href="#flag1">查看具体信息</a> <a href="mailto:1154632528@qq.com?subject=hello">点击发送电子邮件</a> </body> <br> <br> <br> <br> <br> <br> <p name="a" id="a">这是具体的内容</p>
</html> |
6.扩展的知识点
../ 表示上一级目录
../../ 表示上两级目录
./ 表示同一级目录
相对路径：由当前文件去找
绝对路径：由根目录出发去找
CTRL+J：复制当前这一行
7.图像标签
基本的用法
<imag src=”图片的路径” width=”xxpx” heigth=”xxpx” alt=”当图片不能正常显示时，就显示该段文字” title=”标题，当鼠标移动到该图片时，显示的文字”>
img是一个单标签
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图像标签</title> </head> <body> <!--图片指定了宽度后，不指定高度，将会称比例的缩放 1px指边框的宽度，顺序可以随意 solid指实 red指边框颜色 border样式选择在css边框中选择 tittle：表示鼠标移动会出现的效果 alt：图片不能正常显示时，显示的文字 宽度是固定像素，不会随窗口变化而变化 宽度是百分比，会随窗口变化而变化 --> <img src="./niu.png" width="220px" height="" style="border:1px solid red" title="这是一头牛，太牛!" alt="的确时候一头牛！"> <img src="./niu.png" width="30%" height=""> <img src="./niu.png"> <img src="./niu.png"> <img src="./niu.png"> <img src="./niu.png"> <img src="./niu.png"> <img src="./niu.png"> <img src="./niu.png"> </body> </html> |
8.map映射标签
图片不同区域对应不同超链接
基本用法
<imag src=”图片的路径” usemap=”#映射名称”>
<map name=”映射名称” id=”映射名称”>
<area shap=”circle” cords=”坐标” href=””>
<area shap=”rect” cords=”坐标” href=””>
</map>
坐标体系算法
案例
|
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>map 案例</title> </head> <body> <img src="./sun.png" usemap="#sun" title="太阳"> <map name="sun" id="sun"> <area shape="rect" coords="0,0,110,260" href="http://www.baidu.com"> <area shape="circle" coords="200,132,10" href="http://www.imeixue.cn" target=”_blank”> </map> </body>
</html> |