day01_HTML入门

​HTML简介

百度百科:HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。

所谓超文本,有 2 层含义:
  • 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制 )。
  • 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )。

HTML的作用:通过使用HTML的各种标签,然后生成一个HTML文件,这个文件可以被浏览器解析,浏览器内部有一个专门的HTML的解析器,解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)。HTML文件是以 .html或 .htm为文件拓展名。文件拓展名代表着文件的类型 windows 可以根据文件的拓展名去自动选择文件打开的程序

HTML标签特点如下:

  • 是一种专门在浏览器编译与执行的标记语言
  • 所有代码都是声明在标签中,标签也可以叫做标记。HTML 标签是由尖括号包围的关键词,例如 <html>。
  • 所有标签都是预先定义好,不允许开发人员自行创建新的标签。
  • 标签不区分英文字母大小写,比如<BR> <br> <Br> 都是合法命令
  • HTML 标签通常是成对出现的。双标签书写规则: <双标签名称>xxx双标签名称> ,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是 开始标签,第二个标签是结束标签。
  • 有些特殊的标签必须是单个标签(极少情况)。单标签书写规则: <单标签名称 /> ,例如 <br />,我们称为单标签。
双标签关系可以分为两类:包含关系和并列关系。                                                                                     

day01_HTML入门

​HTML版本

day01_HTML入门

标签属性

所谓属性:简单理解就是属于这个标签的特性使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

  • HTML属性指的是标签属性
  • HTML标签可以拥有属性,属性提供了有关 HTML 元素的更多的信息
  • 属性总是以名称/值对的形式出现,比如:name="value"
  • 属性总是在 HTML 元素的开始标签中规定,比如: 百度<a href="http://www.baidu.com">百度</a>

HTML 基本结构标签

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。 HTML页面也称为 HTML 文档
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

下面我们一起来看看HTML骨架标签的含义吧

<!DOCTYPE> 声明

  • <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。
  • <!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  • 在 HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML (Standard Generalized Markup Language 标准通用标记语言)。DTD 指定了标记语言的规则,确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML,因此不要求引用 DTD。
  • 总是给您的 HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型。

<html> 标签

  • <html> 标签告知浏览器这是一个 HTML 文档。
  • <html> 标签是 HTML 文档中最外层的元素。
  • <html> 标签是所有其他 HTML 元素(除了 <!DOCTYPE> 标签)的容器。
  • 属性 lang="en"​ 规定元素内容的语言代码,常见的取值 en定义语言为英语丶zh-CN定义语言为中文
  • ​​html根标签有两个一级子标签  分别是head  body

<head> 标签

  • <head> 元素是所有头部元素的容器。
  • <head> 元素必须包含文档的标题(title),可以包含脚本、样式、meta 信息 以及其他更多的信息。
  • 以下列出的元素能被用在 <head> 元素内部:<title> (在头部中,这个元素是必需的)丶<style><base><link><meta><script><noscript>
  • head中一般放的是不显示在网页上 但是又比较重要的信息

<meta> 标签

  • 元数据(Metadata)是数据的数据信息。
  • <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,当时会被浏览器解析。
  • META元素通常用于指定网页的描述,关键词,的文件的最后修改,作者,和其他元数据。
  • 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。
  • 在<head>标签内,可以通过<meta> 标签的 charset 属性来告诉浏览器此HTML 文档应该使用哪种字符编码来解析。<meta charset="UTF-8"> :用来定义网页的编码标准 ,国际编码。常见的mate如下代码所示:
<!--meta 
            一般定义一些当前网页的特殊属性  
            通过meta标签的属性定义页面的特征
            <标签名 属性1='' 属性2=''></标签名>
            
            charset属性  定义当前页面的字符集 告诉浏览器以什么字符集解析当前页面
            name属性   一般用于定义当前网页的一些简单描述 便于在搜索引擎上根据描述搜索到当前网页
                keywords    关键字
                author      作者
                description 描述 一段陈述文字,描述当前网页
            html 属性值使用单引号或者是双引号 皆可
        -->
        
        <meta charset="UTF-8" />
        <meta name="keywords" content="北京"/>
        <meta name="author"   content="王菲菲" />
        <meta name='description' content="课程,中国的IT行业" />
        <!--在**秒后 对网页进行刷新  -->
        <meta http-equiv="refresh" content="5;http://www.baidu.com" />

<title> 标签

  • <title> 标签定义文档的标题,在所有 HTML 文档中是必需的。
  • 定义浏览器工具栏中的标题丶提供页面被添加到收藏夹时的标题丶显示在搜索引擎结果中的页面标题
  • 一个 HTML 文档中不能有一个以上的 <title> 元素。如果您遗漏了 <title> 标签,文档作为 HTML 是无效的。
  • title写的标题和你网页相关的关键词有利于SEO优化。
  • SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。
  • 网站都有目标群体,通过title、meta标签可以让目标群体通过关键词找到你的网站,所以你定义的关键词决定了会吸引什么样的群体。

<body> 标签

  • <body> 标签定义文档的主体。
  • <body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。
总结

day01_HTML入门​​注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。 HTML中的注释以“<!--”开头,以“ -->”结束。

day01_HTML入门测试要注意:项目上线之前,要求程序员删除注释的内容,目的是加快网页的加载速度

上一篇:一、Day01 Java入门


下一篇:day01_ 互联网通信流程介绍