HTML01之HTML基本知识和语法等

最新推荐文章于 2021-06-20 03:46:45 发布

EUPHORIA_jasmine

最新推荐文章于 2021-06-20 03:46:45 发布

阅读量883

点赞数 1

文章标签： html html5 web

本文链接：https://blog.csdn.net/qq_45976736/article/details/112427296

版权

HTML基本知识

1.什么是html?

HTML是HyperText Markup Language(超文本标记语言)的简写，不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造页面。由一系列HTML元素组合成Web开发人员想要的简单或者复杂的页面。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
可以使用.html与.htm作为html文件的后缀名（扩展名）

小结：1.超文本：超越普通文本，能够在文本内插入图片、音频、视频、超链接等等

2.在制作网站或应用程序时，编码基本上涉及三种语言，即编程语言，脚本语言和标记语言。

3.本地submit/cscode编写代码--->部署到服务器端

编译型语言：程序在执行之前需要一个专门的编译过程，把程序编译成为机器语言的文件如.exe文件，运行时不需要重新翻译，直接使用编译的结果就行了。程序执行效率高，依赖编译器，跨平台性差些.

eg: C 、C++、Java

特点：
1.本身不具有逻辑能力和行为能力，

2.只能被（一般被：浏览器）读取

脚本语言：脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。它的命名起源于一个脚本“screenplay”，每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。一个脚本通常是解释运行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。

eg: JavaScript、VBScript、PHP、python

特点：
1.需要被解析器解析运行（目前浏览器会自行帮忙解析）

2.本身具有逻辑能力和行为能力

标记语言：标记语言，是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。

eg: html 、xml

特点：
1.需要编译以后才能运行

2.本身具有逻辑能力和行为能力

2.HTML特点

①从上往下依次解析
②容错性/宽松性（不会报错）
③对大小写不敏感
- eg：<div> <DIV>

3.文档结构

创建html文档：以 .html 或.htm为后缀的文件

eg：node---->node.html.txt

默认文档结构：

快捷键生成：

html：4t
html：5

1.docType声明：

doctype是用来作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这些规则会用来检测网页是不是存在问题。然而，这些年没有人真正的关心doctype，他们只是一个历史产物必须包含在页面中。

①严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

②宽松的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

③H5文档类型

<!DOCTYPE html>

2.<html> ：HTML的根元素，用来包含HTML文档的所有元素

3.<head>：包含在头部的内容不会被显示在页面中，这里通常包含页面的编码，作者，页面的描述信息，JavaScript的导入，CSS的导入等信息。

4.<meta charset="utf-8"> ：用来声明当前文档的编码方式为utf-8 。主要用来设置字符编码

HTML5中会多一个设置手机端的属性

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

5.<title> ：用来声明当前文档的标题，标题将会出现在浏览器的选项卡中。即用来设置标签页名称

6.<body> ：所有想要显示在浏览器中的元素都被包含在该元素中。

4.html元素

1.元素的组成：一个HTML元素是由一个开始标签，一个结束标签，以及内容。结束标签与开始标签类似，不过结束标签在尖括号内多了一个斜线。标签决定了其内容的特性。如下，标签内的问题以段落形式进行显示。

开始标签元素内容结束标签
<标签名称> hello </标签名称>
有一部分标签没有结束标签：单标签/空元素
标签不能交叉嵌套
eg: <img src="" alt="">

2.元素的分类

块级元素（ Block elements）：独占一行空间，用来布局段落，列表，导航菜单，脚注等结构，不要将块级元素嵌套在行内元素中。

特点：
- 1.独占一行空间（不与其他元素共享一行空间）
- 2.宽度占满整个父级元素
- 3.高度由子级撑起

<p>this is paragraph1</p>			
<p>this is paragraph2</p>

行内元素（ Inline elements）：与其他元素共享一行空间，一般被嵌套在块级元素中，通常作为段落的一部分出现

特点：
- 1.默认可以和其它元素共享一行空间（但也可不共享）
- 2.宽度、高度由子集元素撑起，不能直接设置宽和高
- 3.不能直接设置上下的内外边距，可以设置距离浏览器左右边距

<p>you are <strong>strong</strong></p>。

空元素（ Empty elements）：只包含单个标签，通常用于在文档中插入部分内容，例如img

<div><img src="my.jpg" alt=""></div>

替代元素（ replaced element ）：替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有<img>，<object>，<video>，<textarea>，<input>，<audio>，<canvas>等。

5.html属性

元素也可以拥有属性，与元素相关的特性称为属性，属性由键值对组成。属性信息不会出现在你的实际内容里。比如添加一个class属性用于识别元素，稍后也可以根据该属性进行一些样式信息的设定或者其他事情。

1.属性的设置

属性是由属性名和属性值组成，属性名与属性值之间使用等于号分割，属性与属性之间使用空格分开，属性值使用双引号括起来。

写在开始标签内部
属性名和属性值之间使用等号连接
多对属性之间只用空格隔开

2.属性的分类

①按照公有性分类

公有属性：所有标签都能设置的属性

id：元素的唯一标识

class：按类来标识元素

多个属性值之间使用空格隔开

style：设置行内样式（边框、宽度、高度）

按照css语法设置

title：为当前标签设置提示（和title标签区分开，这个是title属性）

私有属性：为当前标签设置的属性

②按照属性特性分类

基本属性：
属性值使用字符串类型（使用单引号或者双引号包裹的字符）

双引号之间嵌套单引号 /单引号之间嵌套双引号
布尔值属性
属性值只有true和false

eg:

readonly='readonly'; // true

readonly='true'

readonly=true

readonly

以上写法均可

6.html语法

1.空白语法：在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白

解决方案：
- pre标签：段落标签 , 保留用户输入格式的标签

2.实体：在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾。

使用&开头
使用；结尾

3.注释：注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码的含义，方便以后再看的时候能看明白。

注释作用：
- 提升代码的可读性，便于代码的维护和管理
- 表现形式：
  - <! ——（注释内容）——>
  - 被注释掉的内容不会被浏览器解析

7.标签

1.<p></p>：段落标签

<p>this is paragraph1</p>

区分pre：段落标签，保留用户所输入的格式

2.标题

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3> ...

3.其他文本标签

<strong> 意为强调，内容更为有用

<b> 加粗

<em> 意为强调，突出文章重点，倾斜效果

<i> 斜体

<u> 下划线

<sup>   上标

<sub>   下标

<img src="" alt="">：图片标签，引入图片

特殊的行内元素（替代元素）类似还有：音频、视频

display：inline-block
既能设置宽高，又能和其他元素共处于一行
alt：替换图片的内容 (当图片加载失败时候用来替换图片的提示)
src：引入图片地址
./ ：当前文件
../ ：当前文件的上一层
../../ ：当前文件的上一层目录的上一层
heigh：设置高度
width：设置宽度

注：标记语言,脚本语言,编译语言的定义与区别参考：https://blog.csdn.net/weixin_41576383/article/details/80772379