记录一些重要的知识点
CSS引入方式
- 行内样式：<h1 style="...">
- 内嵌样式：<style>…</style>
- 外联样式：xxx.css <link href="...">
颜色表示
- 关键字：red、green.......
- rgb表示法：rgb(255,0,0)、rgb(134,100,89)
- 十六进制：#ff0008、#cccccc、#ccc
CSS选择器:用来选取需要设置样式的元素(标签)
<span>标签
- <span>是一个在开发网页时大量会用到的没有语义的布局标签
- 特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开
路径
- 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
- 相对路径:从当前文件开始查找。(./:当前目录，../:上级目录)
超链接标签:<a>
属性:
- href:指定资源访问的url
- target:指定在何处打开资源链接
- self:默认值，在当前页面打开
- blank:在空白页面打开
text-decoration:规定添加到文本的修饰，none表示定义标准的文本（去除超链接下划线）
视频标签:<video>
- src:规定视频的url
- controls:显示播放控件
- width:播放器的宽度
- height:播放器的高度
<br> 换行
<hr>水平线
<p>...</p> 段落标签
<strong>、<b> 加粗
空格占位符
line-height:设置行高
text-indent:定义第一个行内容的缩进
text-align:规定元素中的文本的水平对齐方式
div
- 盒子:页面中所有的元素(标签)，都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
- 盒子模型组成:内容区域(content)、内边距区域(padding)、:边框区域(border)、外边距区域(margin)
布局标签:实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签:<div><span>
特点:
div标签:
- 一行只显示一个(独占一行)
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高(width、height)
span标签:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
CSS属性：
- width:设置宽度
- height:设置高度
- border:设置边框的属性，如:1pxsolid #080;
- padding:内边距
- margin:外边距 （上右下左）
注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding -top、padding -left、padding -right
表格标签
场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表
<table>：定义表格
<tr>：定义表格中的行，一个<tr>表示一行
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格
表单标签
场景:在网页中主要负责数据采集功能，如 注册、登录等数据采集
标签:<form>
表单项:不同类型的input 元素、下拉列表、文本域等
- <input>:定义表单项，通过type属性控制输入形式
- <select>:定义下拉列表
- <textarea>:定义文本域
属性:
- action:规定当提交表单时向何处发送表单数据，URL
- method:规定用于发送表单数据的方式。GET、POST
get:表单数据拼接在url后面，?username=java,大小有限制
post:表单数据在请求体中携带，大小没有限制
表单项
- <input>:表单项，通过type属性控制输入形式
- <select>:定义下拉列表，<option>定义列表项。
- <textarea>:文本域
