HTML和CSS —— 2、HTML和CSS简介

最新推荐文章于 2023-07-16 17:37:09 发布

不能吃的莴苣

最新推荐文章于 2023-07-16 17:37:09 发布

阅读量128

点赞数

分类专栏： HTML和CSS笔记文章标签： html css css3

本文链接：https://blog.csdn.net/m0_46291458/article/details/108006204

版权

HTML和CSS笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML和CSS简介

一、HTML

1.1 介绍

HTML(Hypertext Markup Language)超文本标记语言
它负责网页的三个严肃之中的结构
HTML使用标签的形式来标识网页中的不同组成部分
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

1.2 标准结构

<html>
    <head>
        <title></title>
    </head>
    <body>
         
    </body>
</html>

解释：<></>结构体
	    <html></html>根标签，一个页面中只能有一个跟标签

		<head></head>子标签，设置一些信息给浏览器看，帮助浏览器解析网页,不会在网页中直接显示

	    <title><title>网页标题标签，默认显示在浏览器标题栏中,搜索引擎在检索页面时，会首先检索title标签中的内容。有专门的人写这个东西。

	    <body></body>子标签，页面可见的内容写在这里

1.3 标签简单介绍

HTML中标记指的就是标签
HTML使用标记标签来描述网页
结构：

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

<标签名/>

我们还可以将一个完整的标签称为元素。

这里我们可以将元素和标签认为是一个同义词

<h1>一级标题</h1>
上边的h1我们就称为元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素。

1.3.1 注释标签

<!-- 注释标签，只在代码中显示，不会在网址页面中显示 -->

1.3.2 font标签

<html>
   <head>
       <title></title>
   </head>
   <body>
       <h1>
           <!-- 
   			color和size分别是font标签的属性
   			属性：
   				可以通过属性来设置标签如果处理标签中的内容
   				可以在开始标中添加属性
   				属性需要写在开始标签中，实际上就是一个名值对的结构
   				属性名 = “属性值"
   		-->
           这是一个<font color="red" size="7">font标签</font>的例子
       </h1>
   </body>
</html>

↓这是上方代码在网页中显示的效果↓

这是一个font标签的例子

注：font标签目前已经不推荐使用了，因为装饰是CSS的功能，现在font标签已经被弃用了

1.4 HTML的发展

1.4.1 历史版本

1993年6月：HTML第一个版本发布（不够仅内部交流使用的）
1995年11月：HTML2.0发布（但严格意义上来说没有1.0版本）
1997年1月：HTML3.2（W3C推荐）
1999年12月：HTML1.0（W3C推荐）
2000年底：XHTML1.0（W3C推荐）
2014年10月：HTML（W3C推荐）

1.4.2 解决HTML版本多的方法

通过在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。

<!-- 这是HTML5的文档声明 -->
<!doctype html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

HTML各个版本的文档声明
- html4
【过渡bai定义类型】：HTML4.01文档过渡定义类型，此类型定义的文档，对于标记和属性的语法要求并不是很严格，可以使用HTML中的标签与元素包括一些修饰性标签（例如：u、b等标签），不可以使用框架。
```
<!DOCTYPE   HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
```
【严格定义类型】：HTML4.01文档严格定义类型，此类型定义的文档，对于文档内的代码要求比较严格，不允许使用任何表现层的标记和属性（例如：u、b等标签），不可以使用框架。
```
<!DOCTYPE   HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
```
【框架定义类型】：HTML4.01文档框架定义类型，除 frameset 元素取代了 body 元素之外，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架。
```
<!DOCTYPE   HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"   "http://www.w3.org/TR/html4/frameset.dtd">
```
- xhtml1.0
【过渡板】

【严格版】

【框架集】
- html5
```
<!doctype html>
```
1.4.3 怪异模式
- 为了兼容一些旧的页面，浏览器中设置了两种解析模式
  - -标准模式
  - -怪异模式
- 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
- 避免的最好方式就是在页面中编写正确的doctype。

二、CSS

2.1 CSS介绍

什么是CSS？

CSS用来控制网页的标新

CSS怎么使用

写在标签的style属性中

<!-- 
	可以将CSS样式编写到元素的sytle属性当中
		将样式直接编写到style属性中，这种样式我们称为内敛样式
		内联样式只对当前的元素中的内容起作用，内联样式不方便复用
		内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的
-->
<p style="color:red;font-size:40px">
    锄禾日当午，汗滴禾下土。
</p>
<p style="color:red;font-size:40px">
    谁之盘中餐，粒粒皆辛苦。
</p>

写在head标签中

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>CSS使用</title>
    <!-- 
		也可以将CSS样式编写到head的style标签里
			将样式表编写的style标签中，然后通过CSS选择器选中指定元素
				然后可以同时为这些元素一起设置样式，这样可以使样式进一步复用
			将样式表编写到style标签中,也可以使表现和结构进一步分离它也是我们推荐的使用方式	
	-->
    <style type="text/css">
        p{
            color:red;
          	font-size:40px;
        }
    </style>
</head>
<body>
    <p>
        这是一个p标签
    </p>
</body>

写在CSS文件中

<!--
	还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入当前页面中，这样外部文件中的CSS样式表会应用到当前页面中。
	将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件
-->
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>CSS使用</title>
    <!--
		在CSS文件中直接写style标签中的内容就行，不用写<style></style>
	-->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <p>
        这是一个p标签
    </p>
</body>

CSS语法
- CSS的注释
  
  作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中
- CSS的语法：
  
  选择器声明块
  - 选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
    
    p{
    
    }
  - 声明块：声明块在选择器的后边，使用一对{}括起来，声明块中实际上就是一组一组的名值对结构，这一组一组的名值对我们称为声明，在一个声明块中可以写多个声明，多个声明之间使用；隔开
    
    color:red;
    
    font-size:40px;

不能吃的莴苣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS —— 2、HTML和CSS简介

HTML和CSS简介一、HTML1.1 介绍HTML(Hypertext Markup Language)超文本标记语言它负责网页的三个严肃之中的结构HTML使用标签的形式来标识网页中的不同组成部分所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面1.2 标准结构<html> <head> <title></title> </head> <body>
复制链接

扫一扫