第一周预习-HTML+CSS入门-CSDN博客

本文链接：https://blog.csdn.net/wyhshd/article/details/136961860

1.介绍HTML的结构

首先我在简单使用Sublime进行HTML的编辑，然后我就简单介绍一点入门的感受。

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

HTML的最基本主体就是

<!DOCTYPE html>

</body>
</html>

这个是最基础的内容，<head>等标签作用基本都是本单词的含义，但也有些标签因为习惯使用,<b>和<strong>作用都是使字体加粗.

<!DOCTYPE>定义的是文档类型。

<html>定义的是文档的根。

<head>元素包含了所有的元信息（，这些信息不会直接显示在页面上，但对网页的渲染和行为至关重要。

<body>元素包含了网页的所有可见内容，如文本、图像、链接、列表、表格、表单等。这些内容会直接在浏览器中显示给用户。

<title>的作用就是网页的标题，其实你写HTML文本就是在写一个网页。

2.HTML的常用标签

在介绍标签之前，我们可以看到元素分为内外层。标签分为两类，一类是单标签<br>，一类是双标签，大部分标签都是双标签。

在上面简单介绍了HTML的基本格式，我们接下来说说HTML重要用到的标签

<h1>内容</h1>,h1标签作用网页里面的标题

<p></p>定义的是段落

<br />的作用就是让段落换行，

<hr />的作用是让段落之间有分割线

<b>

定义粗体文本。

<em>它的作用就是使你写的文字变成斜体

<b></b><strong></strong>标签都是使字体加粗

<u></u><ins></ins>标签都是在文字下面出现下划线

<s></s><del></del>是删除线标签

        <ol>
       <li></li>
  </ol>无序列表标签

<ul>
<li></li>
</ul>有序列表标签

<dd></dd>
</dl>自定义列表标签,dt里面定义的是标签，dd里面定义的是内容

<table>

</table><tr><td>这三个都是表格标签，<th>是表头单元格格式，

<input />type="text/password/radio/checkbox"/>

        表单元素基本标签-输入与选择

        文本框：type="text"
        密码框：type="password"
        单选框：type="radio"
        复选框：type="checkbox"

3.HTML的全局属性

accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
enterkeyhint	规定虚拟键盘上 enter 键的文本。
hidden	规定元素仍未或不再相关。
id	规定元素的唯一 id。
inert	规定浏览器应忽略此部分。
inputmode	规定虚拟键盘的模式。
lang	规定元素内容的语言。
popover	规定弹出框元素。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

4.<input>类型

<input> 标签定义输入字段，用户可以在其中输入数据。

<input> 元素是最重要的表单元素。

<input> 元素可以以多种方式显示，具体取决于 type属性。

以下是不同的输入类型：

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">（默认值）
<input type="time">
<input type="url">
<input type="week">

5.CSS引入方式

内联样式（Inline Styles）：直接在HTML元素中使用style属性来定义CSS样式。这种方式主要用于单独对某个元素进行样式定义，但不建议大量使用，因为它违反了内容与样式分离的原则，且不利于样式的复用和维护。
内部样式表（Internal Styles）：在HTML文档的<head>部分使用<style>标签来定义CSS样式。这种方式适用于单个HTML文档的样式定义，但仍然不够灵活，不利于样式的复用。
外部样式表（External Styles）：创建一个单独的.css文件，然后在HTML文档中使用<link>标签引入。这是最常用的CSS引入方式，因为它实现了内容与样式的完全分离，有利于样式的复用和维护。

6.CSS选择器

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素)

接下来我将着重说明一下简单选择器的内容：

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

HTML 元素也可以引用多个类。类不能以数字开头。

7.CSS简单样式

设计字体样式

	`body {`
	`font-family: Arial, sans-serif; /* 设置字体 */`
	`font-size: 16px; /* 设置字体大小 */`
	`color: #333; /* 设置字体颜色 */`
	`}`

设置文本对齐方式

	`p {`
	`text-align: center; /* 文本居中 */`
	`}`

设计背景颜色和照片

	`body {`
	`background-color: #f0f0f0; /* 设置背景颜色 */`
	`background-image: url('background.jpg'); /* 设置背景图片 */`
	`}`

设置元素的高度

	`div {`
	`width: 300px; /* 设置元素宽度 */`
	`height: 200px; /* 设置元素高度 */`
	`}`

	`div {`
	`border: 1px solid #000; /* 设置边框宽度、样式和颜色 */`
	`}`

    设计内边距和外边距

	`div {`
	`padding: 10px; /* 设置内边距 */`
	`margin: 20px; /* 设置外边距 */`
	`}`

        设置元素的显示方式

	`div {`
	`display: inline-block; /* 设置元素以内联块级元素的方式显示 */`
	`}`

        设置元素的透明度

	`div {`
	`opacity: 0.5; /* 设置元素透明度为50% */`
	`}`

        设置元素圆角

	`div {`
	`border-radius: 10px; /* 设置元素圆角 */`
	`}`

        设置元素的阴影

	`div {`
	`box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 设置元素阴影 */`
	`}`

8.CSS简单定位方法

CSS中的定位方法主要有四种：静态定位（Static Positioning）、相对定位（Relative Positioning）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）。

静态定位（Static Positioning）：
- 这是CSS中元素的默认定位方式。
- 元素按照HTML文档流的顺序进行排列，不受任何定位属性的影响。
- 在静态定位下，top、right、bottom和left属性无效。
相对定位（Relative Positioning）：
- 元素相对于其正常文档流中的位置进行定位。
- 可以通过设置top、right、bottom和left属性来调整元素的位置。
- 即使元素被移动，它仍然保留其在文档流中的空间。
绝对定位（Absolute Positioning）：
- 元素相对于最近的已定位祖先元素（而非正常的文档流）进行定位。
- 如果没有已定位的祖先元素，它会相对于初始包含块进行定位。
- 绝对定位的元素会从文档流中完全移除，不会影响或受到其他元素的影响。
固定定位（Fixed Positioning）：
- 元素相对于浏览器窗口进行定位。
- 即使页面滚动，固定定位的元素也会始终保持在窗口的同一位置。