1.2.HTML的核心标签
大家好，又见面了，我是全栈君。
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.cn/108662.html原文链接：https://javaforall.cn
腾讯云开发者
