HTML的学习（1）-CSDN博客

本文链接：https://blog.csdn.net/Cherry_Xin/article/details/120690059

认识WEB

认识网页

由文字、图片、链接等组成，还有音频、视频、flash等等，通过代码将这些网页元素显示出来

网页的形成

浏览器（显示代码）

谷歌浏览器必备浏览器

浏览器内核

常见浏览器内核（了解）

浏览器	内核	备注
IE	Trident	IE 猎豹 360 百度
Firefox	Gecko	没落了队友flash不行了，对手chrome太强大
Safari	webkit	苹果系统
Chrome	Chromim/blink	Webkit分支二次开发
Opera欧鹏	blink	跟随Chrome

安卓机、ios 大部分都是webkit内核

web标准

web标准（重点）

为什么要遵循web标准？

内核不同，显示页面或者排版就有些许差别

尽量符合标准

目标

面试重点：记忆：说出网页中web标准三层组成

理解：结合人来表述web标准三层

web标准的好处

web标准构成

构成：结构、表现、行为

结构：网页元素进行整理和分类，主要学html

表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS

行为：网页模型的定义及交互的编写，主要学JavaScript

理想状态我们的源码：.HTML .css .js

HTML初识

Html概念、标签的分类、标签的关系、标签的语义化

Html骨架格式、sublime基本使用

HTML 初识

Html是超文本标记语言

Html不是编程语言，而是一种标记语言

标记语言是一套标记标签

网页是由网页元素组成的，这些元素是利用html标签描述出来，通过浏览器解析，再显示给用户的

图片标签：<img src=”图片名”/>

在记事本中写了图片标签，然后关闭，将文本的格式更改成.html，就可以通过浏览器的形式查看了

1.1骨架标签

<html>标签

<head>头部

<title></title>标题

</head>

<body>主体

</body>

</html>

新建记事本命名：01-html骨架标签
开始写内容
讲文本的扩展名更改为.html，双击打开则显示我们敲的内容

推荐：全部英文小写

1.2HTML元素标签分类

概念：带有<>符号的元素被称为HTML标签

分类：单标签双标签

常规元素（双标签）例如：<html></html>
空元素（单标签）例如：<br />

1.3HTML标签关系

主要针对双标签的互相关系分为两种：

1.嵌套关系父子关系

<head>

</head>

2.并列关系

倡议：如果是嵌套父子关系，子元素前面最好缩进一个Tab键的空位（4个空格）

1.4标签关系错误的是哪个

<head><title></head></title> 错误

代码开发工具

现在用sublime

优点：轻量级，打开速度超级快

Sublime生成html骨架小技巧

双击打开软件
新建文件 ctrl+n
保存 ctrl+s 保存为：文件名.html 注意：后缀必须是.html
放大缩小代码按住ctrl键再滚动鼠标滚轮或者ctrl+加号减号键
生成页面骨架结构

Html：5 按下tab键或者

！按下tab键

在浏览器中浏览页面

右键点“在浏览器中打开”

HTML模板01

<!DOCTYPE html> 在代码前面，意思是告诉我们按照html5的规范来写。整个页面的代码用的是html5

<html lang=”en”> lang:语言的意思，语言种类 en：英文

fr法语 zh-CN意思是中文

</html>

HTML模板02

5.字符集

多个字符的集合

GB2312简单中文

BIG5繁体中文

GBK全部中文字符包括简体中文和繁体中文

UTF-8 包括全世界所有国家用到的字符这样无乱码

HTML标签的语义化

6.HTML标签的语义化

就是指标签的含义

在合适的地方给一个最为合理的标签，让结构更清晰

<h1></h1> 一级标题

<h3></h3> 三级标题

还有加粗标签等

HTML常用标签

常用标签

1.1排版标签

1）标题标签h (熟记) 不用跟文档标签title搞混

他们越来越小

越大越粗

16.案例：新闻页面 17.18.各种标签

记住：在html中空格、回车这些操作对最终的显示效果没有用，得自己手动制造这些效果，它只认标签

段落标签（熟记）

<p></p> p标签

将四段添加p标签

水平线标签hr（认识）

单标签 <hr />

可以在大标题的下面加一个水平线标签，使得效果更加美观

换行标签 br（熟记）

单标签<br/> 在第一行的末尾写这个，就自动换到下一行了

注意：段落和换行的区别：

换行：另起一行接着显示，行与行之间比较紧凑

段落：行与行之间的距离比较大

div和span标签（重点）

div分区 span跨度

<div> </div> 一行只能显示一个div，在html中两个div标签写在一行上在浏览器中显示是两行

<span></span>一行中能放好多这个标签

总结：

标签名	定义	说明
<hx></hx> h1h2...	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把html文档分割为若干段落
<hr/>	水平线标签	一条线
<br/>	换行标签
<div></div>	Div标签	用来布局的，但是现在一行只能放一个div
<span></span>	Span标签	用来布局的，一行上可以放好多个span