大家好,又见面了,我是全栈君。
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>
<!DOCTYPE html >,目前基本上是此标签 该标签必须放在最前面,处于<html>标签之前 用于告知浏览器文档使用哪种html规范 如果此标签不存在,文档可以正常解析,主要看浏览器的解析方式,和版本
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>
在后面一个页面中设置一个返回的超链接,点击返回后返回原页面
案例 <!DOCTYPE html> <html> <head> <meta charset=”gbk”> <title>New Document</title> </head> <body>
©
< <
> >
& &
” “”
<!–空格注意: ;全角的空格–> 空格
‘ ‘ ,
‘
</body>
</html>
注意的细节:字符的实体区分大小写
基本的用法:文字,图片 超链接和锚点技术
案例 <!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>
../ 表示上一级目录 ../../ 表示上两级目录 ./ 表示同一级目录 相对路径:由当前文件去找 绝对路径:由根目录出发去找 CTRL+J:复制当前这一行
基本的用法 <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>
图片不同区域对应不同超链接 基本用法 <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