HTML与CSS基础（一）——HTML与CSS概述

小羊...

已于 2024-06-26 20:40:40 修改

阅读量724

点赞数 22

文章标签： html css 前端

于 2024-06-25 16:18:08 首次发布

本文链接：https://blog.csdn.net/L_sheep_/article/details/139954531

版权

一、什么是HTML/CSS？

HTML是超文本标记语言，不是编程语言；超文本即可包含图片、音乐等非文字元素，有简易性、可扩展性、平台无关性、通用性的特点。现已发展到HTML5，相较于之前的版本，HTML5集成了PC端和移动端，但现在仍常用HTML4，原因是HTML5的一些标签在现行浏览器不能很好的完成渲染。（结构）

CSS是层叠样式表（什么是层叠？后续介绍），用于修饰文档。（表现）

关系：若HTML比作一个人，那么CSS就是化妆品和衣服，用于装饰HTML。

注：JS在后续展开。（行为）

二、初识HTML

推荐使用VScode编译工具进行，可以安装一些插件，方便后续的代码编写。同时，为了兼容性测试，可以安装多种主流浏览器。

2.1 VScode插件

Chinese - 汉化插件。

HTML CSS Support - html，css快捷操作。

open in browser - 允许您在默认浏览器或应用程序中打开当前文件。

Live Server - 用于热更新，即写一行代码，浏览器实时更新渲染。

2.2 HTML代码结构

新建.html后缀文件，输入“!”或“html:5”自动生成基本的HTML5代码结构。

<!DOCTYPE html>
<!-- 也就是文档类型（document type），标准网页声明，如果不加这一行，页面采用浏览器本身的解析标准。 -->
<html lang="en">
<!-- 仅有一个根标签html，有两个子标签head、body。属性也就是语言（language），en为英语。 -->
<head>
    <meta charset="UTF-8">
    <!-- meta为网页的元数据，字符编码charset一般使用万国码utf-8。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- device-width为屏幕宽度，确保不同设备的兼容性。initial-scale确保网页缩放比例，1.0为1：1显示；但是部分浏览器不受该项约束。 -->
    <!-- 除去特殊情况，以上内容一般不做变动。国际化也不通过此处实现。 -->
    <title>Document</title>
    <!-- 浏览器选项卡的名称。 -->
</head>
<body>
    <!-- 编写显示在浏览器视图区的内容。 -->
</body>
</html>

2.3 语法

2.3.1 注释

快捷键为Ctrl+/。最终效果为：

<!--  -->

2.3.2 元素

单标签元素：

<meta>
<img src="" alt="">
<br>

双标签元素：

除去以上单标签元素基本为双标签元素，即要包含开始标签（Opening tag）和结束标签（Closing tag），标签可以嵌套使用，但不能交叉嵌套，如下：

<p><strong> 推荐镜面嵌套 </strong></p>
<p><strong> 非法交叉嵌套 </p></strong>

注：光标在两个标签之间时，可以通过Ctrl+Enter快捷键完成光标的快速换行。

元素之间的关系有兄弟元素和父子元素（快速写法：div>div,即两个元素用>连接。），如下1和2为兄弟元素，3和4为父子元素：

     <div id="1"></div>
     <div id="2"></div>
     <div id="3">
        <div id="4"></div>
     </div>

2.3.2.1 块级元素

包括：html、body、div、p、h1~h6、ul->li、ol->li...

特点：

1.独占一行空间。

2.默认宽度为100%/rpx。

3.高度由子元素或内容决定。

<div style="background-color: yellow;">这是div1</div>
<div style="background-color: red;">这是div2</div>

4.可以通过css指定其宽度和高度。

<div style="background-color: yellow;height: 100px;width: 200px;">这是div1</div>
<div style="background-color: red;">这是div2</div>

2.3.2.2 行内元素

包括：span、a、img...

特点：

1.与其他行内元素共享一行空间。（如下，可以通过span*3{我是第$个span标签}来完成代码的快速编写。）

    <span style="background-color: red;">我是第1个span标签</span>
    <span style="background-color: yellow;">我是第2个span标签</span>
    <span style="background-color: green;">我是第3个span标签</span>

2.宽高由自身决定，即个人对宽高的设置不起作用，若想修改，可以将display的属性修改为block。

    <span style="background-color: red;height: 150px;width: 200px;">我是第1个span标签</span>
    <span style="background-color: yellow;">我是第2个span标签</span>
    <span style="background-color: green;">我是第3个span标签</span>

3.由于不用来搭建网页结构，所以无需指定宽度。

4.行内元素不可以嵌套块元素。

2.4 属性

属性出现在元素开始标签内部，属性名和属性值通过=连接。属性名不区分大小写，属性值区分大小写，并用双引号括起来。

title属性，即鼠标悬浮提示，如下

<div title="这是一个div">div</div>

id属性，一般设置为独一无二的值，通常用#表示id，因此可以通过“元素名#id值”的方式快速编写代码，如我想写一个id值为div1的div标签，可以键入div#div1完成代码编写。

<div id="div1"></div>

class属性，用于标识一类元素，即可重复，通常用.表示class，因此可以通过“元素名.class值”的方式快速编写代码，如我想写一个class值为div1的div标签，可以键入div.div1完成代码编写。

    <div class="div1"></div>

style样式，由于复用率较低，少用该内联样式。可以替换为head标签中的style内部样式表，通过id、class等选择器完成样式的设置。

    <div style="background-color: red;"></div>

注：对于一些特殊字符，我们采用字符实体来表示，以&开头，以；结尾。如： 为空格，<为小于号等。

小羊...

关注

22
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML与CSS基础（一）——HTML与CSS概述

HTML是超文本标记语言，不是编程语言；超文本即可包含图片、音乐等非文字元素，有简易性、可扩展性、平台无关性、通用性的特点。现已发展到HTML5，相较于之前的版本，HTML5集成了PC端和移动端，但现在仍常用HTML4，原因是HTML5的一些标签在现行浏览器不能很好的完成渲染。（结构）CSS是层叠样式表（什么是层叠？），用于修饰文档。（表现）关系：若HTML比作一个人，那么CSS就是化妆品和衣服，用于装饰HTML。注：JS在后续展开。（行为）
复制链接

扫一扫