Web前端基础(1):HTML(一)

时间 2019-11-17

标签 web 前端基础 html 栏目 HTML 繁體版

原文原文链接

1. HTML概述

1.1 什么是HTML

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．经过这些标签能够将网络上的文档格式统一，使分散的Internet资源链接为一个逻辑总体。HTML文本是由HTML命令组成的描述性文本，HTML命令能够说明文字，图形、动画、声音、表格、连接等。

超文本是一种组织信息的方式，它经过超级连接方法将文本中的文字、图表与其余信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也多是其余文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不一样位置的信息资源用随机方式进行链接，为人们查找，检索信息提供方便。

1.2 HTML能干什么

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

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

HTML代码：用于展现须要显示的数据。html5

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

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

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

静态页面：编写以后在浏览器再也不改变的网页。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中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

这些关键词，就是告诉搜索引擎，这个网页是干吗的，可以提升搜索命中率。让别人可以找到你，搜索到。

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

4.2 title标签

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

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