1.1.HTML的核心标签
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> |