前端——Html+CSS
目录
CSS引入方式
颜色表达方式
CSS选择器
去掉超链接的下划线
路径表示
行高和首行缩进
常见标签
布局标签
flex布局
表单标签
表单项标签
改变鼠标指针的样式
表格标签
div{ box-sizing: border-box; }
CSS引入方式
具体有3种引入方式，语法如下表格所示：
| 名称 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对。 | <h1 style="xxx:xxx;">中国新闻网</h1> |
| 内部样式 | 定义<style>标签，在标签内部定义css样式。 | <style> h1 {...} </style> |
| 外部样式 | 定义<link>标签，通过href属性引入外部css文件 | <link rel="stylesheet" href="css/news.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 {...} | 选择页面上所有的<h1>标签 |
| 类选择器 | .class属性值 {...} | .cls {...} | 选择页面上所有class属性为cls的标签 |
| id选择器 | #id属性值 {...} | #hid {...} | 选择页面上id属性为hid的标签 |
| 分组选择器 | 选择器1,选择器2{...} | h1,h2 {...} | 选择页面上所有的<h1>和<h2>标签 |
| 属性选择器 | 元素名称[属性] {...} | input[type] {...} | 选择页面上有type属性的<input>标签 |
| 元素名称[属性名="值"] {...} | input[type="text"] {...} | 选择页面上type属性为text的<input>标签 | |
| 后代选择器 | 元素1元素2{...} | form input {...} | 选择<form>标签内的所有<input>标签 |
优先级：
id>类>元素
去掉超链接的下划线
<style>
/* 去掉超链接的下划线 */
a{
text-decoration: none;
}
</style>
路径表示
在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：
-
绝对路径:
-
绝对磁盘路径:
<img src="C:\Users\Administrator\Desktop\HTML\img\logo.png"> -
绝对网络路径:
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
-
-
相对路径:
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
行高和首行缩进
p {
line-height: 2; /* 两倍的行高 */
text-indent: 2em; /* 2个字符的缩进 */
}
常见标签
| 标签 | 作用 | 属性/说明 |
| <video> | 视频标签 | src：指定视频的url（绝对路径/相对路径） |
| controls：是否显示播放控件 | ||
| width：宽度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 | ||
| height：高度（像素/相对于父元素百分比）；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。 | ||
| <img> | 图片标签 | src, width，height |
| <p> | 段落标签 | |
| <br> | 换行标签 | |
| <b> / <strong> | 加粗 | <strong> 具有强调语义 |
| <u> / <ins> | 下划线 | <ins> 具有强调语义 |
| <i> / <em> | 倾斜 | <em> 具有强调语义 |
| <s> / <del> | 删除线 | <del> 具有强调语义 |
在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：
| 字符实体 | 属性/说明 |
| | 空格 |
| < | < |
| > | > |
布局标签
-
布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
-
标签：
<div><span> -
特点：
-
<div>标签：-
一行只显示一个（独占一行）
-
宽度默认是父元素的宽度，高度默认由内容撑开
-
可以设置宽高（width、height）
-
-
<span>标签：-
一行可以显示多个
-
宽度和高度默认由内容撑开
-
不可以设置宽高（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; /* 两边贴边 */
}
表单标签
-
表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
-
表单标签:
<form> -
表单属性:
-
action: 规定表单提交时，向何处发送表单数据，表单提交的URL。 -
method: 规定用于发送表单数据的方式，常见为： GET、POST。-
GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。 -
POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
-
-
<form action="/save" method="post">
姓名:<input type="text" name="name">
年龄：<input type="text" name="age">
<input type="submit" value="提交">
</form>
-
表单项标签: 不同类型的input元素、下拉列表、文本域等。
-
input: 定义表单项，通过type属性控制输入形式 -
select: 定义下拉列表 -
textarea: 定义文本域
-
注意事项：
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。
用户名: <input type="text" name="username">
表单项标签
在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：
-
<input>: 表单项 , 通过type属性控制输入形式。
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date/time/datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| 定义邮件输入框 | |
| hidden | 定义隐藏域 |
| submit / reset / button | 定义提交按钮 / 重置按钮 / 可点击按钮 |
-
<select>: 定义下拉列表,<option>定义列表项 -
<textarea>: 文本域
而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/save" method="post">
姓名：<input type="text"> <br></br>
密码：<input type="password"> <br></br>
性别：
<!-- value属性代表最终提交的值，默认为空字符串 -->
<label><input type="radio" name="gender" value="1">男</label>
<label><input type="radio" name="gender" value="0">女</label>
<br></br>
爱好：
<label><input type="checkbox">java</label>
<label><input type="checkbox">python</label>
<label><input type="checkbox">c语言</label>
<label><input type="checkbox"checked >web</label>
<label><input type="checkbox">三国杀</label>
<br></br>
图像：<input type="file"><br></br>
<!-- date属性，选择年月日 -->
生日：<input type="date"><br></br>
<!-- time属性，选择小时分钟 -->
时间：<input type="time"><br></br>
<!-- datetime-local属性，选择年月日和小时分钟 -->
日期和时间：<input type="datetime-local"><br></br>
学历：
<select>
<option>----------请选择----------</option>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
</section>
<br><br>
<!-- cols属性，设置文本域的宽度，rows属性，设置文本域的高度 -->
描述：<textarea cols="30" rows="10"></textarea><br></br>
<!-- value属性，设置隐藏域最后提交值服务器的值 -->
<input type="hidden" value="1">
<input type="button" value="按钮">
<input type="submit" value="提交"></input>
<button type="reset">重置 </button>
</form>
</body>
</html>改变鼠标指针的样式
.form button{
/* 当用户将鼠标移到该按钮上时，鼠标指针就会变为手形，表明这个按钮是可以点击的。 */
cursor: pointer;
}
表格标签
| 标签 | 描述 |
| <table> | 定义表格整体 |
| <thead> | 用于定义表格头部(可选) |
| <tbody> | 定义表格中的主体部分(可选) |
| <tr> | 表格的行，可以包裹多个 <td> |
| <td> | 表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th> |
div{ box-sizing: border-box; }
当你设置 box-sizing: border-box; 后，元素设定的宽度和高度将包含内容(content)、内边距(padding)和边框(border)的宽度。这意味着，如果同样设置宽度(width)和高度(height)为 100px，即使存在 10px 的 padding 和 1px 的边框，该 <div> 的总宽度和高度依然保持为 100px。浏览器会自动调整内容区域的大小来适应这些设定。
* {
box-sizing: border-box;
}