1.HTML入门

 1 <!-- 第2行是HTML5的文档声明-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4     <head>
 5         <meta charset="utf-8">
 6         <title>
 7             这是文档标题
 8         </title>
 9     </head>
10     <body>
11         <h1>
12             这是一个大标题
13         </h1>
14         <p>
15             这是一个文字段落。
16         </p>
17     </body>
18 </html>

注：以上是一个细节完整的HTML结构（本系列笔记中HTML均指新版本HTML5）

一、HTML入门

1.简介

HTML是用来描述网页的一种语言，全称是超文本标记语言（HyperText Markup Language），所以HTML不是一种编程语言，而是一种标记语言。

每种标记语言都是由一套标记标签（markup tag）构成的，因此HTML也是使用标签来描述网页的。由标签构成的一个完整的HTML文档包含了HTML标签及文本内容，对于HTML而言，HTML文档即Web页面。

HTML标记标签通常被称为HTML标签（HTML tag），标签是由尖括号包围的关键词，例如<html>。而且标签通常是成对出现的，比如<html>和</html>，一对标签构成了一个闭合标签。标签对中前面一个是开始标签，后面一个是结束标签。（注：HTML标签对于大小写不敏感，也就是说，对于HTML而言，无论大写还是小写都可以正确解析。）

2.HTML5常用标签和意义

<!DOCTYPE html>声明为HTML5文档（告诉浏览器当前页面是HTML5页面，让浏览器按HTML5的标准去解析识别文档。必须写在最前面且不可省！）
<html>元素是HTML页面的根元素（一个文档只能有一个，其他所有元素都是嵌套在里面的后代元素。）
<head>元素包含了文档的元数据（metadate）（一般用于描述网页的各种信息，比如字符编码、网页标题、图标、样式。元数据：用来描述数据的数据；对网页进行一些基本设置；）
<meta>元素用来设置网页的字符编码（charset）（让浏览器更精准的显示每一个文字，不设置或者设置错误都会导致乱码。字符编码：将文字存储到计算机中然后解析显示出来；）
<title>元素描述了文档的标题即网页标题
<style>元素可以设置网页样式（比如颜色、文字大小）
<link>元素可以引用外部CSS的样式和设置网页图标
<body>元素定义了整个文档的主体，包含了可见的页面内容，即元素内容是另一个HTML元素（p元素）
<h1>元素定义一个大标题（<h1>~<h6>共6规定了个等级的标题）
<p>元素定义一个段落

注：<head>元素内部使用的元素有：<meta>/<title>/<style>/<link>/<base>/<script>/<noscript>

3.Tips

W3C标准建议为html元素增加一个lang属性（lang->language，帮助翻译工具确定要使用的翻译规则；帮助语音合成工具确定要使用的发音；）
lang="en"告诉浏览器这个HTML文档的语言是英文，所以Chrome浏览器的会询问是否翻译为其他语言。（中文表示：lang="zh"或lang="zh-CN"）
utf-8目前为最高标准，所有的网页都需要采用utf-8编码，所以浏览器在解析时我们也需要告诉它当前我们使用的是utf-8，浏览器才能正常解析出来文字。（ASCII码只能解析英文；GB2312可以解析大部分中文也涵盖英文；GBK在GB2312基础上扩增了中文的繁体字生僻字；Unicode畅想涵盖世界上几乎所有的语言文字，Unicode只是一个规则，多种对应的实现：utf-16/utf-32/utf-8）
快捷键：“Ctrl”+“Enter”不管光标在本行的哪个位置都可以直接切换到下一行；“AIt”+“Shift”+“向下键”向下复制当前行；
快捷功能：“！”+“Enter”自动生成代码主框架，如图3-1所示

图3-1 HTML5主代码框架

4. 示例

下面是本节知识点所写的一个完整HTML文档页面，如图4-1和4-2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Hello World!
        </title>
        <style>
            h1 {
                color: green;
                font-size: 30px;
            }
        </style>
        <!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">-->
        <!-- href:reference(超链接)-->
        <link rel="icon" href="https://www.jd.com/favicon.ico">
    </head>
    <body>
        <h1>
            Welcome to the real world!
        </h1>
        <p>
            It sucks.You're gonna love it!
        </p>
    </body>
</html>

图4-1 一个完整HTML文档页面

以上代码运行结果展示：

图4-2 运行结果页面

2022-11-02/15:34:24

posted @ 2022-11-02 15:35 仙人没有掌阅读(156) 评论(0) 收藏举报

刷新页面返回顶部

chenbuchen