html+css基础知识总结

最新推荐文章于 2022-10-20 18:37:28 发布

hainan_697201

最新推荐文章于 2022-10-20 18:37:28 发布

阅读量112

点赞数

文章标签：前端 vscode

本文链接：https://blog.csdn.net/m0_59733083/article/details/125708046

版权

一、前端认知

1. 前端是做什么的？
前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。
2. 开发流程

开发流程

具体的开发路程请见百度脑图－便捷的思维工具

3. 前端开发的核心语言

HTML——结构
CSS——样式
JS——行为

二、HTML

HTML（Hypertext Markup Language）翻译过来就是超文本标记语言。

超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。

标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。

当我们将英语单词放入到标记当中，这时候我们可以称之为标签（单标签、双标签）。

HTML的基本结构

<!DOCTYPE html>
<!-- 文档头（类型）声明 不是标签，代表的是 HTML 5 的标准-->
<html>
<!-- 根元素所有的标签都要放在根元素中-->
<head>
<!-- 头部里面包含的绝大部分内容都是不可见的，里面的内容主要用于辅助页面的展 定义tittle 关键字 描述 编码等 -->
   
    <!--网页的标题 -->
    <title>html+css基础知识总结</title>

    <!--针对搜索引擎和解析格式的属性->
    <meta charset="utf-8"/>

    <!--定义网页的关键字-->
    <meta name="keywords" content="关键词1,关键词2,关键词3" />

    <!--定义网页的关键字-->
    <meta name="description" content="html+css基础知识总结" />
   
</head>
<body>
<!--  里面包含的绝大部分在页面中都是可见的，  主要用于搭建 HTML 结构 -->
</body>

</html>

head 中的元素

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

三、CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

1. CSS 的引入方式

内联样式表

<div style="width:100px;height:100px;background-color:red;"></div>

内联样式表

内部样式表
写在<head></head>内部

<head>
    <style type="text/css">
      div{
        width: 100px;
        height: 100px;
        background: red;
      }
    </style>
</head>

内部样式表

外部样式表
单独写在一个文件中，通过 link 进行引入
rel：当前引入文件和文件本身的关系
type：当前引入文件的编码格式
href：用于书写引入外部样式所处位置
```
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
```
外部样式表

2. CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。

CSS 选择器分为三种

标签名选择器div{width:100px;...}
会直接选择某一类标签，会针对这一类标签全部生效。
优先级：1
类选择器.div{width:100px;...}
使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
优先级：10
ID 选择器#div{width:100px;...}
使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
优先级为：100

3. 引入方式的优先级
内联>内部和外部；
内部和外部谁生效

如果选择器优先级相同的话，谁后引入谁生效。
如果选择器优先级不同，选择器优先级高的生效。

hainan_697201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html+css基础知识总结

1. 前端是做什么的？前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。2. 开发流程开发流程具体的开发路程请见百度脑图－便捷的思维工具3. 前端开发的核心语言超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。标记语言：当我们把特定的英文单词放入到我们的标记（单标记:、双标记）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。当我们将英语单词放入到标记当中，这时候我们可以称之...
复制链接

扫一扫