1. HTML概述

1.1 什么是HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

1.2 HTML能干什么

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

HTML代码：用于展示需要显示的数据。

CSS代码：使显示的数据更加好看。

JavaScript代码：使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为：静态页面、动态页面。

静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。

动态页面：会根据不同的情况展示不同的内容。例如：登录成功后页面显示用户名。

1.3 HTML语言特点

HTML文件不需要编译，直接使用浏览器阅读即可

HTML文件的扩展名是*.html或*.htm

HTML结构都是由标签组成

标签名预先定义好的，我们只需要了解其功能即可。

标签名不区分大小写

通常情况下标签由开始标签和结束标签组成。例如：<a></a>

如果没有结束标签，建议以/结尾。例如：<img/>

HTML结构包括两部分：头head和体body

2.  HTML结构

对于一个网页来说，我们在HTML中主要来学习一些常用的标签。通过学习这些标签，我们能把90%的网站都可以慢慢搭建。

前端知识我们使用软件HBuilder来编程，首先打开sublime，新建index.html，输入html回车：

<html>

    <head>

        <title></title>

    </head>

    <body>

    </body>

</html>

生成一大堆的内容，是不是看的很懵逼。那么接下来我们来剖析这段代码。

2.1 html标签

每一个页面中的结构，都会有一个最外层的标签，它表示文档内容的开始。

html标签包含两部分：头部声明(<head>)和内容部分(<body>)。

如果把网页比作洋葱，一层包一层，那<html>标签就是洋葱最外层的皮， <html> 元素是一张网页的根标签，所以其他所有元素都是是此元素的后代。

2.2 head标签

把一个网页比作一个人的话，那么head标签就是这个人的基本信息，虽然这个没法直接观察到，但这些内容确实存在，并且是在网页中必不可少的。head用于表示网页的中的一个基础的信息(元信息)

2.3 body标签

把一个网页比作一个人的话，那么body标签就是这个人的身体，肤色，痔疮。它里面的内容是看得见摸得着的。对于人的性格，意淫的想法，性取向等body是管不着的。那么body标签包含页面中所有的可见元素，比如网页中的文本的展示内容，漂亮meinv ，动听的音乐，炫酷的电影等都属于body所管。

好了，相信大家对html文档结构有了一定的认知，那么我们接下来，就一一的学习head和body中的相关标签。

3. HTML规范和注释

3.1 HTML规范

HTML不区分大小写，也就是说<head>和<HEAD>都可以。

HTML页面的后缀名是html或者htm(win32时代，系统只能识别3位扩展名时使用的。现在一般都使用.html。

HTML的结构：

声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。

head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。

body部分：我们所写的代码必须放在此标签內。

3.2 编写HTML的规范

所有标签都要正确的嵌套，不能交叉嵌套。

交叉嵌套：

<html><head></html><head>

正确写法：

<html><head><head></html>

所有的标签尽量都小写，当然也可以大写，因为html中不区分大小写，但是小写相对比大写来说，它更易于阅读。

所有的标签要闭合：

双闭合 比如<html></html>

单闭合 比如<meta />

3.3 HTML注释

在页面中，凡是被注释掉的代码，浏览器都不会去解析。

html中的注释：

<!--这是我关键性的内容-->

注释的作用：

给自己看。随着页面的内容越多，高效的注释能让我们的代码更易阅读，并且关键性的代码我们可以用注释标注出来。

给别人看。比如自己写的html代码，有的地方代码需要说明一下，同时要转给别人看和解读分析的，这个时候就有必要使用html注释。

正确使用注释：

<!--<!--这是我关键性的内容-->-->

不能一个html注释中，再放一个html注释，不然浏览器会如下解析。

注释快捷键：windows上 Ctrl + / 

4. head中相关的标签

head标签中的相关标签，是看不见摸不着的，仅仅是对应用于网页的一些基础信息(元信息)。

4.1 常用的meta标签属性

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

4.1.1 http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

在html4.01版本中，我们使用下面配置来规定HTML 文档的字符编码。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

但在html5版本中，我们使用更简化的方式来规定HTML 文档的字符编码。

<meta charset="UTF-8">

4.1.2 name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

4.2 title标签

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

<title>爱编程的小灰灰</title>

Web前端基础(1):HTML(一)的更多相关文章

  1. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  2. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  3. 进击的Python【第十五章】：Web前端基础之DOM

    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...

  4. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  5. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  6. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  8. web前端基础知识学习网站推介

    内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...

  9. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  10. web前端基础知识

    #HTML    什么是HTML,和他ML...    网页可以比作一个装修好了的,可以娶媳妇的房子.    房子分为:毛坯房,精装修    毛坯房的修建: 砖,瓦,水泥,石头,石子....    精 ...

随机推荐

  1. C++之重载覆盖和隐藏

    继承体系下同名成员函数的三种关系 重载 在同一作用域内 函数名相同,参数列表不同(分三种情况:参数个数不同,参数类型不同,参数个数和类型都不同) 返回值类型可以相同也可以不同 重写(覆盖) 在不同作用 ...

  2. JavaScript中使用正则表达式

    JavaScript中正则表达式的使用 创建正则对象 RegExp 对象是带有预定义属性和方法的正则表达式对象. 方式一: var reg = new RegExp("\d", ' ...

  3. pixijs shader 贴图溶解效果教程

    pixijs shader 贴图溶解效果教程 我直接贴代码了 没什么好讲解了 稍微有点基础的人应该能看懂 const app = new PIXI.Application({ transparent: ...

  4. Python 十大装 X 语法（一）

    Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...

  5. Linux中，Tomcat 怎么承载高并发（深入Tcp参数 backlog）

    一.前言 这两天看tomcat,查阅 tomcat 怎么承载高并发时,看到了backlog参数.我们知道,服务器端一般使用mq来减轻高并发下的洪峰冲击,将暂时不能处理的请求放入队列,后续再慢慢处理.其 ...

  6. SpringBoot2.0 整合 FastDFS 中间件，实现文件分布式管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.FastDFS简介 1.FastDFS作用 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步 ...

  7. Git - Git分支管理策略

    前言 通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的c ...

  8. 测试环境部署之填坑记录-Expected one result (or null) to be returned by selectOne(), but found: 2

    最近在部署性能测试环境的时候,环境 部署好以后,部分功能出现接口查询异常,问题现象: 拿到错误,肯定要先判断是前端还是后端代码的问题,最简单的方式是抓包查看: 以上是报错页面捕获的接口报错,很明显的接 ...

  9. 用函数模拟简单的购物车（Python）

    """ 购物车功能: a.引导用户输入金额 b.给用户展示所有的商品 c.引导用户输入需要进行的操作[添加 删除 结算购物车 退出] d.引导用户选择商品 e.引导用户输 ...

  10. 自己写的一个连数据库的音乐调用模块 MusicRj

    #自己定义 class MusicRj: # 创音乐表t_music # sql = '''CREATE TABLE t_music1( # id INT PRIMARY KEY AUTO_INCRE ...