我爱编程

HTML学习笔记（完）

2018-04-11  本文已影响0人  墨荀

概述

在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时，所整理的笔记。
笔记内容为根据个人需求所整理，并不完善，仅供参考。
于2018.05.16 23时学习完全部课程。

1. WebStorm设置&快捷键

1.1 WebStorm设置

1.2 WebStorm快捷键

1.3 快捷编辑

2. 字符集

<html>
    <head>
        <meta charset=“UTF-8” />
    </head>
    <body>
        ......
    </body>
</html>

常用字符集：

注意：

3. DTD文档声明

在HTML文件第一行告诉浏览器，当前网页用的是哪个版本的HTML规范来编写的。

HTML5:

<!DOCTYPE html>

该声明是向下兼容的，即兼容HTML和XHTML。

4. 标签

4.1 img标签

作用

代码

<img src="图片路径">

属性

  • width：宽度
  • height：高度
    - 如果只指定了width/height，系统会自动根据宽高比调整height/width
  • title：鼠标悬停时显示的内容
  • alt：图片挂掉后显示的内容

4.2 br标签

作用

代码

<br>

注意：

尽量别用，用p标签代替。

4.3 a标签

作用

代码

<a href=“目标地址”>要显示的内容（可以是文字也可以是图片）</ a>

属性

4.4 base标签

作用

代码

<head>
<base target=“_blank/_self”>
</head>

注意
如果base标签和a标签都指定了网页打开方式，则以a标签指定的方式打开。

4.5 假链接

也就是空链接，没有具体指向

代码

4.6 锚点

操作

注意

4.7 列表

无序列表（用得最多）

格式

<ul>
    <li>列表条目内容</li>
</ul>

应用场景

注意
ul标签里面只放li标签，但是li标签里面还可以放其他标签

有序列表（用得最少，不建议用）

格式

<ol>
    <li>列表条目内容</li>
</ol>

应用场景

注意
ol标签里面只放li标签，但是li标签里面还可以放其他标签

定义列表

格式

<dl>
    <dt>标题</dt>
    <dd>标题对应的描述</dd>
</dl>

应用场景

注意

4.8 表格标签table

格式

<table>
    <tr>
        <td></td>
    </tr>
</table>

属性

细线表格

表格标签的其他标签

表格标题标签：caption

标题单元格标签：th

单元格合并

给td标签添加单元格合并属性

4.9 表单标签form

表单就是专门用来收集用户信息的

格式

<form>
    <表单元素>
</form>

常见表单元素：

input标签

输入标签，重点是type属性。

type属性值说明：

label标签

把文字和输入框关联起来

格式

注意
也可以直接给文字&输入框添加label标签，但是不推荐。

datalist标签

格式

<datalist>
    <option>待选项内容</option>
</datalist>

绑定

注意
不推荐使用，因为多数浏览器不支持。

除了按钮类型的input标签以外，其他类型的标签都可以通过value属性来指定将来提交到服务器的值

非input标签

select标签

下拉列表

格式
格式一

<select>
    <option>列表数据</option>
</select>

格式二

<select>
    <optgroup label=“分组名称”>
        <option>列表数据</option>
    </optgroup>
</select>

注意

textarea标签

定义一个多行的输入框

格式
<textarea></textarea>

注意

4.10 video标签

格式一
<video src=“资源路径”></video>

格式二

<video>
    <source src=“webm格式文件路径” type=“video/webm”></source>
    <source src=“mp4格式文件路径” type=“video/mp4”></source>
    <source src=“ogg格式文件路径” type=“video/ogg”></source>
</video>

属性

注意

4.11 audio标签

格式一
<audio src=“资源路径”></audio>

格式二

<audio>
    <source src=“wav格式文件路径” type=“audio/wav”></source>
    <source src=“mp3格式文件路径” type=“audio/mp3”></source>
    <source src=“ogg格式文件路径” type=“audio/ogg”></source>
</audio>

属性

4.12 详情和概要标签

格式

<details>
    <summary>概要信息</summary>
    详情信息
</details>

4.13 marquee标签（滚动条&公告栏）

格式
<marquee>滚动内容</marquee>

属性

注意
marquee标签不是W3C推荐的，但是各大浏览器对其支持特别好

4.14 更多标签

4.15 字符实体

4.16 div和span标签

div作用：一般用于配合CSS完成网站基本布局

span作用：一般用于配合CSS修改网页中的一些局部信息

div和span的区别

容器级的标签和文本级的标签的区别

5. CSS

格式

<style type="text/css">
    标签名称{
        属性名称：属性对应的值;
        ......
    }
</style>

5.1 文字属性

样式属性

粗细属性

大小属性

字体属性

文字属性的缩写

格式

font:style weight size family;

注意

文字阴影

格式：

text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色;

注意点：

5.2 文本属性

装饰属性

水平对齐属性

缩进属性

5.3 颜色属性

格式：color：值;

取值

5.4 CSS选择器

标签选择器

作用：根据指定的标签名称，选择当前页面中所有指定的标签，然后设置属性。

格式：

标签名称{
    属性：值;
    ...
}

注意点

id选择器

作用：根据指定的id名称找到对应的标签，然后设置属性。

格式：

#id名称{
    属性：值;
    ...
}

注意点

类（class）选择器

作用：根据指定的类名称找到对应的标签，然后设置属性。

格式

.类名称{
    属性：值;
    ...
}

注意点

后代选择器

作用：找到指定标签的所有后代标签，设置属性。

格式

标签名称1 标签名称2{
    属性：值;
}

注意点

子元素选择器

作用：找到指定标签中所有特定的直接子元素，然后设置属性。

格式

标签名称1>标签名称2{
    属性：值;
}

注意点

交集选择器

作用：给所有选择器选中的标签中，相交的那部分标签设置属性

格式

选择器1选择器2{
    属性：值;
}

注意点

并集选择器

作用：给所有选择器选中的标签设置属性

格式

选择器1,选择器2{
    属性：值;
}

注意点

兄弟选择器

相邻兄弟选择器

作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

选择器1+选择器2{
    属性:值;
}

注意点

通用兄弟选择器

作用：给指定选择器后面的所有选择器选中的所有标签设置属性

选择器1~选择器2{
    属性:值;
}

注意点

序选择器

用法

关于n的其他用法

属性选择器

作用：根据指定的属性名称找到对应的标签，然后设置属性

用法

通配符选择器

作用：给当前页面所有标签设置属性

用法

*{
    属性:值;
}

注意点：因选择了当前页面所有标签，所以当页面标签多时，性能就会降低，所以不推荐使用。

<a name="wys">伪元素选择器</a>

作用：

给指定标签的内容前面或后面添加一个子元素

格式：

选择器名称::before{
    /*指定添加的子元素中存储的内容*/
    content:"内容";
    /*指定添加的子元素的宽高*/
    width:值;
    height:值;
    /*指定添加的子元素的显示模式*/
    display:值;
    /*隐藏添加的子元素*/
    visibility:值;
}

选择器名称::after{
    /*指定添加的子元素中存储的内容*/
    content:"内容";
    /*指定添加的子元素的宽高*/
    width:值;
    height:值;
    /*指定添加的子元素的显示模式*/
    display:值;
    /*隐藏添加的子元素*/
    visibility:值;
}

a标签的伪类选择器

a标签的伪类选择器是专门用来修改a标签不同状态下的样式的。

a标签的状态：

格式：

/*修改从未被放过状态下的样式*/
:link{
    属性:值;
}

/*修改被访问过状态下的样式*/
:visited{
    属性:值;
}

/*修改鼠标悬停状态下的样式*/
:hover{
    属性:值;
}

/*修改鼠标长按状态下的样式*/
:active{
    属性:值;
}

注意点：

  1. a标签的伪类选择器可以单独出现，也可以一起出现
  2. a标签的伪类选择器如果一起出现，那么有严格的顺序要求。编写的顺序必须要按照link visited hover active的顺序编写，即爱恨原则（love&hate）。
  3. 如果默认状态的样式和被访问过状态的样式一样，那么可以缩写——写到标签选择器中。
  4. 在企业开发中编写a标签的伪类选择器最好都写在标签选择器的后面
  5. 在企业开发中和a标签盒子相关的属性（限时模式、宽高、padding、margin等）都写在标签选择器中
  6. 在企业开发中和a标签文字、背景相关的属性都写在伪类选择器中

5.5 CSS大三特性

继承性

作用

给父元素设置一些属性，子元素也可以使用。

注意点

应用场景

一般用于设置网页上的一些共性信息，例如网页的文字颜色、字体、文字大小内容，一般为body{}

层叠性

作用

层叠性就是CSS处理冲突的能力。

注意点

层叠性只有在多个选择器选中“同一个标签”，然后又设置了“相同的属性”，才会发生层叠性。

优先级

作用

当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。

优先级判断的三种方式

!important

作用

用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高。

用法

在属性: 值;的值后面;前面添加!important。

注意点

权重问题

作用

当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高

权重规则

注意点

5.6 CSS元素的显示模式

在HTML中HTML将所有的标签分为两类，分别是容器级和文本级；

在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素。

块级元素=容器级标签+p标签

行内元素=文本级标签-p标签

块级元素和行内元素的区别

5.7 CSS元素显示模式转换

块级元素、行内元素、行内块级元素三者之间可以相互转换

方法：

设置元素的display属性

  • block 转换为块级元素
  • inline 转换为行内元素
  • inline-block 转换为行内块级元素

5.8 CSS背景和精灵图

背景颜色

用法：background-color: 值;

取值：

背景图片

用法：background-image:url();

注意点：

背景平铺属性

用法：background-repeat: 值；

取值

应用场景

可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度。

背景定位

用法：background-position: 水平值 垂直值;

取值

注意点：填写像素时一定要写单位px

背景关联

作用：默认情况下背景图片会随着滚动条滚动而滚出界面，修改背景图片和滚动条的关联方式可以实现背景图片不跟随滚动条的效果。

用法：background-attachment:值;

取值

背景缩写

用法：background:背景颜色 背景图片 平铺方式 关联方式 定位方式;

注意点

CSS精灵图

作用：可以减少请求的次数，降低服务器的处理压力，需要配合背景图片和背景定位来实现。

5.9 盒模型

边框属性

用法：

取值

内边距

边框和内容的距离就是内边距

格式

注意点

外边距

标签和标签之间的距离就是外边距

格式

注意点

盒子模型

HTML中所有的标签都可以设置：

盒子的宽度和高度

盒子box-sizing属性

保证盒子新增padding或border之后，盒子元素的宽度和高度不变

取值

盒子阴影

格式：

box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

注意点：

清空默认边距

原因及作用

在企业开发中为了更好的空值盒子的宽高和计算盒子的宽高等等。<u>所以在企业开发中，编写代码之前第一件事情就是清空默认的边距。</u>

用法:在CSS中添加

*{
    margin: 0;
    padding: 0;
}

注意点

行高和字号

行高：line-height

5.10 网页布局方式

标准流（文档流、普通流）排版方式

浏览器默认排版方式，有两种排版方式：垂直排版（块级元素）和水平排版（行内元素、行内块级元素）。

浮动流排版方式

是一种“半脱离标准流”的排版方式，<u>只有水平排版方式，且只有左对齐和右对齐两个属性</u>。

格式

float:left;

float:right;

特点

浮动元素排序规则

浮动元素高度问题

清除浮动

定位流排版方式

相对定位

就是相对于自己以前在标准流中的位置来移动。

用法：

position:relative;

注意点：

应用场景：

绝对定位

绝对定位就是相对于body来定位

用法：

position:absolute;

规律/参考点：

以下提到的“定位流”指的是相对定位、绝对定位、固定定位，不包含静态定位。

注意点：

水平居中：

  1. 设置绝对定位元素的left:50%;
  2. 设置绝对定位元素的margin-left:-元素宽度的一半px;
子绝父相

相对定位的弊端：相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局。

绝对定位的弊端：默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化。

<u>鉴于以上情况，因此企业开发中都是相对定位和绝对定位相结合使用，而其中99.99%的组合是子绝父相——子元素使用绝对定位，父元素使用相对定位。</u>

固定定位

可以实现背景关联background-attachment:fixed;的作用，即元素和滚动条的关联方式可以实现元素不跟随滚动条的效果。

用法：

position:fixed;

注意点：

静态定位

所有元素默认情况下就是静态定位

z-index属性

默认情况下所有的元素都有一个默认的z-index属性，取值是0。z-index属性的作用是专门用于控制定位流元素的覆盖关系的。

覆盖关系

  1. 默认情况下定位流的元素会盖住标准流的元素。
  2. 默认情况下定位流的元素后面编写的会盖住前面编写的。
  3. 如果定位流的元素设置了z-index属性，那么z-index属性值大的元素会显示在z-index属性值小的元素上面。

注意点：

  1. 从父现象

    1.1 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性值比较大，谁就显示在上面。

    1.2 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性值比较大，谁就会显示在上面。

网页布局总结

5.11 过渡模块

过渡三要素

  1. 必须要有属性发生变化
  2. 必须告诉系统哪个属性需要执行过渡效果
  3. 必须告诉系统过渡效果持续时长

实现方法：

  1. 给元素添加伪类选择器:hover，设置要实现过渡效果的属性。
  2. 给元素设置过渡参数，参考格式。

格式：

/*高速系统那个属性需要执行过渡效果*/
transition-property:属性;

/*告诉系统过渡效果持续的时长*/
transition-duration:时长;

/*告诉系统延迟多少秒之后才开始过渡动画*/
transition-delay:时长;

/*告诉系统过渡动画的运动的速度*/
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;

连写：

transition: 过渡属性 持续时长 运动速度 延迟时间;

简写：

transition:all 时长;

注意点：

编写过渡效果的步骤：

  1. 不要管过渡，先编写基本界面
  2. 修改我们认为需要修改的属性
  3. 再回过头去给被修改属性的那个元素添加过渡即可

5.12 2D转换模块

格式：

/*旋转，dge代表旋转的度数*/
transform:rotate(值dge);

/*平移*/
transform:translate(水平值px,垂直值px);

/*缩放，两个参数一样时，可以只写一个参数*/
transform:scale(水平缩放倍数,垂直缩放倍数);

/*综合*/
transform:rotate(值dge) translate(水平值px,垂直值px) scale(水平缩放倍数,垂直缩放倍数);

/*修改2D模块的形变中心点*/
transform-origin:水平坐标值 垂直坐标值;

/*透视属性*/
perspective:值;

注意点：

5.13 动画模块

动画模块与过渡模块的异同：

动画三要素及格式：

  1. 告诉系统需要执行哪个动画

    animation-name:自定义动画名;

  2. 告诉系统我们需要创建一个动画及内容

    方法一：
@keyframes 自定义动画名 {
    from{
        
    }
    to{
        
    }
}

方法二：
@keyframes 自定义动画名{
 0%{
     
 }
 50%{
     
 }
 100%{
     
 }
}
可以写0-100个动画状态

  3. 告诉系统动画持续的时长

    animation-duration:时长;

其他属性：

/*告诉系统多少秒之后执行动画*/
animation-delay:时长;

/*告诉系统动画执行的速度*/
animation-timing-function:值;

/*告诉系统动画执行的次数，取值为“infinite”时，表示无限次*/
animation-iteration-count:次数;

/*告诉系统是否需要执行往返动画，默认为normal*/
animation-direction:alternate;

/*告诉系统当前动画是否需要暂定，默认running（执行动画）*/
animation-play-state:paused;

/*告诉系统动画的等待状态和结束状态的样式*/
animation-fill-mode:值;
取值：none：不做任何改变
     forwards：让元素结束状态保持最后一帧的样式
     backwards：让元素等待状态时显示第一帧的样式
     both：即forwards和backwards。

连写/简写：

连写：
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

简写：
animation:动画名称 动画时长;

5.14 3D转换模块

格式：

给元素的父元素添加
transform-style:preserve-3d;

5.15 背景相关

背景尺寸属性

用法：

background-size:属性;

属性取值：

背景图片定位区域属性

用法：

background-origin:属性值;

属性取值：

背景绘制区域属性

用法：

background-clip:属性值;

属性取值：

5.16 CSS书写格式

书写位置：

  1. 行内样式：直接将CSS代码写到开始标签中
  2. 内嵌样式：在一对head标签当中写上一对style标签，然后在style标签中编写CSS代码
  3. 外链样式（企业开发中一般都使用这种方式）：新建一个.css文件，把CSS代码写到这个文件中，然后通过link标签把这个文件和.html文件关联起来
  4. 导入样式：新建一个.css文件，把CSS代码写到这个文件中，然后通过@import把这个文件和.html文件关联起来

外链样式和导入样式的区别：

  1. 外链样式是通过link标签关联，而导入样式是通过@import关联，而@import是CSS2.1推出的，所以有兼容问题
  2. 外链样式在显示界面的时候，会先加载CSS样式，再加载结构，所以用户看到界面时一定已经设置了样式；外链样式在显示界面的时候，会先加载结构，再加载CSS样式，所以用户看到界面时不一定已经设置了样式。

静态网站实践

准备工作

  1. 创建站点文件夹（可以用中文名），并在站点文件夹里创建子文件夹（不能用中文）：css、js、images文件夹和index.html

  2. 重置所有默认的样式和设置一些全局样式，并且将设置样式的css文件和对应的界面关联起来。

    /*1.默认样式*/
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration:none;}


/*2.全局样式*/
/*具体根据实际情况调整*/
body{
 font-family:"微软雅黑";
 font-size:12px;
 color:#999
 background-color:#f5f5f5;
}

  3. 分析布局，划分区域。

关于CSS

推荐将“重置所有默认的样式和设置一些全局样式”创建为一个css文件，然后每个网页再单独创建一个对应的css文件。

实践补充知识点

  1. 因为Logo相当于是企业的门面，所以企业开发中一般都会采用好h1标签包裹a标签，然后给a标签设置背景图片的方式来呈现Logo。

    /*css代码*/
h1{
    width:100%;
    height:100%;
}
h1>a{
    display:inline-block;
    width:100%;
    height:100%;
    background:url("Logo地址");
}

    /*html代码*/
<h1><a href="" title="企业名称"></a></h1>

  2. 当图片的宽度大于父元素时（广告图）

    1. 不能使用margin:0 auto;或者text-align:center;让图片居中。
    2. 可以使用定位流让图片居中，但是定位流的弊端也比较明显：1.需要写三行代码；2.必须知道图片的宽度。
    3. 推荐使用margin:0 -100%;，但是使用这种方法的前提是父元素必须设置text-align:center;。因为图片过大，浏览器底部会有滚动条，这时可以给父元素设置overflow:hidden;。

  3. 伸缩布局？ul下面的li浮动之后，使li之间的空隙均匀分布

    display:flex;
justify-content:space-berween;

  4. opacity:值;，这是给元素设置透明度（取值0~1）的，特点是该元素的子元素也会跟着透明。

上一篇 下一篇

猜你喜欢

热点阅读