HTML和CSS
什么是HTML?
- HTML是一门语言，所有的网页都是用HTML这门语言编写出来的
- HTML(HyperText Markup Language):超文本标记语言
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言
- HTML运行在浏览器上，HTML标签由浏览器来解析
- HTML标签都是预定义好的。例如：使用<img>展示图片
- W3C标准：网页主要由三部分组成
结构：HTML表现：CSS行为：JavaScript
一.HTML
1.快速入门
1.新建文本文件，后缀名改为.html2.编写HTML结构标签3.在<body>中定义文字
<html>
<head>
<title></title>
</head>
<body>
<fontcolor = "red">乾坤未定,你我皆是黑马</font>
</body>
</html>
2.基础标签
| 标签 | 描述 |
| <h1>~<h6> | 定义标题，h1最大，h6最小 |
| <font> | 定义文本的字体、字体尺寸、字体颜色 |
| <b> | 定义粗体文本 |
| <i> | 定义斜体文本 |
| <u> | 定义文本下划线 |
| <center> | 定义文本居中 |
| <p> | 定义段落 |
| 定义折行 | |
| <hr> | 定义水平线 |
html表示颜色：1.英文单词：red,pink,blue...2.rgb(值1，值2，值3)：值的取值范围：0~255rgb(255,0,0)3.#值1值2值了：值的范围：00~FF
转义字符
| HTML原代码 | 现实结果 | 描述 |
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| &trade | ™ | 商标 |
|   | 不断行的空白 |
3.图片、音频、视频标签
| 标签 | 描述 |
| <img> | 定义图片 |
| <audio> | 定义音频 |
| <video> | 定义视频 |
- img:定义图片
src:规定显示图像的URL(统一资源定位符)
height:定义图像的高度width:定义图像的宽度
- audio:定义音频。支持的音频格式：MP3、WAV、OGG
src:规定音频的URLcontrols:显示播放控件
- video:定义视频。支持的音频格式：MP4,WebM、OGG
src:规定视频的URLcontrols:显示播放控件
4.超链接标签
| 标签 | 描述 |
| <a> | 定义超链接，用于链接到另一个资源 |
- href:指定访问资源的URL
- target:指定打开资源的方式
_seIf:默认值，在当前页面打开_blank:在空白页面打开
5.列表标签
| 标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
有序列表
无序列表
type:设置项目符号
6.表格标签
| 标签 | 描述 |
| <table> | 定义表格 |
| <tr> | 定义行 |
| <td> | 定义单元格 |
| <th> | 定义表头单元格 |
- table:定义表格
border:规定表格边框的宽度width:规定表格的宽度cellspacing:规定单元格之间的空白
- tr:定义行
align:定义表格行的内容对齐方式
- td:定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
7.表格标签
| 标签 | 描述 |
| <div> | 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页 |
| <span> | 用于组合行内元素。 |
8.表单标签
- 表单：在网页中主要负责数据采集功能，使用<fom>标签定义表单
- 表单项（元素）：不同类型的input元素、下拉列表、文本域等
- form:定义表单
action：规定当提交表单时向何处发送表单数据，ULmethod：规定用于发送表单数据的方式
- get:浏览器会将数据直接附在表单的action URL之后。大小有限制
- post:浏览器会将数据放到http请求消息体中。大小无限制
| 标签 | 描述 |
| <form> | 定义表单 |
| <input> | 定义表单项，通过type属性控制输入形式 |
| <label> | 为表单项定义标注 |
| <select> | 定义下拉列表 |
| <option> | 定义下拉列表的列表项 |
| <textarea> | 定义文本域 |
9.表单项标签
二.CSS
什么是CSS?
- CSS是一门语言，用于控制网页表现
CSS(Cascading Style Sheet):层叠样式表
- W3C标准：网页主要由三部分组成
结构：HTML表现：CSS行为：JavaScript
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>Hello CSS~</div>
</body>
</html>
1.CSS导入方式
CSS导入HTML有三种方式：
1.内联样式：在标签内部使用style属性，属性值是css属性键值对
<divstyle="color:red">Hello CSS~</div>
2.内部样式：定义<style>标签，在标签内部定义css样式
<styletype="text/css">
div{
color:red;
}
</style>
3.外部样式：定义ink标签，引入外部的css文件
<linkrel="stylesheet"href="demo.css">
demo.css
div{
color:red;
}
2.CSS选择器
2.1概念：选择器是选取需设置样式的元素（标签）
div{
color:red;
}
2.2分类
2.2.1元素选择器
元素名称{color:red;}
div{color:red;}
2.2.2id选择器
#id属性值{color:red;}
#name{color:red;)
<divid="name">hello css2</div>
2.2.3类选择器
.class属性值{color:red;}
.cls{color:red;}
<divclass="cls">hello css3</div>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)