HTML-01-<html>-优快云博客

本文详细介绍了HTML(HyperText Markup Language)的基本结构与组成部分，包括<html>、<head>、<body>标签的用法，以及<meta>、<script>、<link>、<title>等关键标签的作用。深入探讨了如何使用这些标签来构建和优化网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是HTML：

　　HTML：HyperText Markup Language.即超文本标记语言。

HTML的基本结构：

<!--这里使用 !DOCTYPE 来声明代码使用HTML5 
标准编写标准声明大小写都可-->
<!DOCTYPE HTML> 
<html>
    <head>
        <meta charset = "utf-8">
        <title>HTML-01</title>
    </head>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

一个网页的基本结构如上代码所示，由<html>标签包围的<head>与<body>标签组成。其中，head元素中用于编写页面不显示的部分（<meta>、<link>、<script>、<title>），如编码格式(charset)。而head元素中对页面内容进行编辑。

head元素中的标签：

　　<meta>、<base>、<style>、<script>、<link>、<title>。其中 <title>是 <head>中唯一必须的标签。

 1 <!DOCTYPE HTML>
 2 
 3 <html>
 4     <head>
 5         <title>head内部标签测试</title>
 6         <meta charset = "utf-8">
 7     </head>
 8         
 9     <body>
10         <a id = "url" href = "https://i.cnblogs.com/EditPosts.aspx?opt=1" target = "_blank">HTML - 01 - &lt;html></a>
11         <br/><input type = "button" id = "button" value = "点我">
12         <script>
13             function handleOnClick(){
14                 url = document.getElementById("url").getAttribute("href");
15                 window.open(url, "buttonPage");
16                 console.log(url);
17             }
18     
19             button = document.getElementById("button");    
20             button.onclick = handleOnClick;
21         </script>
22     </body>
23 </html>

其中 script标签可以放在任意位置，但是由于JS代码需要获取HTML元素，因此应该在页面加载完毕后再解析JS代码，因此暂时将script代码放在最后。

<title>用来表明页面的标题，该元素必须位于 <head>内部。

　　charset :用于指定文档的编码格式。

　　name = “[author、description、keywords、viewport]”：

　　http-equiv = "[default-style、refresh]"：

　　content:用于指定 name与http-equiv相关的属性值

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>    
 4         <title>meta元素</title>
 5         <meta charset = "utf-8">
 6         <meta name = "author" content="已经崩盘了">
 7         <meta name = "keywords" content = "HTML, CSS, JavaScript">
 8         <meta name = "description" content = "This is  page for the markup &lt;meta test">
 9 
10         <meta http-equiv = "refresh" content = "3; http://www.baidu.com">
11 
12     </head>    
13     <body>
14         <p>3秒后自动跳转</p>
15     </body>
16 </html>