前端学习笔记（HTML/CSS）

Posted JeckXu666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习笔记（HTML/CSS）相关的知识，希望对你有一定的参考价值。

文章目录

WEB前端笔记整理

18年读大一时学习的前端设计，怼着一本书一直看，顺便做了笔记，整理了一下，发布出来，笔记内容特别乱我自己都看不懂了，但还是要发出来纪念纪念

参考书籍：《html5+CSS3网页设计案例教程》

一、HTML

1.1 HTML架构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>

以上是html的主要结构，一切便写在其上进行，

head内是一些预先定义修改，在其中修改，body内将直接应用。

body是其主体（身体），内容写在其中。

1.2 文字、图片、超链接

  • 文字
  1. 段落和行的标签
<p>段落内内容</p>

段落内包含新段落则在p后加对应数字eg：

<p>
wdqwdqwdqwdqwd<br>
<p1>dasdqwdsdasda</p1>
<p1>asdasdasdasd</p1>
</p>
  1. 标题标签
<h1>标题</h1>

有h1 h2 h3…到六为止，代表6种标题大小，标题内可继续接标题

<h1>
  标题1
<h2>标题2</h2>
</h1>

（注：字符由字符表找对应字符，空行<br> 输入多空行：br$*行数 ）
  • 图片

标签:

<src="图片名" alt="图片未显示时名称" title="对图片的描述">

title是指鼠标悬浮在图片上时，图片显示的名称。

常用图片格式jpg、png、gif

图片位置输入两种方法

（1）C盘为根盘，找对应位置

（2）相对路径，以当前盘为根盘，来找对应位置

…/是返回上一级目录

  • 超链接:对内容链接到另一个链接
  1. 标签链接
<a href="链接网址" target="blank">被链接对象</a>

target="blank"用来打开新网页使原网页不被覆盖

超链接的另一个用处，做书签，超链接到文本网页的自身的一个标记位置

要在需返回点设置id，超链接到该id

<p id="ID名字">书签</p>

<a href="#ID名字">返回书签</a>
  1. 美化超链接和鼠标（style）

A：link，链接在未访问前样式

A：hover，链接在鼠标悬浮时样式

A：active，链接在点击时的样式

A：visite，链接在访问后样式

鼠标特效：style样式内cursor属性来，包含18个子属性。

Auto自动，按默认来，crosshairs十字准线 default默认鼠标 hand手型 move移动型

Help帮助型 wait等待型 text文本型 n-resize箭头朝向上 s-resize箭头朝下

w-resize朝左 e-resize右，url自定义

1.3 音频和视频

  • 音频

Audio标签

<audio src="音频名字" controls="controls">音频无法显示时界面显示的内容</audio>

Controls是音频播放控件。

Audio标签内可加载的一些属性：autoplay自动播放、loop循环、preload预加载、

preload一些数据：auto页面加载后载入整个视频、meta页面加载后只载入元数据、none页面加载后不载入视频。

  • 视频

Video标签与audio基本相同，但多出几项内容：

标签内可用属性增加，width宽、height高，poster在视屏未加载好时视频界面显示一张图片让用户等待，

1.4 表格表单

  • 表格

应用table标签，构建一个表格，在表格内填内容用tr/th/td

表格不对边框设置则默认为0，即无边框。

<table border="2" >
    <tr>
        <th>标题</th>
            <td>内容1</td>
            <td>内容2</td>
    </tr>
    <tr>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
    </tr>
</table>

实际效果

标题内容1内容2
标题标题标题

tr表示表格中一行，th、td表示在一行中个每一个单元格，th是标题，与td作用差不多，只是字体更粗，起强调作用。

合并单元格：colspan 使单元格横跨列数，rowspan 使单元格横跨行数，（注横跨后要将被横跨的单元格删除）

<table border="2">
  <tr>
	<th colspan="2">标题</th>
    	<td>内容1</td>
   		<td>内容2</td>
  </tr>
  <tr>
     <th>标题</th>
    	 <td>内容</td>
  </tr>
</table>

样式如下

标题内容1内容2
标题内容
  • 表单：收集用户数据，然后传递给服务器。

输入内容：文本、单选、多选框、下拉框。

提交：提交按钮

http：超文本传输协议，浏览器与服务器通讯。即请求加应答。

请求方式有两种：get和post形式

代码形式

<form action="" method="" enctype="" >

​      用户名：<input type="text" name="user" size="" maxlength=""><br><!--用户名 -->
​       密码：<input type="password" name="pas" size="" maxlength=""><br><!-- 密码-->
​      性别：<input type="radio" name="sex>">男
​      <input type="radio" name="sex>">女
​      <input type="radio" name="sex>">未知 <!-- 单选框--><br>

​      兴趣：<input type="checkbox" name="xingqu" value="xq">跑步
​      <input type="checkbox" name="xingqu1" value="xq">打球
​      <input type="checkbox" name="xingqu2" value="xq">钓鱼
​      <input type="checkbox" name="xingqu3" value="xq">扁强哥<br>
​              （多选框）
​      家乡：<select name="jx">
​        <option value="jx">安徽</option>
​        <option value="jx">上海</option>
​        <option value="jx">北京</option>
​        <option value="jx">南京</option> 
​                （多选框）
​      </select><br>

​      自我介绍<textarea name="duo" cols="" rows="" wrap="" ></textarea>
​      <input type="submit" value="上交">  
​    </form>

Action是表单提交格式，method是提交方式post get，enctype是提交给服务器时使用什么形式提交。

Input是输入，type是输入类型，不同类型显示不同，name是指提交给服务器时数据的名称。

<textarea name="duo" cols="" rows="" wrap="" ></textarea>

上面是多行文本输入标签，可以输入一段话，cols指宽度，rows指高度，warp指输入内容大于范围时显示的内容。

size="" maxlength=""

size指输入框的长度，maxlength则是指输入的最多字符上限，仔细想想可用范围。

Value是定义一个值，相当于编号。

  • 按钮

普通按钮，button，单机后按照onclick中指定脚本运行。

<input type="button" name="123" value="单机" onclick="行为脚本">

提交按钮，submit，提价给服务器。

重置按钮，reset，清楚表单中数据。

<input type="时间属性" name="time" >

Date和time属性的应用

Date 日、月、年

Month 月、年

Week 周、年

Time 时间

Datetime 时间、日、月、年

Datetime-local 时间、日、月、年（本地）

<input type="数字属性" name="time" >

填写数字属性：number、range

Number是在空格内填写数字，而range则是以滑条形式调整数字。

例子：

输入<br>

​    <input type="number" name="time" min="1" max="99"><br>

​    <input type="range" name="time" min="1" max="99">

Require=”require”该命令插入在表单标签内，则该标签必需要填写，才能上交。

表单美化在P259页。

1.5 边框美化

三个属性：宽度、样式、颜色

Border-width、border-style、border-color

Border：none无边框，dotted 点线式边框，dashed 破折线式边框，solid直线式边框，double双线式边框，groove槽线式边框，ridge脊线式边框，inset内嵌效果的边框，outset突起效果的边框，

指定调节各方位边框效果：border-top-style，border-right-style，border-left-style，border-bottom-style，

调节各个位置颜色代码与其相同。

<p style="border:blue dashed 12px;width:100px;height:200px" ;>边框</p>

圆角边框：border-radius：值1/值2；两个数值分别定义，水平半径和数值半径，

只设一个值代表四分之一圆！border-radius后面接四个圆角值将依次使用到top-left，top-right，bottom-right，bottom-left。后面未设置的值默认与前面相同。

定义不同位置的圆角属性和上面相同。

二、CSS

2.1 字体特效属性概览

Font-family 字体

Font-size 字体大小

Padding-bottom…

Border-bottom …solid…padding指添加底线与文本距离，border指底线厚度，solid指固体填充颜色。

Background：url照片名 repeat-x bottom 添加背景图片，并让其在底部沿x轴重复平铺。

Text-shadow：阴影水平平移值；阴影竖直平移值；阴影模糊值；阴影颜色；

文字阴影效果。

<p style="text-shadow:4px 6px 10px black;font-size:100px;">一共四个字</p>

定义字体粗细：font-weight：100~900

四种定义：lighter细，normal 正常，bold 粗，bolder 更粗，

Font-variant：normal 保持原字体形状，比如大小写

限制文本长度，多出的给隐藏掉。

两种方式：clip隐藏部分用切割线；ellipsis隐藏部分用省略号

Font-size-adjust:none/number 强制字体尺寸相同，none表示没有，number数字

单词字体间距style=“word-spacing:normal或length”normal指正常距离，length则是设定一个值。文字间距离用letter-spacing。可以设定为负值。

文本修饰效果属性：style=“text-decoration：none/underline/overline/line-through/blink”

Underline下划线overline上划线 line-through删除线 blink闪烁

Text-transform对英文单词的处理：1、capitalize开头大写 2、uppercase 全大写3、lowercase全小写

对齐方式：text-align

Start向第一行开始对齐，end向第一行结束对齐，left左对齐，right右对齐，center居中对齐，justify两边对齐中间均匀分布，

首行缩进text-indent:加长度，表示缩进的长度

行高：line-height：加长度，可为负值 百分比表示字符长度，应用在块标签中，div

White-space空白处理，可应用在块或行元素中。（style）

Normal正常空白会被浏览器忽略 pre空白会被保留 类似

标签，nowrap文本不会换行直到遇到
标签为止，pre-wrap保留空白和换行符即enter键，pre-line不保留空白但保留换行符，inherit继承父元素属性，（嵌套）

2.2 CSS 美化

CSS 样式包含选择符、属性、属性值

<p style="color:red">内容</p>

P为选择符、style=color为属性、red为属性值。

1、样式分类：行内样式、内嵌样式、链接样式、导入样式

2、行内样式：在body内写入标签中

3、内嵌样式：写入head中

<style type="text/css">p样式</style>

Text/css是指应用的css属性，不同标准样式不同。

4、链接样式：放在head区域，链接到一个专门的样式文件，让代码分离，方便后期维护

<link rel="stylesheet" type="text/css" href="1.css"/>

Rel指链接到指定的样式表，stylesheet指样式表，type是文件类型，herf是链接文件位置，1.css是指文件名，此处涉及到相绝对（盘符）位置和相对位置的关系。

5、导入样式：@import””放在head中最前面，

<style>@import"1.css" ;@import"2.css"</style>

1.css为文件名，插入方式和上面相同，但可以导入多个文件。

优先级：行内样式>内嵌样式>链接样式>导入样式

内嵌样式中选择方式：1、标签选择 2、类选择器3、id选择器……………

1标签选择-就直接对应代码标签

2 类选择器-选择相同属性一类 例如class属性，见css笔记记载

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 <style>.aacolor: aquamarine</style>
</head>
<body>
<p class="aa">文字</p>
</body>

3略

4继承选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 <style>
 h1color: aquamarine
 h1 strongcolor: red
 </style>

</head>

在前一个基础上对其中部分标签添加其他属性

5伪类选择器

A标签的4种显示状态

<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="ie=edge">


  <title>Document</title>

 <style>


a:linkcolor: red

a:visitedcolor: red

a:hovercolor: red

a:activecolor: red

 </style>

</head>

Link指为访问时链接状态，visited指访问后链接状态，hover指悬浮在链接上时的状态，active指激活链接时链接的状态

状态指样式

2.3 选择声明

  • 集体声明
<style>

   h1,h2,pcolor: red

 </style>
  • 多重套嵌声明

与继承选择器相同

css两种方法注释：

1.通过link单独链接一个css文件

2.在body内写（麻烦）

style是css用于对外观（颜色、大小、背景等）的描述

不同描述间用；

分开“=”是一级等号

“：”是在一级等号内的二级等号

是一个重要符号，要多想想其用处。

css注释/注释/

html注释

  • 色彩模式rgb

r 浅深 0-255

g

b

eg：

color：rgb（232，242，5）； 百分比也可以，直接写名称也可以

选择器

选择器可以找到html中元素，并且将样式值传递给元素

  • 4大类

基本选择器

组合选择器

属性

伪元素

2.4 基本选择器

1通配符选择器 * （对所有选择器）（eg、border外边框 *divboeder:1px solid black)

2标签选择器 div (只针对标签div)

3id选择器（针对部分区域）在html需要做标记标签内写上id=“名字”，在另一处

用 #名字 来追述到标记标签，对之做特殊处理 （大小用font-size: px；来调大小）

注id具有唯一性 一个标签只有一个id，但一个id可以对多个标签。

4class选择器

eg html内

123

css内.名字font-size:100px

class与id不同，一个标签可以接好多个class

id class 在css中前面可以加标签名来限定范围

eg:div.名字font-size:100px

命名不能使用纯数字!!!

2.5 美化网页菜单

网页菜单常用块元素与列表组合

块元素：div、nav两者无区别，但方便分辨

无序列表：ul内接li

有序列表：ol内接li

自定义列表：dl dt dd依次内嵌

有序与无序列表美化通常通过，改变前面的符号或数字来美化，

详情看271，或百度，属性：list-style-type后接none则让其消失

将前面的符号或数字改变成图像：list-style-image:url(图片路径)

Padding-left设置图片与文字的距离

无序列表美化：276页

2.6 图片的美化style属性内

图片的大小：width和 height 只设定其中一个会等比例缩放，两个都设置则不会等比例缩放。

图像和文本和在一个行元素或块元素中则使用text-align文本对齐方式。单独放到其中也可以。

以上为横向对齐

纵向对齐：跟与图像在一行的元素来对齐，vertical-align

Sub与文本下标对齐，super与文本上标对齐，

Top middle bottom老三样

Length以基线为标准，可以为负数

浮动效果float：none/right右/left左

内边距padding-top padding-left padding-right padding-bottom

外边距：margin：用法和上面相同。

背景色：background-color：。。。

插入背景图片：background-image：url（图片名）

	<body style="background-image:url(正面.png)"> </body>

当背景图过小时几种重铺方法：background-repeat：repeat/repeat-x/repeat-y/no-repeat

第一个全部重铺，第二个x轴方向重铺，第三个y轴方向重铺，第四个不重铺

背景图片与文档一起滚动的问题，background-attachment：scroll/fixed

Scroll指图片与滑轮一起滚动， fixed指图片固定在可见屏幕内不动

Background-position：top，center，bottom/left，right

组合确定位置

背景图片大小：background-size：长度、宽度 只设一个则另一个默认，大小百分比，

Cover将图片缩放覆盖到适合定义区域，contain与cover差不多

加<>指代码不用输入

Background-origin：border/padding/content 背景图片显示地方定义：border指在border边框内显示，padding指在padding区域内显示，content在content区域内显示

218在看

图片包括背景图片上右下左的边距设定：margin：依次四个数值。

图片的美化style属性内

图片的大小：width和 height 只设定其中一个会等比例缩放，两个都设置则不会等比例缩放。

图像和文本和在一个行元素或块元素中则使用text-align文本对齐方式。单独放到其中也可以。

以上为横向对齐

纵向对齐：跟与图像在一行的元素来对齐，vertical-align

Sub与文本下标对齐，super与文本上标对齐，

Top middle bottom老三样

Length以基线为标准，可以为负数

浮动效果float：none/right右/left左

内边距padding-top padding-left padding-right padding-bottom

背景色：background-color：。。。

插入背景图片：background-image：url（图片名）

<body style="background-image:url(正面.png)"> </body>

当背景图过小时几种重铺方法：background-repeat：repeat/repeat-x/repeat-y/no-repeat

第一个全部重铺，第二个x轴方向重铺，第三个y轴方向重铺，第四个不重铺

背景图片与文档一起滚动的问题，background-attachment：scroll/fixed

Scroll指图片与滑轮一起滚动， fixed指图片固定在可见屏幕内不动

Background-position：top，center，bottom/left，right

组合确定位置

背景图片大小：background-size：长度、宽度 只设一个则另一个默认，大小百分比，

Cover将图片缩放覆盖到适合定义区域，contain与cover差不多

加<>指代码不用输入

Background-origin：border/padding/content 背景图片显示地方定义：border指在border边框内显示，padding指在padding区域内显示，content在content区域内显示

218在看

图片包括背景图片上右下左的边距设定：margin：依次四个数值。

一、2D转换

Transform底下的各种属性和transition一样需要加-webkit-来在定义；

1、 Translate（x，y）；在x和y轴上移动的距离，以左边和上边为基准线。

2、 rotate(度数deg) 允许负值，旋转顺时钟旋转。

3、 skew（）根据x轴和y轴翻转给定角度。单位deg

2.3 2D Transform 方法

matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。XY为转换倍数。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
函数描述

2.8 3D转换

函数描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

2.9 过渡效果

过渡是使过渡过程效果柔和化，使它不突兀。

Transition过渡属性简写版，分四类

  • Transition-property：需要过渡的属性名
  • Transition-duration：过渡效果花费的时间
  • Transition-timing-function：规定过渡时间曲线，
  • Transition-delay：规定过渡从什么时候开始（延迟）

黄色标记的四个可以直接简写在transition的后面。

简写的顺序是：名称-持续时间-速度曲线-延迟

写完后下面要在接一个-webkit-transition重复定义上面过渡才能使用。不同浏览器webkit不同

过渡曲线分类：

linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

3.0 动画效果

@keyframes：定义动画css样式，动画

Animation是除了animation-play-state以外所有动画属性的简写；

Animation-name：定义@keyframes的名称

Animation-duration是一个周期所花费的时间 默认0

Animation-timing-function：规定动画的速度曲线

Animation-delay：动画延迟

Animation-iteration-count：规定动画播放次数

Animation-direction：规定动画下一周期是否逆向播放，默认normal

Animation-play-state：规定动画是否运行或暂停

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放默认是 normal，alternate反向3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
animation-fill-mode规定对象动画时间之外的状态。3

定义动画时，@keyframes是用来单独写定义动画，然后在需要的对象上绑定动画，使用animation：+名字+持续时间；

@keyframes中用百分比定义各个时间段，from、to表示0%到100%；

以上是关于前端学习笔记（HTML/CSS）的主要内容，如果未能解决你的问题，请参考以下文章

前端学习 HTML+CSS进阶

python之 前端HTML/CSS基础知识学习笔记

前端基础（HTML，CSS，JavaScript）知识笔记，附：前端基础面试题！！

前端学习笔记--16/5~22/5 jQuery，HTML5+CSS3+JS 简易微信贺卡开发

附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记

附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记