第一周预习HTML和CSS

2301_81318560

已于 2024-03-23 21:37:14 修改

阅读量587

点赞数 9

文章标签： html 前端

于 2024-03-23 20:32:32 首次发布

本文链接：https://blog.csdn.net/2301_81318560/article/details/136918215

版权

HTML超文本标记语言（Hyper Text Markup Language）

HTML是用来描述网页的一种语言，被称为超文本标记语言。它与word文档几乎一样，但使用标签控制排版，纯文本，体积小、更适合在网络上进行传输。用HTML编写的文件，后缀以.html结尾。HTML是一种标记语言，标记语言是一套标记标签，标签是尖括号包围的关键字，例如<html>，标签有俩种表现形式：

双标签例如<html> </html>
单标签例如<img>

DOCTYPE声明

DOCTYPE是document type（文档类型）的缩写。<！DOCTYPE html>是H5的声明位于文档的最前面，处于标签之前，他是网页必备的组成部分，避免浏览器的怪异模式。

HTML文件结构

起始行 <！DOCTYPE html>

开始标签<html>

结束标签</html>

HTML常用标签

html标签

定义HTML文档其他元素包含其中，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及其他文档的关系等绝大多数文档头部包含的数据都不会真正作为内容显示给读者

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

body标签

body元素定义文章的主体
body元素包含文档的所有内容（比如文本超链接图像表格和列表等等）它会直接在页面中显示出来，也就是用户可以直观看到的内容


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        我会显示在浏览器中
    </body>
</html>

title标签

可定义文档的标题，它显示在浏览器窗口的标题栏或状态栏上。title是head标签中唯一必须要求包括的东西就是说写head一定要写title。title的增加有利于SEO的优化（SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求）



<!DOCTYPE html>
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        我会显示在浏览器中
    </body>
</html>

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset=“utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或者是gbk，这些都是编码格式，通常使用utf-8。

标题标签

<h1> </h1>~<h6> </h6> 字号逐渐变小，文字都是加粗形式。

段落标签

文本样式标签

<b> </b>加粗

<i> </i>斜体

<sub> </sub>带下标

<del> </del>带删除线

<br />下一行

列表标签

<ul> </ul>无序列表标签
<ol> </ol>有序列表标签

（里面都使用<li> </li>来表示列表项）

超链接标签

<a href=“ ”>跳转到网站</a> 使用a标签并且使用href属性设置链接，属性是写在标签中以“=”分隔的配置项，“=”左边是配置的项目，右边是值。

多媒体标签

图片标签 <img src=“ ” /> img标签，src属性，./表示当前目录
视频标签 <video src=“ ” controls></video>
音频标签 <audio src=“ ” controls></audio>

div标签

<div> </div> 对其他标签进行分组，把相关的页面区域放到div下边，方便调整样式和布局，它没有实际意义，但是是最常用的标签。

布局标签

<header> </header>头部信息

<nav> </nav>导航栏

<aside> </aside>侧边栏

<main>内容区域

<footer>底部信息

<article>文章详情

<section>页面分区

<input>标签

HTML中的<input>标签是用来获取用户输入的常用表单元素之一。通过<input>元素，用户可以在表单中输入文本、数字、日期、时间、文件等不同类型的数据。<input>元素有许多不同的属性，它们可以控制输入框的类型、默认值、是否必填、输入框的大小等等。

type="text"：创建单行文本框。

type="password"：创建密码输入框，输入的内容将以星号或点号等符号隐藏。

type="checkbox"：创建复选框，允许用户选择一个或多个选项。

type="radio"：创建单选按钮，允许用户从多个选项中选择一个。

type="submit"：创建提交按钮，用于提交表单数据到服务器。

type="reset"：创建重置按钮，用于将表单的值重置为默认值。

type="file"：创建文件选择框，允许用户选择本地文件上传。

HTML全局属性

HTML全局属性，就是那些可以应用于HTML中几乎所有元素的属性。它们提供了控制元素外观、行为以及附加信息和功能的能力。

class：这个属性用于为HTML元素指定一个或多个类名。类名可以应用于相同类别的多个元素，使得我们可以在CSS中定义统一的样式和行为。例如，你可以给多个段落元素分配相同的类名，然后在CSS中为这个类名定义统一的字体、颜色等样式。
id：id属性用于为HTML元素提供唯一的标识符。每个元素的id在整个HTML文档中应该是唯一的。这个属性在JavaScript和CSS中非常有用，因为它允许我们精确地定位和操作特定的元素。例如，你可以使用JavaScript的getElementById方法来获取具有特定id的元素，并对其执行某些操作。
style：style属性允许我们直接在HTML元素上定义内联样式。虽然这种方式不如使用外部的CSS文件来管理样式那么灵活和可维护，但在某些情况下，它仍然是一个快速且方便的选择。
title：title属性提供了元素的额外信息，通常以工具提示的形式显示。
lang：lang属性用于指定元素内容的语言。这对于搜索引擎优化、屏幕阅读器以及多语言网站来说是非常有用的。

CSS（Cascading Style Sheets）

css概念

Cascading Style Sheets层叠样式表，又叫级联样式表，简称样式表。CSS文件后缀名.css

CSS用于HTML文档中元素样式的定义，让网页具有美观一致的页面。

语法

CSS规则由俩个主要部分构成，选择器，以及一条或多条声明选择器通常是您需要改变样式的HTML元素。每条声明有一个属性和一个值构成。属性是您希望设置的样式属性。每个属性有一个值。属性被冒号分开

<style>
    h1{
        color: blue;
        font-size:20px;
    }
</style>

样式类型

内联样式Lnline Style

直接在HTML元素中使用style属性来定义CSS样。这种方式会导致HTML代码变得冗长，不利于维护，且样式只能应用于单个元素。

<div style="color:pink;margin-top:10px;>
    行内样式
</div>

内部样式Internal Style

在HTML文档的<head>标签中使用<style>标签来定义CSS样式。这种方式只对当前页面有效，如果多个页面需要相同的样式，会导致代码冗余。例如：

<head>
    <style>
        p{
            color: pink;
        }
    </style>
</head.

外部样式External Style

使用<link>标签在HTML头部引入外部的CSS文件。这是最常见也最推荐的引入方式，因为所有的CSS代码只存在于CSS文件中，只需要在第一次加载时引入，之后切换页面时只需加载HTML文件即可。

CSS选择器

CSS选择器是用于选择你想要样式化的HTML元素的模式。它们让你可以精确地将样式应用到页面的特定部分。

元素选择器：也称为类型选择器或标签选择器，它基于HTML元素的名称来选择元素。例如，div、p、h1等都是元素选择器。
类选择器：使用“.”作为前缀，后面跟类名。类选择器允许你为具有相同类名的多个元素应用相同的样式。例如，.container、.red等。
ID选择器：使用“#”作为前缀，后面跟ID名。虽然ID在理论上应该是唯一的，但在实际中，如果为多个元素设置了相同的ID，浏览器会为这些元素应用相同的样式。但在编写DOM脚本时，通常只能识别该ID的第一个元素。
后代选择器：通过空格分隔，选择特定元素的后代元素。例如，div p会选择所有在div元素内部的p元素。
子元素选择器：使用“>”来选择元素的直接子元素。例如，ul > li会选择所有直接属于ul元素的li子元素。
伪类选择器：以“:”开头，用于选择元素的特殊状态或行为。例如，:hover用于选择鼠标悬停时的元素，:first-child用于选择元素的第一个子元素。
伪元素选择器：以“::”开头，用于选择元素的特殊部分。例如，::before和::after用于在元素的内容之前或之后插入内容。

CSS定位方式

静态定位（static）：这是元素的默认定位方式。在静态定位下，元素按照正常的文档流进行布局，不会受到top、bottom、left和right等定位属性的影响。
相对定位（relative）：通过设置元素的position属性为relative，元素可以在正常文档流中占据原先的空间，并通过top、bottom、left和right等属性相对于其原始位置进行偏移。
绝对定位（absolute）：绝对定位的元素会脱离正常的文档流，并相对于最近的已定位祖先元素（即position属性不为static的祖先元素）进行定位。如果没有已定位的祖先元素，则元素会相对于文档的初始坐标进行定位。同样，可以使用top、right、bottom和left属性来调整元素的位置。
固定定位（fixed）：固定定位的元素也会脱离正常的文档流，并且其位置相对于浏览器窗口是固定的，即使页面滚动，它也会始终停留在同一位置。top、right、bottom和left属性同样用于调整固定定位元素的位置。