P1-网页基本组成-HTML-基本语法-常用标签-标准网页-注释语句-html中的属性

LXMXHJ

已于 2022-03-18 10:22:51 修改

阅读量1k

点赞数

分类专栏：前端学习文章标签： html

于 2021-04-08 10:20:19 首次发布

本文链接：https://blog.csdn.net/LXMXHJ/article/details/115507049

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

基础常识概念

根据W3C的标准，一个网页是由三个部分组成：结构（HTML）、表现（CSS）、行为（JavaScript）。
一个良好的网页要求三者分离。原因：一个软件通常是维护时间大于开发时间，为了方便维护，所以采用三者分离的方式。
耦合，代码之间的关系过于亲密，修改一个必须要同时修改其他。解耦，降低代码之间的关系。

HTML介绍

概述

HTML（Hpertext Markup Language）超文本标记语言，它负责网页三个要素之中的结构，HTML使用标签的形式来识别网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
纯文本一般只能存放文字，不能存放图片、音频、视频等，例如（记事本就是一个文本编辑器，只能存储文本内容，字体大小、颜色等内容不能存储）而HTML也是一种文本但是可以显示图片和连接，故叫做超文本。
标记：HTML中使用标签对内容做标记。

HTML超文本标记语言中的基本语法

标签（元素）——成对出现

书写格式 ： 
<标签名>xxx（content）</标签名>
 ——分别为开始标签、标签内容、结束标签。

标签（元素）——自结束标签

书写格式：
<标签名/>  或者  <标签名>

属性
属性可以用来设置标签如何处理其中的内容。
属性是一个名值对结构（名=值）。
属性需要写在开始标签中，属性名=‘属性值’（单引号和双引号都可以）。
多个属性之间采用空格隔开。

基本结构

<!doctype html>               //文档申明版本类型，告诉浏览器当前网页的版本都是html5版本
<html lang = "en">            //lang属性用来指定语言，搜索引擎可以通过lang属性来判断网站是英文还是中文等（en表示英文、zh表示中文）
<html>                        //根标签
             <head>
                          <meta charset="utf-8">     //指定网页的一个编码字符集
                           <title>网页的标题</title>
             </head>
              <body>                                           //网页主体
                           <!-- 网页可见的内容 -->
               </body>
</html>

常用标签

在使用html标签的时候，强调的是语义。

h1-h6标题标签；
标题标签，总共有6个，分别是h1-h6，从h1-h6重要性越来越低，h1最重要，重要性仅次于title，搜索引擎会根据h1的内容来判断网页的主要内容。一般情况下一个页面中只能有一个h1，且标题标签只会使用h1-h3（一般都是顺序使用）。

格式：<h1> </h1>

p段落标签（成对）
段落标签：表示一个段落，每个段落前后都有距离，每两个标签之间都有距离且每个段落都是独占一行（说明是块标签）

格式：<p> </p>

br换行标签（自结束）
在html中多个空格和换行会被解析为一个。
（当想让源代码中一段文字换行显示时，通过源码换行显示，则网页中并没有换行显示，必须使用br标签来进行换行，br是一个自结束标签）。

格式：<br/> 或者 <br>

hr水平线（自结束）；
hr水平线标签，可以在页面中出现一条水平线，用于分割页面区域。
hr本来表示水平线，在h5中用于表示分割两个区块。

格式：<hr/> 或者 <hr>

实体（转移字符）：

语法：&实体的名字;
 			所有符号都是英文的

关于实现输出多个空格：可以使用实体（转义字符）来表示一些特殊的字字符。
例子空格——&nbsp；可以实现一个空格输出，每多一个&nbsp 浏览器中的显示就多一个空格。
特殊符号也可以按照&#unicode编码进行书写，unicode编码采用十进制书写，而在文档中通常采用的是十六进制。
实体（转义字符）介绍：

操作	实现
空格	&nbsp
大于号	&gt
小于号	&lt
版权符号	&copy
编码	&Unicode

标准的网页

<html>         
            <head>
                         <title></title>
            </head>
            <body>
                          <h1></h1>
            </body>
</html>

一个根标签< html >< /html > ，所有的内容都得书写在根标签中，且一个网页中只能有一个根标签。
根标签< html >< /html >只有两个子标签< head >< /head > < body >< /body >(子标签在根标签里面)，< head >< /head >也有一个子标签< title >< /title >。
title和html的关系就是后代和祖先的关系，而head和title是父子标签，一层包含关系之后的都称为后代和祖先，title是html的后代、html是title的祖先，head和body就是兄弟标签。
head标签是头的意思，里面书写的东西在网页里面是看不见的，是给浏览器看的，用于帮助浏览器来解析网页。
body标签是主体的意思，网页所有的可见内容都应该写在主体里面。
title标签用来设置网页的标题，修改的是网页弹出的标题。
title会成为搜索引擎搜索成功之后的连接标题，搜索引擎的爬虫程序会根据title来识别网页的主要内容。

网页编写的注释语句

<!--  HTML注释 -->

注释中的内容会被浏览器忽略，不会在页面中显示，但是在源码中会显示。
注释用来对代码进行解释说明。（一定要养成良好的编写注释的习惯，注释要求简单明了）。
浏览器对源码进行渲染的时候，会对不正确的标签进行自动修正，浏览器修正的不是源代码，而是源代码在内存中的结构。
html中的注释不能嵌套。

html中的属性

font的属性支持：颜色（color）、字体大小（size）（1-7，浏览器默认3）、字体类型（face）。
具体写法：

<h1> 这是<font color = 'yellow'> 网站的</font> 标题 </h1>

通常不赞成使用font标签进行表现设置。
不赞成使用的原因：一个良好的网页要求结构、表现、行为三者分离，而html中只负责结构，颜色字体等都不归属于它，而font的三个属性明显超出了结构的范畴，所以不建议使用。所有html中的标签涉及样式的都不赞成使用。
html中，对于标签我们关注的不是它的样式，而是它的语义。