蓝旭24春季培训-第一周预习-HTML+CSS入门

最新推荐文章于 2025-05-17 16:09:35 发布

Sure54291

最新推荐文章于 2025-05-17 16:09:35 发布

阅读量1.1k

点赞数 17

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/2303_80228948/article/details/136955810

版权

该博客主要介绍了HTML和CSS的相关知识。HTML部分涵盖结构、常用标签及全局属性；CSS部分介绍引入方式、选择器、简单样式和定位方法。详细讲解了各部分的特点、用法及注意事项，为前端开发提供基础指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(一)HTML

(1)HTML的结构

1.1HTML的基本结构

<!DOCTYPE HTML> 为文档类型声明，
<html> 标签是整个 html ⽂件的根标签.
<head> 标签中写⻚⾯的属性.
<title> 标签中写的是⻚⾯的标题.
<body> 标签中写的是⻚⾯上显示的内容

1、文档类型声明

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于标签之前。

2、开始代码和结束代码

<html>...</html>

其他所有HTML代码都位于这两个标记之间，这两个标记的作用就是告知浏览器这是一个Web文档，该按HTML语言规则来解释文档中的标记内容

3、头部开始和结束标记

<head>...</head>

4、在头部标记中，说明文件标题的标记：

<title>...</title>

5、内容主题：

<body>...</body>

1.2标签层次结构

父子关系
兄弟关系

head 和 body 是 html 的⼦标签 ( html 就是 head 和 body 的⽗标签)
title 是 head的⼦标签. head 是 title 的⽗标签.
head 和 body 之间是兄弟关系.

(2)HTML的常用标签

1、段落标签

在这里插入图片描述
（1)标题：从h1~h6，数字越大，字体越小

> <h1>标题</h1> 
> <h2>标题</h2>
> <h3>标题</h3> 
> <h4>标题</h4> 
> <h5>标题</h5>
> <h6>标题</h6>

（2）段落

<p>段落</p>

（3）换行

<br>是一个单标签，可用于段内换行

（4）水平线

<hr>是水平线，可用于将两部分分隔开，也是一个单标签

（5）分割（块元素）

<div>标签可以把文档分割为独立的、不同的部分。

（6）区域（行内元素）

<span>标签被视为内联元素,它主要用于用户想要将内联元素分组到其代码结构中

*DIV是块元素，SPAN是内嵌元素。SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

2、文本标签

在这里插入图片描述

3、列表标签

（1）无序列表
①指没有顺序的列表项目
②始于 < ul >标签，每个列表项始于< li >
③type属性有三个选项:disc实心圆、circle空心圆、square小方块。默认属性是disc实心圆。
④实例

      <!DOCTYPE html>
<htmml>
	<head>
		<meta charst = "UTF-8">
		<title>html--无序列表</title>
	</head>
	<body>
		<ul>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
		</ul>
		<ul>
			<li type = "circle">添加circle属性</li>
			<li type = "circle">添加circle属性</li>
			<li type = "circle">添加circle属性</li>
		</ul>
		<ul>
			<li type = "square">添加square属性</li>
			<li type = "square">添加square属性</li>
			<li type = "squaare">添加square属性</li>
		</ul>
	</body>
</html>

在这里插入图片描述

（2）有序列表
①指按照字母或数字等顺序排列的列表项目
②其结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
③始于< ol >标签，每个列表项始于< li >
（3）自定义列表
①自定义列表不仅仅是一列项目，而是项目及其注释的组合。
②以< dl >标签开始。每个自定义列表项以< dt >开始。每个自定义列表项的定义以< dd >开始。
③用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。

4、图片标签

<img src=“…” alt=“…” title=“…”>

5、超链接标签

<a href=“链接地址（要跳转到到的url）” target=“新页面的打开方式”>链接文本</a>

6、表格标签

在这里插入图片描述

7、表单标签

在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签
在HTML中，一个完整的表单通常由表单域、表单元素和提示信息三个部分构成。

7.1 表单域

1、表单域是一个包含表单元素的区域
2、在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
3、<form>会把它范围内的表单元素信息提交给服务器

7.2 表单元素

1、input系列标签

在这里插入图片描述

<1>文本框（text） <input type="text">

<form action="#">
    <input type="text">
</form>

<2>密码框（password) <input type="password">

  <form action="#">
        <input type="password">
    </form>

<3>单选按钮（radio） <input type="radio">

 <form action="#">
        性别：男<input type="radio">女<input type="radio">
    </form>

<4>复选框（checkbox)<input type="checkbox">

<form action="#">
    爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">
</form>

<5>提交按钮（submit） <input type="submit">

 <form action="#">
        <input type="submit" value="提交">
    </form>

<6>重置按钮（reset） <input type="reset">

  <form action="#">
        <input type="reset" value="重新填写">
    </form>

<7>普通按钮（button）<input type="button">

 <form action="#">
        <input type="button" value="确认">
    </form>

<8>文件域（file） <input type="file">

 <form action="#">
        上传头像：<input type="file">
    </form>

2、button系列标签

在这里插入图片描述

3、select下拉菜单标签

<1><select>中至少包含一对<option>
<2>在<option>中定义selected=“selected”时，当前项即为默认选中项
在这里插入图片描述

4、textarea文本域标签

个人介绍：<br>
 <textarea cols="50"rows="10">在这里输入内容</textarea>

在这里插入图片描述

5、label标签

在我们上面的单选框及多选框中，要想选中，只能在小圆圈和小方框中点击，这就会造成一个问题，对于眼力不太好的人，如老年人来说，就会比较麻烦，不好点中。所以在实际中，往往会扩大点击面。如：在性别选择中，点击女字、男字也行。
label标签正是此作用，它常用于绑定内容与表单标签的关系。

综合应用

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <center>
  <form>
  
  <h1 align="center">新用户注册</h1>
  </center>
  <hr/>
  <font color="#800080">基本信息</font>
  <br/>
  用户名：<input type="text" name="userName"/>
  <br/>
  密码： <input type="password" name="userPsd"/>
  <br/>
  确认密码：<input type="password" name="userPsd"/>
  <br/>
  性别：
  男<input type="radio" value "boy"name="gender" />
  女<input type="radio" value "girl"name="gender"/>
  <br/>
  出生日期：<input type="date" name="userDate"/>
  <br/>
  爱好：
  <input type="checkbox"value="1"name="reading"/>阅读
  <input type="checkbox"value="2"name="excercising"/>锻炼
  <input type="checkbox"value="3"name="listening"/>听歌
  <input type="checkbox"value="4"name="writing"/>写作
  <br/>
 个人介绍：<br>
 <textarea cols="50"rows="10">在这里输入内容</textarea>
  <hr/>
  <font color="#800080">绑定邮箱</font>
  <br/>
  邮箱类型：
  <select>
  <option>163</option>
  <option>qq</option>
  <option>139</option>
  </select>
  <br/>
  邮箱账号：<input type="text" name="userName"/>
  <br/>
  邮箱密码：<input type="password" name="userPsd"/>
  <hr/>
  <font color="#800080">密码保护信息</font>
  <br/>
  密码保护问题：
  <select>
  <option>父亲姓名</option>
  <option>母亲姓名</option>
  <option>家庭住址</option>
  </select>
  <br/>
  答案：<input type="word" name="userAnswer"/>
  <br/>
  <center>
  <input type="submit" value="确定">
  <input type="reset" value="重置">
  </center>
  </form>
  
 </body>
</html>

在这里插入图片描述

(3)HTML的全局属性

HTML元素可以有许多全局属性，这些属性可以应用于大多数或所有HTML元素。以下是一些常见的HTML全局属性：

class: 为元素定义一个或多个类名，这些类名可以与CSS和JavaScript关联。

<div class="myClass"></div>

id: 为元素定义一个唯一的id，该id在整个HTML文档中必须是唯一的。

<div id="myUniqueId"></div>

style: 为元素定义内联CSS样式。

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

title: 为元素定义额外的信息（作为工具提示显示）。

<div title="这是一个提示">鼠标悬停在这里查看提示</div>

hidden: 如果包含此属性，元素将不会在页面上呈现。

<div hidden>这个元素是隐藏的</div>

tabindex: 定义元素的tab键控制顺序。

<div tabindex="1">可以通过Tab键访问的元素</div>

accesskey: 定义元素的访问键，以便用户可以通过键盘快捷键访问元素。

<div accesskey="a">通过A键访问的元素</div>

lang: 定义元素内容的语言。

<p lang="en">This is an English paragraph.</p>

dir: 定义元素内容的文本方向，可以是ltr（从左到右）或rtl（从右到左）。

<div dir="rtl">这个文本是从右到左的</div>

spellcheck: 定义浏览器是否应对元素进行拼写检查。

<textarea spellcheck="true"></textarea>

这些只是HTML全局属性的一部分。实际上，还有许多其他全局属性，如contenteditable、draggable、dropzone等。需要注意的是，并非所有HTML元素都支持所有全局属性，具体支持哪些属性取决于元素类型。

(二)CSS

(1)CSS引入方式

1、CSS概述：Cascading Style Sheets层叠样式表
2、W3C定义：一种为web文档添加样式的简单机制
CSS（层叠样式表）可以通过几种不同的方式引入到HTML文档中，以便为网页内容添加样式。以下是引入CSS的几种常见方式：

css的四种引入方式

内联样式：
内联样式直接在HTML元素中使用style属性来定义。这种方法不推荐用于大型项目，因为它会使HTML代码变得混乱，并且不利于样式的复用。
```
<p style="color: red;">这是一段红色的文字。</p>
```

嵌入样式：
嵌入样式将CSS代码放在HTML文档的<head>部分的<style>标签内。

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一段红色的文字。</p>
</body>

链接样式：
链接样式是将CSS代码保存在一个单独的.css文件中，然后在HTML文档的<head>部分使用<link>标签引入。这是大型项目的最佳实践，因为它使HTML和CSS分离，提高了代码的可维护性和可重用性。
```
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一段由外部样式表控制的文字。</p>
</body>
```
在styles.css文件中，你可能会写：
```
p {
    color: red;
}
```
导入样式：
使用@import规则，可以在CSS文件中导入另一个CSS文件。这种方法通常不如直接使用<link>标签引入外部样式表常用，因为它可能导致性能问题。
```
@import url('styles.css');
```

(2)CSS选择器

1、元素选择器

根据HTML元素的标签名称选择元素。如：p{} , div{} , span{} , ol{} , ul{} …
例如，p选择器会选择所有的<p>元素。

p {
    color: red;
}

2、类选择器

根据HTML元素的class属性值选择元素。例如，.my-class选择器会选择所有带有class="my-class"的元素。

.my-class {
    color: blue;
}

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是’_‘或者’-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

3、ID选择器

根据HTML元素的id属性值选择元素。例如，#my-id选择器会选择带有特定id="my-id"属性的元素。

#my-id {
    background-color: yellow;
}

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头

4、通配符选择器

让页面中所有的标签执行该样式,通常用来清除间距

*{
             margin: 0;  //外间距
             padding: 0;  //内间距
}

5、后代选择器：

选择一个元素的后代（直接或间接子元素）。例如，div p选择器会选择所有直接或间接位于<div>元素内的<p>元素。

div p {
    font-weight: bold;
}

6、子代选择器：

选择一个元素的直接子元素。例如，div > p选择器会选择所有作为<div>元素直接子元素的<p>元素。

div > p {
    text-decoration: underline;
}

7、相邻兄弟选择器

相邻兄弟元素就是紧挨着的两个标签

<style>
 
   /* 相邻兄弟,会选择到box后面紧挨着的p,那么就是内容为111的p标签 */
    .box+p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
 
</style>

8、通用兄弟选择器

<style>
 
   /*通用兄弟选择器,会选择到.box后面所有的兄弟p,那么就是除了内容为'44444'以外的所有p*/
   .box~p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
 
</style>

9、属性选择器

根据HTML元素的属性值选择元素。
属性选择器一共有7种写法

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]
例如，a[href="https://www.example.com/"]选择器会选择所有链接到https://www.example.com/的链接。

a[href="https://www.example.com/"] {
    color: green;
}

10、伪类选择器

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
:not() 将符号条件的元素去除

11、伪元素选择器

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)

(3)简单样式

1、字体属性：(font)

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体 (font-family)“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana

2、背景属性： (background)

色彩 {background-color: #FFFFFF;}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(…) repeat fixed left top;}

区块属性(Block)

字间距 {letter-spacing: normal;} 数值

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进 {text-indent: 数值px;}

垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距 word-spacing: normal; 数值

空格 white-space: pre;(保留) nowrap;(不换行)

3、盒子属性： (Box)

width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左

边框属性(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

边框宽度 border-width；

边框颜色 border-color；

简写方法border：width style color;

4、列表属性： (List-style)

类型 list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像list-style-image: url(…);

(4)简单定位方法

静态定位（默认） static
相对定位 relative
绝对定位 absolute
固定定位 fixed

1、静态定位

position: static;

2、相对定位

position: relative;

“相对定位”, 相对的是它原来在文档流中的位置（或者默认位置）.
相对定位下，可以利用 top 和 left 属性相对于元素在文档流中的常规位置重新定位，但是页面上其他元素位置都不变，设置相对定位的元素，其常规位置的空间依然保留着（依然有和原先同样大小的体积）
可以给 top 和 left 属性设定负值，把元素向上、向左移动。

相对定位，可以简单理解为：元素原位置的空间依然保留不被占用，元素移动到页面上的其他位置了，元素在新位置上响应事件。

3、绝对定位

position: absolute;

绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，
是默认的定位上下文 body）定位。但是会随着文档的滚动也一起滚动，所以滚动后该元素可能会滚动到屏幕外。
绝对定位的元素完全脱离了常规文档流，它会相对于顶级元素 body 定位。
绝对定位元素默认的定位上下文是 body 元素，但该上下文可以修改。

4、固定定位

position: fixed;

固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。固定定位适合做悬浮标签效果，页面滚动时始终悬浮在某个特定位置不变。
页面在最顶端时，固定定位和绝对定位的显示效果类似。但是一旦滚动，二者就显现出差异了。
固定定位，常用于创建不随页面滚动而移动的导航元素

——————————————————————————————————
参考博客：
https://blog.youkuaiyun.com/weixin_48649246/article/details/127939139
http://t.csdnimg.cn/FVwbF
http://t.csdnimg.cn/9DqGy
http://t.csdnimg.cn/y1xMW