HTML与CSS基础
文章目录
1.HTML
HTML(HyperText Markup Language)：超文本标记语言
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
| 标签 | 描述 |
|---|---|
| <HTML> | 定义 HTML 文档 |
| <head> | 定义关于文档的信息 |
| <title> | 定义文档的标题 |
| <body> | 定义文档的主体 |
1.2 基础标签
| 标签 | 描述 |
|---|---|
| <h1> ~ <h6> | 定义标题，h1最大，h6最小 |
| <font> | 定义文本的字体、字体尺寸、字体颜色 |
| <b> | 定义粗体文本 |
| <i> | 定义斜体文本 |
| <u> | 定义文本下划线 |
| <center> | 定义文本居中 |
| <p> | 定义段落 |
| <br> | 定义折行 |
| <hr> | 定义水平线 |
| HTML 原代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或显示标记 |
| > ; | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
1.3 图片、音频、视频标签
| 标签 | 描述 |
|---|---|
| <img> | 定义图片 |
| <audio> | 定义音频 |
| <video> | 定义视频 |
-
img：定义图片
- src：规定显示图像的 URL
- height：定义图像的高度
- width：定义图像的宽度
-
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
-
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件
1.4 超链接标签
| 标签 | 描述 |
|---|---|
| <a> | 定义超链接，用于链接到另一个资源 |
- href：指定访问资源的URL
- target：指定打开资源的方式
- _self:默认值，在当前页面打开
- _blank：在空白页面打开
- _self:默认值，在当前页面打开
1.5 列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
- type：设置符号的类型
1.6 表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <tr> | 定义行 |
| <td> | 定义单元格 |
| <th> | 定义表头单元格 |
-
table：设置符号的类型
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
- tr：定义行
- bgcolor：背景色
- align：对齐方式
- td：定义单元格
- colspan：合并列
- rowspan：合并行
- th：定义表头单元格
- ：表格标题
- table：定义表格
1.7 布局标签
| 标签 | 描述 |
|---|---|
| <div> | 定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页 |
| <span> | 用于组合行内元素。 |
1.8 表单标签
| 标签 | 描述 |
|---|---|
| <form> | 定义表单 |
| <input> | 定义表单项，通过type属性控制输入形式 |
| <label> | 为表单项定义标注 |
| <select> | 定义下拉列表 |
| <option> | 定义下拉列表的列表项 |
| <textarea> | 定义文本域 |
1.9 表单项标签
<input>：表单项，通过type属性控制输入形式
input 标签有多个 type 属性。 type 属性的取值不同，展示的效果也不一样
| type 取值 | 描述 |
|---|---|
| text | 默认值。定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| hidden | 定义隐藏的输入字段 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| button | 定义可点击按钮 |
2. CSS
Cascading Style Sheet（层叠样式表），用于控制网页表现。
2.1 css 导入方式
CSS 导入方式就是 css 代码和 html 代码的结合方式。
CSS 导入 HTML有三种方式：
-
内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>内联方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，就需要在其他标签上写上相同的样式。复用性太差。
-
内部样式：定义<style>标签，在标签内部定义css样式
<style type="text/css"> div{ color: red; } </style>可以做到在该页面中复用。
-
外部样式：定义link标签，引入外部的css文件
编写一个css文件。名为：demo.css，如下:
div{ color: red; }在html中引入 css 文件。
<link rel="stylesheet" href="demo.css">这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用
link标签引入该css文件。
2.2 css 选择器
css 选择器就是选取需设置样式的元素（标签），比如如下css代码：
div {
color:red;
}
如上代码中的 div 就是 css 中的选择器。、
-
元素选择器
格式：
元素名称{color: red;} -
id选择器
格式：
#id属性值{color: red;} -
类选择器
格式：
.class属性值{color: red;}
扫一扫
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
