初识HTML的基础知识点！！！

淩亂°似流年 2024-03-22 15:49 49阅读 0赞

## 初识HTML！！！ ##

--------------------

### 一、系统构架 ###

#### 1.B/S构架 ####

**（1）B/S构架（Browser / Server) 就是（浏览器/服务器的交互形式）**

**Browser支持HTML、CSS、JavaScript**

**（2）优缺点**

**优点：升级方便，只升级服务器代码饥渴，维护成本低**

**缺点：速度快，体验不好，界面不够炫酷**

企业内部的架构都是B/S架构

**（3）B/S架构的系统的代表：京东、百度、天猫······**

#### 2.C/S架构 ####

**（1）C/S架构（Client/Server) 就是（客户端/用户服务器端的交互形式）**

**（2）优缺点**

**优点：速度快，体验好，维护成本低**

**缺点：升级麻烦，维护成本高**

娱乐型的系统多数是C/S架构

**（3）常见C/S架构的系统： QQ、微信、支付宝····**

--------------------

### 二、 HTML ###

#### 1.什么是HTML？ ####

**HTML（超文本标记语言）全称为 Hyper Test Markup Language，由大量的标签组成，每一个标签都有开始标签和结束标签.**

**超文本：多媒体、图片、视频、声音等等.**

#### 2.怎样开发HTML？ ####

**HTML开发时，使用普通的文本编辑器就行，创建的文件扩展名是.html或.htm，当然也有专业的开发工具DreamWeaver、HBuider······**

#### 3.怎样运行HTML? ####

**采用浏览器打开HTML文件就可以运行.**

--------------------

### 三、我的第一个HTML页面 ###

#### 1.代码展示： ####

**Demo：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
              欢迎来到我的网站！！！
        </body>
    
    </html>

![在这里插入图片描述][c7213864c6234343a4d2544749b32b16.png_pic_center]

**现在只是给大家给大家展示，不用管每个是什么意思，后面会有讲解.**

#### 2.注意事项： ####

**（1）在 中包含的就是网页名称**

**（2）有/的标签都是结束标签**

**（3）在 中就是网页内容**

**（4）在文件最上方加上<!doctype html>就是html5.0，不加就是4.0**

**（5）HTML中的注释是<!- - 注释内容 - - >**

**多行注释：**

**<! - -**

**注释内容1**

**注释内容2**

**注释内容3**

**······**

**- ->**

**（6）HTML中不区分大小写，语法松散不严格**

--------------------

### 四、HTML中的基本标签 ###

#### 1.段落标记标签 ####

**HTML中，段落标记采用**

····

标签，在体中使用此标签

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
             <P>人无完人，每个人都既有强项，又有弱项。不要为自己的弱项进行辩护，或者拒绝承认该弱项。相反，要清楚地认识自己的弱势在哪里，然后为自己设定一个目标，制定相应计划，来不断充实、完善自己，使自己在各个方面都变得十分优秀。</P><p>世上没有不弯的路，人间没有不谢的花，人这一生能力有限，但是努力无限。努力做一个善良的人，做一个心态阳光的人，做一个积极向上的人，用正能量激发自己，也感染身边的朋友，你阳光，世界也会因你而精彩！</p>
        </body>
    
    </html>

**结果：**

![在这里插入图片描述][e403b9353de543b7977bb35d9059fa24.png_pic_center]

#### 2.标题字标签 ####

**HTML中采用**

##  ##

到

######  ######

表示标题字，HTML中的标题字和word中的标题字相同

Demo实例：

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
             <h1>一级标题</h1>
    		 <h2>二级标题</h2>
    		 <h3>三级标题</h3>
    		 <h4>四级标题</h4>
    		 <h5>五级标题</h5>
    		 <h6>六级标题</h6>
        </body>
    
    </html>

**结果：**

![在这里插入图片描述][612c1bb5e9904a2cb95408453fb2fb84.png_pic_center]

#### 3.换行标签 ####

**HTML中采用  
换行**

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
             hello <br> world！！！
        </body>
    
    </html>

![在这里插入图片描述][e0880b76fc9d42dc9058f6d9c224195b.png_pic_center]

#### 4.水平直线 ####

**HTML中使用**

--------------------

表示水平线

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
    	     hello world!!!
             <hr color = "red" width = "50%">
        </body>
    
    </html>

![在这里插入图片描述][2431c161ebdf4463bd422b8bcabd063e.png_pic_center]

**其中的color和width都是hr的属性，width表示线的宽度，color表示线的颜色**

#### 5.预留格式 ####

**HTML中采用**

表示预留格式

**如想在网页中输出 for(int i=0;i<10;i++)**  
**\{**   
**printf("%d ",i);**  
**\}**

**如果直接这么写，网页上会直接显示一行，而不是分行的，**

标签中是什么格式，在网页中显示就是什么格式

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
    	     <pre>
    	     for(int i=0;i<10;i++)
    		 {
    		    printf("%d ",i);
    		 }
    		 </pre>
        </body>
    
    </html>

![在这里插入图片描述][4fa0c3fb68314caea96e43fb69628e9a.png_pic_center]

#### 6.删除字、插入字、粗体字、斜体字 ####

在HTML中用标签表示删除字，标签表示插入字，**标签表示粗体字，*标签表示斜体字***

Demo示例：

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
    	     <del>删除字</del>
    		 <ins>插入字</ins>
    		 <b>粗体字</b>
    		 <i>斜体字</i>
        </body>
    
    </html>

![在这里插入图片描述][bdf8ea7c731249b9a4d45d1f8e837044.png_pic_center]

#### 7.右上角加字和右下角加字 ####

**在HTML中用标签表示在右上角加字，使用标签在右下角加字**

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
    	     
    	     10<sup>2</sup>
             
    		 10<sub>i</sub>
        </body>
    
    </html>

![在这里插入图片描述][918ce634ead942069b26830abc08eeee.png_pic_center]

#### 8.字体标签 ####

**在HTML中采用标签来表示字体标签**

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
    	     <font color = "blue" size = "40">字体标签</font>
        </body>
    
    </html>

![在这里插入图片描述][6b26938f65884237968161e80363cd1d.png_pic_center]

**这里的color和size就是font标签的属性，red和40就是属性值**

--------------------

### 五、HTML中的基本符号 ###

**这里咱们仅介绍常用的符号，在HTML中采用&lt；来表示小于符号，&gt；表示大于符号，&nbsp；来表示空格**

**Demo示例：**

<html>
            
        <head>
              <title>my_website</title>
        </head>
        
        <body>
    	     
             b<a <br>
    		 
    		 b>c <br>
             
             he llo
        </body>
    
    </html>

![在这里插入图片描述][ef4d18f24c3d402f9ef8d7ab22ee20b2.png_pic_center]

[c7213864c6234343a4d2544749b32b16.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/959cdd454f5d42668fff2d0212438dba.png
[e403b9353de543b7977bb35d9059fa24.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cd328bdbd0fe436b9f0ee303a6e13b42.png
[612c1bb5e9904a2cb95408453fb2fb84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7270a9b0a04c46cbab416b2566f36682.png
[e0880b76fc9d42dc9058f6d9c224195b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4f8fe56ced21458f833fed050711bb63.png
[2431c161ebdf4463bd422b8bcabd063e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9c5840a36e8141e98a671909ea11c608.png
[4fa0c3fb68314caea96e43fb69628e9a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cdd60e35b5764585832fa7679d1b6298.png
[bdf8ea7c731249b9a4d45d1f8e837044.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3b698ed109cd4027bef5402b55430797.png
[918ce634ead942069b26830abc08eeee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c328f0daed2b41ccb43e7f0d73014e85.png
[6b26938f65884237968161e80363cd1d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cf84a3b1020f477295342f34124f3bc7.png
[ef4d18f24c3d402f9ef8d7ab22ee20b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a7781338e69c4e759dfa9747e6f67427.png