zoukankan      html  css  js  c++  java
  • HTML学习笔记(二、HTML简介、head内常用标签)

    4、html
    4.1 html介绍
    1)html概念
    html全称HyperText Markup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式。比如字体、颜色、大小等。
    超文本:音频,视频,图片称为超文本。
    标记 :<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成。
    作用:HTML是负责描述文档语义的语言。
    注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行。
     html是一个纯本文文件(就是用txt文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。

    2)html的网络术语
    网页 :由各种标记组成的一个页面就叫网页。
    主页(首页) : 一个网站的起始页面或者导航页面。
    标记:

    称为开始标记 ,

    称为结束标记,也叫标签。每个标签都规定好了特殊的含义。
    元素:

    内容

    称为元素.
    属性:给每一个标签所做的辅助信息。

    4.2 html的规范
    HTML是一个弱势语言、区分大小写
    页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符)
    1)HTML结构简介:
    声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准。
    head部分:将页面的一些额外信息告诉服务器。不会显示在页面上。
    body部分:我们所写的需要显示出来的代码必须放在此标签內。

    2)编写HTML的规范:
    (1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:

    (2)所有的标记都必须小写。 (3)所有的标记都必须关闭。 双边标记:学习信息 单边标记: 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”…>内容部分 <标签名 属性1=“属性值1” 属性2=“属性值2”…/> (4)所有的属性值必须加引号。

    :id是属性,head是属性值 (5)所有的属性必须有值。

    3)HTML的基本语法特征
    (1)HTML对换行不敏感,对tab不敏感
    HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tab不tab,都不影响页面的结构。
    也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。
    (2)空白折叠现象
    HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
    (3)标签要严格封闭

    4)注释
    (1)单行注释:

    (2)多行注释:

    4.3 html结构
    1)声明为HTML5文档。
    2)、是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
    3)、定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,配置信息等,是给浏览器看的,你看到的是在body标签里面写的。
    4)定义了网页标题,在浏览器标题栏显示。(修改一下title中的内容,然后看一下浏览器,你就会发现title是什么了)
    5)、之间的文本是可见的网页主体内容。

    4.4 head内常用标签
    head标签包含了:

    :指定整个网页的标题,在浏览器最上方显示。 <meta>:提供有关页面的基本信息。 <link>:定义文档与外部资源的关系。 <style>:定义内部样式表与网页的关系 <script></script>:定义JS代码或引入外部JS文件 <p>4.4.1 <title标签>:<br> 指定整个网页的标题,显示在浏览器的标签栏,作为超链接的名称显示的搜索结果中。<br> <img src="https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130201829-1608953450.png" alt="" loading="lazy"><br> <img src="https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130213539-164297145.png" alt="" loading="lazy"></p> <p>4.4.2 <Meta标签><br> 1)Meta标签介绍:</p> <meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。页面不展示mete标签的内容。 <meta>标签位于文档的头部,不包含任何内容。 <meta>提供的信息是用户不可见的。 参考网页:https://www.w3school.com.cn/tags/tag_meta.asp <p>2)meta标签的组成:<br> <img src="https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130316202-1340760761.png" alt="" loading="lazy"><br> (1)name:name定义的关键字的名字,把content属性连接到某个名称。<br> 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。<br> name常用的字段:<br> a)keywords:关键字</p> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> keywords(关键字),搜索引擎可以通过关键字的内容搜索到我的这个页面的。 content用""括起来,多个关键字之间用","号隔开。 b)description:描述 <meta name="description" content="xxx"> description是对这个页面的描述,可以显示在搜索结果中。 ![](https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130344169-311539503.png) <p>在百度搜索京东,查看描述信息:<br> <img src="https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130428174-1232669907.png" alt="" loading="lazy"></p> <p>打开京东网站,查看html代码中的meta标签:keywords和description:<br> <img src="https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130449110-629981251.png" alt="" loading="lazy"></p> <p>(2)content:设置或返回 <meta> 元素的 content 属性的值。定义与 http-equiv 或 name 属性相关的元信息</p> <p>(3)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息。常用于页面重定向,固定用法如下:<br> <img src="https://img2020.cnblogs.com/blog/2131273/202102/2131273-20210226130535638-2121619687.png" alt="" loading="lazy"></p>
  • 相关阅读:
    Hadoop一直处于安全模式(hadoop去掉保护模式)
    日考
    MySQL中文编码
    Mussel使用系列(二):开始写我们的第一个Mussel插件项目
    什么是Mussel
    Mussel使用系列(四):从容器中访问Mussel的插件项目
    Mussel使用系列(三):Mussel插件树的构成及初步使用
    Mussel使用系列(五):插件项目之间的调用
    Mussel使用系列(一):Mussel配置文件演示
    C#委托探索之猫和老鼠
  • 原文地址:https://www.cnblogs.com/bdzxh/p/14451747.html
Copyright © 2011-2022 走看看