前端——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页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：

字符实体	属性/说明
 	空格
&lt;	<
&gt;	>

布局标签

• 布局标签：实际开发网页中，会大量频繁的使用 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	定义数字输入框
email	定义邮件输入框
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;
}