html+css 01入门讲解

迷南。 2023-10-11 12:54 32阅读 0赞

# ☆ #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70]  
发起请求由浏览器发起；  
请求：request：浏览器根据网址向对应的服务器发送请求；  
相应：reponse：服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页的渲染。

## sublime: ##

sublime快捷键：  
1.html:xt ------ tab / 或者ctrl+e 自动生成html结构  
2.新标签–tab 自动生成标签  
3.ctrl+滑轮滚动 放大缩小文字  
4.h$\*数字 生成h1到h数的标签  
5.标签名\*数字 生成数字多个的同一标签  
6.按住滚轮拖动 选中多行，一起进行编辑  
7.ctrl+shift+d 复制光标所在行  
8.ctrl+shift+k /或者 ctrl+x 删除光标所在行  
9.ctrl+shift+↑ 将光标所在行上移一行（↓一样）

## html结构骨架： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 1]  
html:最根本的标签；  
head:网页的头部，里面都是一些网页配置，除了title标签其它内容都是在浏览器上不可见的。  
title:网页的标题  
body:用户能看到的区域

## 2.文档DTD： ##

html第一行代码：文档声明类型（版本）

![在这里插入图片描述][20190926200340749.jpg]  
定义我们所使用的html的版本规范，规定了我们使用的标签和语法。  
xhtml在html4.0的基础上进行了升级拓展，严格规定了标签必须小写。属性必须用双引号包裹

### 规范中的小规范： ###

strict: 严格版：不能使用一些废弃标签，不能使用框架集，结构和样式分离。  
transitional： 通用版（最常用）不能使用框架集  
frameset: 框架集版：可以使用框架集

###### html：xt 表示使用的是xhtml1.0 transitional版本 ######

###### html：xs 表示使用的是xhtml1.0的strict版本 ######

###### …… ######

html5的dtd发生了大的简化：`<!DOCTYPE html>`

## 3.html标签： ##

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    </html>  //结束标签

有开始标签和结束标签是成对出现的。  
html有两个属性：  
xmlns：规定了我们的标签使用的是哪种命名规范（用户浏览器不一致，必须规范死什么是标签什么是内容标签具有什么语意）  
lang：规定我们的html标签必须使用英文。

## 4.head标签： ##

<head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     <title>第一个网站</title>
    </head>

head标签也是双标签，里面是我们对网页的一个配置。  
meta标签：单标签，没结束。规范的是网页使用的字符集。  
**我们常用的字符集：  
国际标准字库：utf-8，包括世界上所有人类的语言（utf-8里中文占三个字节）。**  
**国家标准字库：gb2312/gbk，包括所有的简体字大部分繁体，一些特殊符号，片假名。（中文占两个字节）中文文字多要用这个库可以节省大量空间，缩短打开网站的时间。**  
**规定的字符集必须与编辑软件的字符集保持一致。否则出现乱码**

### title标签： ###

是一个双标签，内部书写的是网页的标题  
优化搜索引擎：SEO。提升我们搜索排名。  
title里的文字会作为关键字首先被搜索引擎抓取。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191009200258331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190926195116837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5,size_16,color_FFFFFF,t_70
[20190926200340749.jpg]: https://img-blog.csdnimg.cn/20190926200340749.jpg