本文介绍了HTML常用标签，如head、body、列表、表格、表单和文本格式化标签，以及CSS的基础知识，包括发展历史、作用、引用方式、三大特性和常用属性。CSS用于控制网页样式，提供页面布局、文本样式、图像处理等功能，并通过内部样式、外部样式和行内样式三种方式引用。文章还强调了CSS的层叠性、继承性和优先级特性。
以下内容将包括：
HTML常用标签 CSS基础(CSS发展历史、作用、引用方式、三大特性、常用属性。
目录
一、HTML常用标签
<html>：定义HTML文档的根元素。
<!DOCTYPE html>
<html>
<body>
<p>hi 这是cc的博客内容</p>
</body>
</html>
head标签
<head>：包含了页面的元信息，如标题、字符编码、关键字、描述等等。此外，<head> 还可以引用外部文件，如CSS样式表和JavaScript脚本。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head><title>：定义文档的标题。在浏览器上，<title> 的内容通常出现在标签页（tab）或书签中。
<meta>：定义HTML文档的元数据。包括字符集、描述、关键字、作者等信息。
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">body标签
<h1>-<h6>：定义HTML文档中的标题，数字表示标题的级别
<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<h1>hh</h1>
<h2>hh</h2>
<h3>hh</h3>
<h4>hh</h4>
<h5>hh</h5>
<h6>hh</h6>
<p>：定义段落，通常包含一段文字。<a>：定义超链接，用于在HTML文档中链接到其他页面或文件。href属性 指定链接的地址
<a href="www.baidu.com">这是百度的地址</a><video>:定义视频，用于在HTML文档中显示视频。
<video controls width="300" height="300">
<source src="videopreview.mp4" type="audio/mp4" />
</video>
<audio>:定义音频，用于在HTML文档中显示音频。
<audio controls>
<source src="五上期末四_(new).mp3" type="audio/mp3" />
</audio>
video和audio标签中： auto play是自动播放 muted 是静音播放
controls是显示播放的插件 loop是循环
<img>：定义图像，用于在HTML文档中显示图像。
width 和height能调整长宽
<img src="https://img2.baidu.com/it/u=1930699607,3364764968&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" />
列表
<ul>：定义无序列表，用于显示项目列表，每个项目之间没有特定的顺序。<ol>：定义有序列表，用于显示项目列表，每个项目都有一个编号或标记。<li>：定义列表项，用于包含列表中的每个项目。
ul和ol标签（父元素）下都包含有li标签（子元素）
<ol>
<li>cc1</li>
<li>cc2</li>
<li>cc3</li>
<li>cc4</li>
</ol>
<ul>
<li>cc1</li>
<li>cc2</li>
<li>cc3</li>
<li>cc4</li>
</ul> 
表格
<table>：定义表格，用于在HTML文档中显示数据。<tr>：定义表格行，用于将表格中的数据分为行.<td>：定义表格单元格，用于将表格中的数据分为
<table>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
合并单元格
表单
<form>：定义表单，用于在HTML文档中创建交互式表单，如登录表单或联系表单。<input>：定义表单输入字段，用于接收用户输入的数据，如文本框、单选按钮或复选框。<button>：定义按钮，用于触发特定的操作或事件。
<form action="/submit" method="POST">
<label>姓名：</label>
<input type="text" name="name"><br>
<label>密码：</label>
<input type="password" name="password"><br>
<button type="submit">提交</button>
</form> <form action="">
<!-- input 不同的 tyoe值-->
<!-- input text 写什么里面显示什么 -->
文本框：<input type="text"><br> <br>
<!-- password密码框 所有的内容都以圆点的形式出现 -->
密码框：<input type="password"><br> <br>
<!-- radio 只能多选一 -->
单选框：<input type="radio" ><br> <br>
<!-- checkbox 多选框 -->
多选框：<input type="checkbox"><br> <br>
<!--placeholder 占位符 提示用户输入内容的文本 //也是一个属性值 -->
<input type="text" placeholder="请输入 cc"><br> <br>
<!-- 单选框 name分组 实现单选功能 一组只能有一个被选中-->
性别：<input type="radio"name="gender" >男 <input type="radio" name="gender">女
<!-- 在input里面加checked 表示默认选择的 --><br><br>
性别：<input type="radio"name="gender" checked >男 <input type="radio" name="gender">女<br><br>
<!-- file 上传文件 -->
上传文件：<input type="file"><br> <br>
<!-- multiple上传多个文件-->
上传多个文件：<input type="file" multiple><br> <br>
<!-- input中的按钮 submit-提交 reset-重置 button-默认无功能 加js-->
提交按钮：<input type="submit"><br><br>
<!-- 要能用重置按钮 需要有一个表单预标签 父标签-->
<!-- <form action=""></form> -->
重置按钮：<input type="reset"><br><br>
<!-- 要给一个按钮添加文字 用value -->
普通按钮：<input type="button"><br><br>
普通按钮：<input type="button" value="cc">
<!-- button的不同type值 submit-提交 reset-重置 button-普通 等待js-->
<!-- 谷歌中button默认按钮时提交 button时双标签 -->
<button>我是按钮</button><br><br>
<button type="submit">提交按钮</button><br><br>
<button type="reset">重置按钮</button><br><br>
<button type="button">提交按钮</button><br><br>
</form>
<div>：定义文档中的块级元素，用于将文档分为独立的区域。<span>：定义文档中的行内元素，用于将文本分为独立的区域。
通常用于分组 HTML 元素。可以将一组相关的元素包含在一个<div> 元素内。 <span> 标签可用于对文本的样式进行操作。
<div class="container">
<h1>这是一个标题</h1>
<p>这是一段文字。</p>
<span style="color: red;">这是一段红色文字</span>
</div>HTML文本格式化标签
<b>：定义粗体文本<em>：定义着重文字<strong>：定义加重语气<i>：定义斜体字<samll>：使文本字体变小一号<sub>：定义下标字<ins>：定义上标字<del>：定义删除字
CSS（Cascading Style Sheets）
是一种用于网页样式设计的语言，它与HTML共同构成了Web页面的基础。
一、CSS发展历史
CSS最初由Håkon Wium Lie博士和Bert Bos博士在1994年提出，它的目标是将文档的内容与样式分离开来，使得文档结构更加清晰，样式更加易于管理。
1996年，W3C公布了第一个CSS规范（CSS1.0），标志着CSS正式诞生。
1998年，CSS2.0发布，增加了更多的样式属性和选择器。
2001年，CSS2.1发布，修复了一些早期版本中的错误，并增加了新的功能。
2011年，CSS3开始逐步发布，其新增了大量的扩展功能和模块，如颜色、文本效果、动画、布局等等。
目前，CSS3已经成为Web开发中必不可少的技术之一。同时，CSS还在不断地演进和完善，为Web开发提供了更加丰富的视觉体验。
二、CSS的作用
CSS主要用于控制网页的外观和样式效果，让网页更加美观、易于阅读和使用。
它可以实现以下功能：
1. 页面布局：通过盒子模型、浮动、定位等方式来控制页面元素的位置和大小，从而实现网页的布局效果。
2. 文本样式：通过字体、颜色、大小、对齐、装饰等属性来优化文字的展示效果，使得页面更加清晰、易于阅读。
3. 图像和多媒体：通过背景图像、边框、滚动条、动画等方式来控制图片和多媒体的展示效果，从而实现更好的视觉效果。
4. 响应式设计：通过媒体查询、弹性布局、网格系统等方式来实现响应式设计，使得网页在各种设备上都能够呈现出最佳的效果。
三、CSS的引用方式
在HTML中引用CSS有三种方式：内部样式表、外部样式表和行内样式表。
1. 内部样式表（内嵌式）
内部样式表是一种将CSS样式直接嵌入HTML文件中的方式。它通常位于<head>标签内，使用<style>标签来定义样式，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>内部样式表</title>
<style>
body {
background-color: #f3f3f3;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
</body>
</html>2. 外部样式表（外联式）
外部样式表是一种将CSS样式存储在独立文件中的方式。通过在HTML文件中引用外部样式表，可以实现多个页面共享相同的样式，同时也方便管理和维护。 创建外部样式表需要先新建一个以.css为后缀名的文件，在该文件中编写CSS样式，然后在HTML文件中使用<link>标签引用该样式表。
<!DOCTYPE html>
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
</body>
</html>3. 行内样式表（行内式）
行内样式表是一种将CSS样式直接应用到HTML标签中的方式。它通常不建议使用，因为它会增加HTML文件的复杂度，并且难以维护。
<!DOCTYPE html>
<html>
<head>
<title>行内样式表</title>
</head>
<body>
<h1 style="color:red;">这是一个标题</h1>
<p style="font-size:14px;">这是一段文本。</p>
</body>
</html> 四、CSS的三大特性
CSS具有三大特性：层叠性、继承性和优先级。
1. 层叠性 层叠性指的是CSS样式在页面上的叠加顺序。
当多个样式作用于同一个元素时，浏览器会按照一定的规则将它们叠加在一起形成最终样式效果。
css /* 外部样式表 */
h1 {
color: red;
}
h1 {
color: blue;
} h1元素最终的颜色为蓝色，因为后来的覆盖了之前的样式。可以有效地避免样式冲突和混乱。
2. 继承性 继承性指的是某些CSS属性的值可以被它们的子元素继承。
如果给body元素设置了字体大小和颜色，那么该页面中的所有文本元素都会继承这些属性。
css /* 外部样式表 */
body {
font-size: 14px; color: #333;
}在上面的例子中，h1、p等标签的字体大小和颜色都会继承body元素的属性。
3. 优先级 优先级指的是当多个CSS样式作用于同一个元素时，浏览器根据一定的规则来判断哪个样式具有更高的优先级。
通常，优先级从高到低分别为：行内样式 > ID选择器 > 类选择器和属性选择器 > 标签选择器和伪类选择器 > 通配符选择器和继承的样式。
例如：
css /* 外部样式表 */
h1 {
color: red; /* 普通标签选择器 */
}
#header h1 {
color: green; /* ID选择器 */
}
.header h1 {
color: blue; /* 类选择器 */
} 在上面的例子中，ID选择器的优先级最高，所以<h1>元素的颜色将为绿色。
五、CSS常用属性
1. 背景相关
- background-color：背景颜色。 - background-image：背景图片。
- background-repeat：背景图像的重复方式。 - background-position：背景图像的位置。
2. 盒子模型相关
- width：元素宽度。 - height：元素高度。
- padding：内边距。 - margin：外边距。 - border：边框。
3. 字体相关
- font-family：字体类型。 - font-size：字体大小。
- font-weight：字体加粗程度。 - color：文字颜色。
4. 文本相关
- text-align：文本对齐方式。-line-height：行高。
- text-decoration：文本装饰效果（如下划线、删除线等）。
5. 定位相关
- position：定位方式。 - top、left、right、bottom：定位距离。
以上内容就是cc第二周的预习博客 不足请指出 会马上改正！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
