HTML零基础入门 (1.基本结构 标签)|青训营

86 阅读3分钟

一、认识WEB

「网页」主要是由文字、图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及Flash等。

「浏览器」是网页显示、运行的平台。

「浏览器内核」(排版引擎、解释引擎、渲染引擎)

负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

image.png

Web标准

「构成」结构标准,表现标准和行为标准

结构标准用于对网页元素进行整理和分类(HTML) 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS) 行为标准用于对网页模型的定义及交互的编写(JavaScript)

「Web标准的优点」

易于维护:只需更改CSS文件,就可以改变整站的样式 页面响应快:HTML文档体积变小,响应时间短 可访问性:语义化的HTML(结构和表现相分离的HTML)编写的网页文件,更容易被屏幕阅读器识别 设备兼容性:不同的样式表可以让网页在不同的设备上呈现不同的样式 搜索引擎:语义化的HTML能更容易被搜索引擎解析,提升排名

二.认识HTML

1.HTML是一种用于创建网页的超文本标记语言(Hyper Text Markup Language)

所谓超文本,有2层含义:

它可以加入图片、声音、动画、多媒体等内容(超越文本限制 )

不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。

HTML语言是Web的基础,可以说Internet是建立在HTML基础之上的。HTML5是新一代HTML标准,大部分浏览器已经支持。

2.HTML5基本结构

```<!DOCTYPE html>//html5网页声明
<html lang="en"> //<html>元素是HTML页面根元素
//lang属性:声明当前页面的语言类型,“en"英文,”zh“中文
  <head>
    <meta charset="utf-8" />//<meta />设置网页编码格式位utf-8
    <title>文档标题</title>//<title>设置文档标题
</head>
<body>
    ....页面内容(各种标签)
</body>
</html>      

```js

3.基本标签

「团队约定大小写」

  • HTML标签名、类名、标签属性和大部分属性值统一用小写

「HTML元素标签分类」

  • 常规元素(双标签)
  • 空元素(单标签)
``` 常规元素(双标签)
  <标签名> 内容 </标签名>   比如<body>我是文字</body>

  空元素(单标签)
  <标签名 />  比如 <br />或<br>
`
1、**div**和**span**

```js

1.1 <div>标签:

块级元素,可用于组合其他HTML元素的容器

div没有特定的含义,通常用于对文档结构进行逻辑上的分块

div的前后会换行

1.2 <span>标签:

行内元素(内联元素),可用作文本的容器

span没有特点的含义

span的前后不会换行

【HTML标签关系】

嵌套关系父子级包含关系

并列关系兄弟级并列关系

如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位(一个tab是4个空格)。如果是并列关系,最好上下对齐。

文档类型

「文档类型」用来说明你用的XHTML或者HTML是什么版本。告诉浏览器按照HTML5标准解析页面。

页面语言lang

lang指定该html标签内容所用的语言

```  <html lang="en">  
  en 定义语言为英语 zh-CN定义语言为中文
  
```js

「lang的作用」

  • 根据根据lang属性来设定不同语言的css样式,或者字体
  • 告诉搜索引擎做精确的识别
  • 让语法检查程序做语言识别
  • 帮助翻译工具做识别
  • 帮助网页阅读程序做识别