大家好，又见面了，我是全栈君。
HTML的核心标签
1.HTML头标签
序号 标签 标签解释
1 <head> 定义关于文档的信息
2 <title> 定义文档标题
3 <base> 定义页面上所有链接的默认地址或默认目标
4 <link> 定义文档和外部资源的关系
5 <meta> 定义关于html文档的元数据
6 <script> 定义客户端脚本
7 <style> 定义文档的样式信息
1）使用Editplus定义一个html的模板文件
新建模板文件**.html，将模板文件放在editplus目录下
配置一下。工具/配置用户工具/模板/添加/应用
文件/新建下即可看见该模板
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>
测试一把
东方求败
西方求胜
南方求水
</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>
hello，word！
abc100
<!–显示一段代码–>
<!–格式化标签–>
<pre>
function sayHello()
{
window.alert("ok");}
</pre>
a2+b2=100;
a2+b2=200;
</body>
</html>
在后面一个页面中设置一个返回的超链接，点击返回后返回原页面
4.字符的实体
案例
<!DOCTYPE html>
<html>
<head>
<meta charset=”gbk”>
<title>New Document</title>
</head>
<body>
©
< <
> >
& &
” “”
<!–空格注意： ；全角的空格–>
空格
‘ ‘ ，
‘
</body>
</html>
注意的细节：字符的实体区分大小写
5.超链接标签
基本的用法：文字，图片
超链接和锚点技术
案例
<!DOCTYPE html>
<html>
<head>
<meta charset=”gbk”>
<title>超链接和锚点技术</title>
</head>
<body>
<!–href属性指定跳转到哪里
target标示是当前页面打开还是在新窗口打开
_self,在本页面打开窗口
_top，替换整个窗口
–href路径的指定：绝对路径，http://www.baidu.com/aaa/bbb….
–href路径的指定：相对路径，
–>
老鼠爱大米
</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>
<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>
<h6>我听见你的声音，有种特别的感觉，让我不断想，不敢再忘记你……..<h6>
返回
</body>
</html>
同一页面建立锚点
<!DOCTYPE html>
<html>
<head>
<meta charset=”gbk”>
<title>超链接和锚点技术</title>
</head>
<body>
<!–href属性指定跳转到哪里 target标示是当前页面打开还是在新窗口打开 _top
–href路径的指定：绝对路径，http://www.baidu.com/aaa/bbb….
–href路径的指定：相对路径，
–>
老鼠爱大米
查看具体信息
</body>
<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….
–href路径的指定：相对路径，
–>
老鼠爱大米
老鼠爱大米
查看具体信息
</body>
<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>
<h6>我听见你的声音，有种特别的感觉，让我不断想，不敢再忘记你……..<h6>
<p id=”flag1″ name=”flag1″>这是test页面的内容</p>
返回
</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….
–href路径的指定：相对路径，
–>
老鼠爱大米
老鼠爱大米
查看具体信息
点击发送电子邮件
</body>
<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>
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/108662.html原文链接：https://javaforall.net
