前端——Html+CSS
目录
CSS引入方式
颜色表达方式
CSS选择器
去掉超链接的下划线
路径表示
行高和首行缩进
常见标签
布局标签
flex布局
表单标签
表单项标签
改变鼠标指针的样式
表格标签
div{ box-sizing: border-box; }
CSS引入方式
具体有3种引入方式，语法如下表格所示：
| 名称 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对。 | 中国新闻网 |
| 内部样式 | 定义 | |
| 外部样式 | 定义标签，通过href属性引入外部css文件 |
对于上述3种引入方式，企业开发的使用情况如下：
-
行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
-
内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）
-
外部样式：html和css实现了完全的分离，企业开发常用方式。
颜色表达方式
在前端程序开发中，颜色的表示方式常见的有如下三种：
| 表示方式 | 属性值 | 说明 | 取值 |
| 关键字 | 颜色英文单词 | red、green、blue | red、green、blue... |
| rgb表示法 | rgb(r, g, b) | 红绿蓝三原色，每项取值范围：0-255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) |
| rgba表示法 | rgba(r, g, b, a) | 红绿蓝三原色，a表示透明度，取值：0-1 | rgb(0,0,0,0.3)、rgb(255,255,255,0.5) |
| 十六进制表示法 | #rrggbb | #开头，将数字转换成十六进制表示 | #000000、#ff0000、#cccccc，简写：#000、#ccc |
CSS选择器
选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。
| 选择器 | 写法 | 示例 | 示例说明 |
| 元素选择器 | 元素名称 {...} | h1 {...} | 选择页面上所有的标签 |
| 类选择器 | .class属性值 {...} | .cls {...} | 选择页面上所有class属性为cls的标签 |
| id选择器 | #id属性值 {...} | #hid {...} | 选择页面上id属性为hid的标签 |
| 分组选择器 | 选择器1,选择器2{...} | h1,h2 {...} | 选择页面上所有的和 |
| 属性选择器 | 元素名称[属性] {...} | input[type] {...} | 选择页面上有type属性的标签 |
| 元素名称[属性名="值"] {...} | input[type="text"] {...} | 选择页面上type属性为text的标签 | |
| 后代选择器 | 元素1元素2{...} | form input {...} | 选择 |
优先级：
id>类>元素
去掉超链接的下划线
路径表示
在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：
-
绝对路径:
-
绝对磁盘路径:
-
绝对网络路径:
-
-
相对路径:
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
行高和首行缩进
p {
line-height: 2; /* 两倍的行高 */
text-indent: 2em; /* 2个字符的缩进 */
}
常见标签
| 标签 | 作用 | 属性/说明 |
| 视频标签 | src：指定视频的url（绝对路径/相对路径） | |
| controls：是否显示播放控件 | ||
| width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 | ||
| height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 | ||
| 图片标签 | src, width，height | |
| 段落标签 | ||
| 换行标签 | ||
| / | 加粗 | 具有强调语义 |
| / | 下划线 | 具有强调语义 |
| / | 倾斜 | 具有强调语义 |
| 删除线 |
在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：
| 字符实体 | 属性/说明 |
| 空格 | |
| < | < |
| > | > |
布局标签
-
布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
-
标签：
特点：
标签：-
一行只显示一个（独占一行）
-
宽度默认是父元素的宽度，高度默认由内容撑开
-
可以设置宽高（width、height）
标签：-
一行可以显示多个
-
宽度和高度默认由内容撑开
-
不可以设置宽高（width、height）
-
padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：
-
padding: 20px 20px 20px 20px;-------> 表示上、右、下、左都是20px； -
padding: 20px 10px;----------------------> 表示上下是20px，左右是10px； -
padding: 20px;-----------------------------> 表示上、右、下、左都是20px；
flex布局
-
flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
-
通过给父容器添加flex属性,来控制子元素的位置和排列方式。
属性 说明 取值 含义 display 模式 flex 使用flex布局 flex-direction 设置主轴 row 主轴方向为x轴，水平向右。（默认） column 主轴方向为y轴，垂直向下。 justify-content 子元素在主轴上的对齐方式 flex-start 从头开始排列 flex-end 从尾部开始排列 center 在主轴居中对齐 space-around 平分剩余空间 space-between 先两边贴边，再平分剩余空间 .header{
background-color: #FEDCDD;
width: 100%;
height: 130;
/* 将里面两个盒子左右分布 */
display: flex;
justify-content: space-between; /* 两边贴边 */
}
表单标签
-
表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
-
表单标签:
-
表单属性:
-
action: 规定表单提交时，向何处发送表单数据，表单提交的URL。 -
method: 规定用于发送表单数据的方式，常见为： GET、POST。-
GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。 -
POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
-
-
-
表单项标签: 不同类型的input元素、下拉列表、文本域等。
-
input: 定义表单项，通过type属性控制输入形式 -
select: 定义下拉列表 -
textarea: 定义文本域
-
注意事项：
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。
用户名:表单项标签
在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：
-
: 表单项 , 通过type属性控制输入形式。
type取值 描述 text 默认值，定义单行的输入字段 password 定义密码字段 radio 定义单选按钮 checkbox 定义复选框 file 定义文件上传按钮 date/time/datetime-local 定义日期/时间/日期时间 number 定义数字输入框 email 定义邮件输入框 hidden 定义隐藏域 submit / reset / button 定义提交按钮 / 重置按钮 / 可点击按钮 -
: 定义下拉列表,定义列表项 -