首页 > 代码库 > HTML入门

HTML入门

2024-09-15 03:16:08   218人阅读

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>百度一下，你就知道</title>
 6 </head>
 7 
 8 <body>
 9     <h1>我是标题</h1>
10     <h2>我是标题</h2>
11     <h3>我是标题</h3>
12     <h4>我是标题</h4>
13     <h5>我是标题</h5>
14     <h6>我是标题</h6>
15     <hr />
16     <p>我是一段文本</p>
17     <p>我是一段文本</p>
18 
19 </body>
20 </html>

这是一段标准的HTML代码，功能简单。现在就这段代码来介绍一下HTML

第一行的<!DOCTYPE html>，此段代码是给浏览器看的，告诉浏览器这是一段html代码，让浏览器去解析

<meta charset="UTF-8" />此段代码申明字符编码类型为UTF-8，另外此标签是一个单标签，不像代码中<html></html>一样，它没有</meta>，我们在书写单标签的时候记得在标签末尾加上/标签此标签结束，meta标签放在head标签内

<title>百度一下，你就知道</title>此标签设置网页标题，具体效果一运行就知道

 

标题标签<h></h>系列，有一到七个h标签，其中h1标签标题最大，依次减小，会占用网页的一整行

<p></p> 段落标签，此标签会占用网页的一整行

<hr />标签是分割线标签，会在网页中生成一条分割线，单标签要记得加/结束

 

接下来我们介绍一下img标签

<img src="http://www.mamicode.com/psb.jpg" alt="此图片炸了" title="这是我的小仙女" width="400" height="400" />

img标签是image的缩写，功能是告诉浏览器我们需要显示一张图片

img标签格式<img src="http://www.mamicode.com/图片路径" />

此处的路径有相对路径和绝对路径，也可以是url链接

width：设置图片宽度

height：设置图片高度

没有指定宽高，系统会默认按照图片的宽高显示

如果要手动指定，一般都是设置其中一个，另外一个系统会根据设置的自动调整。如果宽高一起设置，可能导致图片变形

title：用于告诉浏览器，当鼠标悬停在图片上时，弹出的描述框中的内容

alt：当需要显示的图片丢失了会显示alt中的内容

 

<br />标签，换行标签。在企业开发中很少用到，一整个网页最多用几次

 

<a href=http://www.mamicode.com/“www.baidu.com” title="" target="">百度一下</a>

超链接，href参数内写入url，点击此超链接会跳转至指定的url

中间也可以插入一个img标签，该图片也可以变成一个超链接可以点击跳转至指定的url

title：当鼠标悬停在链接上时会显示提示的内容

target：取值有_self和_blank，当设置成self时会在当前页面跳转，当设置成blank时会新开一个网页跳转

其中herf中的值可以使#和javascript:;，此时成为假链接，不会反生任何跳转

# 的功能一般是让页面返回到顶部，也可以指定跳转位置

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>

<h2>我是顶部</h2>
<a href="#center">跳转到中部</a>

<!--a标签也可以跳转到指定页面的指定位置-->
<p><a href="08描点测试界面.html#bottom" target="_blank">跳转到其它页面的中部</a>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 id="center">我是中部</h2>        <!-- 给标题设置ID属性，可以让a标签跳转-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

只要在#号后面加上要跳转的标签的id名称就行

javascript一般在冒号后面写js代码，配合js使用

 

HTML入门


联系
我们