一篇文章,带你详细了解——HTML基础知识

发布于:2022-10-23 ⋅ 阅读:(399) ⋅ 点赞:(0)

一、什么是HTML

HTML是用来描述网页的一种语言,中文名称叫做超文本标记语言(HyperTEXT Markup Language)HTML不是一门编程语言,是一种标记语言,本身有一套完整的标记标签通过这些标签标记来描述网页,完整标签组成的文档称为HTML文档,包含了文本和标签,是一个完整的HTML文档也叫Web页面。

二、HTML标签

HTML标签是由尖括号包围的关键字,比如:

大部分的标签通常是成对存在,比如:

<标签>
            内容
</标签>

三、Web浏览器

web浏览器用于解析HTML文件,并将其作为网页显示,浏览器不是直接显示HTML标签,但是可以使用标签来决定如何战时HTML给用户。

四、HTML网页结构

可视化HTML页面结构

如果在页面中显示一些内容,<body>标签必须存在。

五、HTML编辑器(推荐四种)

1.VS code

2.sublime text

3.dreamweare(企业常用)

4.WebStorm

5.PHPStorm

6.文本文档编辑(将后缀名改为.html)

六、HTML头文件

在HTML中,定义头文件用<head>标签

七、HTML后缀名

有html和hml两种后缀名

八、HTML标题

标题通过到标签<h>来定义,<h1>其中是最大的标题,<h6>是最小的标题。

效果如下:

浏览器会自动在标题的前后添加空行。

标题很重要,一定要确保HTML的标题只用于标题。不仅仅是为了生成粗体或者大号而使用。在web浏览器中可以通过标题进行快速浏览网页,并且根据标题呈现文档。

九、HTML水平线

水平线是为了分隔内容,在HTML中使用


效果如下:

十、HTML注释

HTML注释会让浏览器忽略,不会显示出来,通常使用的标签是,开始括号之后又英文的!,合理的使用注释

十一、HTML段落

1.段落

HTML可以将文档分割成若干个段落,段落是通过标签<hr>来定义。

效果如下:

2.换行符

HTML换行符是<br>使用可以进行换行。

3.空格

 表示的空格

效果如下:

十二、HTML文本格式化

1.排版

浏览器会忽略源代码中的排版,因此需要用<br>标签去排版。

效果如下:

2.字体

<b></b>和<strong></strong>:定义粗体文本

<em>:定义着重文字

<i>:定义斜体文字

<small>:定义小号文字

<sub>:定义下标字

<sup>:定义上标字

<code>:定义计算机代码

<s></s>和<del></del>:添加下划线

<u></u>和<ins></ins>:添加下划线

字体可以组合使用

(1)加粗粗代码及效果:(只需要在前面加上相应的标签即可)

(2)上标的用法(下标一样)

(3)code字体

十三、动态页面和静态页面

基于是否与数据库进行交互和数据库交互web页面通常称为动态页面。安全性最高的静态页面。

十四、HTML连接

html超链接可以与网络中另一个文档连接。点击一下可以从一个页面跳转到另一个页面。

URL(统一资源定位符):在网络中寻找资源。

格式:协议://映射地址[:端口号]/路径。

在HTML中使用<a>来设置。超链接可以字、词、一组词或者一组图片。

<a herf="url" target="_blank">链接文本</a>

target属性可以打开新的标签,原来的标签不关闭

十五、HTML图像

在html中使用<img>标签来定义

<img src="url" width=""height="" />

src表示图片源

width表示图片显示宽度

height表示图片显示高度

十六、src路径写法

1.html文件和jpg在同一个目录下

<img src="url" width=""height="" />

2.同一目录下,且.jpg在images文件下,*html与images在同一目录下

<img src="images/*.jpg" width=""height="" />

3.图片来源于网络

<img src="图片链接" width=""height="" />

十七、HTML标签分类

1.单标签

指用一个标签符号就可以完整描述某个功能的标签。

格式:<标签名/>

例如:<img/>、<br>

2.双标签

是指由开始到结束两个标签符号。

格式

<标签名>  内容 </标签名>

例如:<h1> <h1/>、<p></p>

十八、标签的属性

控制显示内容格式

语法格式:

<标签名 属性1 = "属性值1" 属性2 = "属性值2 属性3 = "属性值3...>内容</标签名>

十九、标题和段落标签的属性

为了使HTML页面有条理的显示出来,HTML提供了相应的标记与属性。

1.标题和段落的对齐属性

letf:设置文字左对齐(默认值)

center :设置为文字居中对齐

right:设置文字为右对齐

2.水平线

为了使文档层次分明,我们可以创建水平线,基本的语法格式:

<hr 属性=“属性值” />

3.文本样式标记(font)

文本样式标记主要是来控制网页中文本的字体、字号、颜色

(1)基本语法格式

<font 属性=“属性值”> 内容 <font>

(2)属性名

face:用于设置文字的字体,例如微软雅黑、宋体、黑体

size:设置文字大小,可以取得1-7的整数值。

color:设置文本颜色,可以使用英文单词,也可以使用颜色代码

 

 

二十、特殊字符标记

空格 :空格符   

<:小于号  <

>:大于号  >

¥:人民币  ¥

©:版权  ©

®:注册商标 ®

 

 

二十一、<div>标签

<div>标签是一个块容器标签。可以将网页分割成的独立部分,以实现网页的规划和布局。大多数的HTML标签都可以嵌套在<div>标签中,且<div>可以嵌套使用

格式:

<div style=“属性;”>

   其他标签

</div>

<div>标签中,style的属性值设置是以键值对的形式存在,属性:属性值;

margin:外边距

padding:内边距

border:边框

test-align:文字显示的居中方式