欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

1.1.HTML的核心标签

发布时间：2022/11/16 HTML 10 老码农
如意编程网 收集整理的这篇文章主要介绍了 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" ></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" ></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 ></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" ></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" >

<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>

 

 

 

 

 

 

 

 

总结

以上是如意编程网为你收集整理的1.1.HTML的核心标签的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。