千峰-HTML5大前端面授2022年9月完结版[通俗易懂]

云烟 • 2023年 8月 24日上午10:00 • 未分类 • 阅读 277

欢迎大家来到IT世界,在知识的湖畔探索吧!

课程链接：https://www.itwangzi.cn/4801.html

HTML，为超文本标记语言

XHTML是可扩展超文本标记语言，是一种更纯洁，更严格，更规范的html代码。

html文件由文件头和文件体两部分组成。

标签的分类：双标签，单标签。

双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用，且必须合理嵌套。

单标签：在开始标签中进行关闭（以开始标签的结束而结束）。

HTML的全局标准属性

在HTML中，规定了8个全局标准属性。

class用于定义元素的类名。

id用于指定元素的唯一id。

style用于指定元素的行内样式。

title用于指定元素的额外信息。

accesskey用于指定激活某个元素的快捷键。

支持accesskey属性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>。

tabindex用于指定元素在tab键下的次序。

支持tabindex属性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

dir用于指定元素中内容的文本方向。

dir的属性值只有ltr和rtl两种，分别是left to right和right to left。

lang用于指定元素内容的语言。

HTML的全局事件属性

Window窗口事件

onload，在页面加载结束后触发。

onunload，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。

Form表单事件

onblur，当元素失去焦点时触发。

onchange，在元素的元素值被改变时触发。

onfocus，在元素获得焦点时触发。

onreset，当表单中的重载按钮被点击时触发。

onselect，在元素中文本被选中后触发。

onsubmit，在提交表单时触发。

Keyboard键盘事件

onkeydown，在用户按下按键时触发。

onkeypress，在用户按下按键后，按着按键时触发。

该属性不会对所有按键生效，不生效按键如：alt，ctrl，shift，esc。

onkeyup，当用户释放按键时触发。

Mouse鼠标事件

onclick，当在元素上单击鼠标时触发。

ondblclick，当在元素上双击鼠标时触发。

onmousedown，当在元素上按下鼠标按钮时触发。

onmousemove，事件会在鼠标指针移动时发生。

onmouseout，当鼠标指针移出元素时触发。

onmouseover，事件会在鼠标指针移动到指定的元素上时发生。

onmouseup，当在元素上释放鼠标按钮时触发。

Media媒体事件

onabort，当退出媒体播放器时触发。

onwaiting，当媒体已停止播放但打算继续播放时触发。

HTML元素

一个HTML文档包含的标签

<!DOCTYPE>，声明文档类型。

<html>，HTML元素真正的根元素。

<head>，定义html文档的文档头。

head中包含的元素title，定义HTML文档的标题base，为页面上的所有链接规定默认地址或者默认目标link，用于定义文档与外部资源之间的关系meta，提供关于HTML的元数据style，用于为HTML文档定义样式信息script，用于定义客户端脚本复制代码

body，定义html文档的文档体。

content-Type，用于设定网页的字符集，便于浏览器解析与渲染页面。

代码：

cache-control，用于告诉浏览器如何缓存某个响应及缓存多长时间。

参数：

no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存no-store，允许缓存，每次都要去服务器上下载完整的响应public，缓存所有响应private，只为单个用户缓存max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒<meta http-equiv=cache-control” content=”no-cache”>复制代码

expires，用于设定网页的到期时间，过期后重新到服务器上重新传输。

refresh，网页将在设定的时间内，自动刷新并转向设定的网址

Set-Cookie，用于设置网页过期。

无语义元素：<span>,<div>，<span>是内联标签，用在一行文本中，<div>是块级标签。

DIV+CSS

div用于存放需要显示的数据，css用于指定如何显示数据样式，做到结构与样式相互分离。

查看div+css样式HTML:点击下方链接跳转，可查看源码：

div-css.html

格式化元素

普通文本

<b>，定义粗体文本

<big>，定义大号字

<em>，定义着重文字

<i>，定义斜体字

<small>，定义小号字

<strong>，定义加重语气

<sub>，定义下标字

<sup>，定义上标字

<ins>，定义插入字

<del>，定义删除字

计算机输出

<code>，定义计算机代码

<kbd>，定义键盘输出样式

<samp>，定义计算机代码样本

<tt>，定义打字机输入样式

<pre>，定义预格式文本

术语

<abbr>，定义缩写

<acronym>，定义首字母缩写

<address>，定义地址

<bdo>，定义文字方向

<blockquote>定义长的引用

<q>，定义短的引用语

<cite>，定义引用，引证

<dfn>，定义一个概念，项目

图片元素

<img src=”图片的url” alt = “图像的替代文本”>复制代码

超链接元素

<a>标签的target属性，默认值为_self。

值说明

_self 在超链接所在框架或窗口中打开目标页面

_blank 在新浏览器窗口中打开目标页面

_parent 将目标页面载入含有该链接框架的父框架集或父窗口中

_top 在当前的整个浏览器窗口中打开目标页面，因此会删除所有框架

文本链接是<a></a>标签之间的元素内容为文本内容。

锚点链接是用#+对应的锚点，锚点通常用唯一属性值id设定。

图像热区链接

图像热区链接，是什么呢？当你在看一些购物网页的时候，一张图片上，可以在不同的地方链接到不同的目标位置，点击不同的地方可以跳转到不同的网页，这也是做商城项目一般要用到的技术。

这个时候不是<a>标签元素了，而是<area>元素。

<area>元素的属性有两个shape，cords属性。

shape 属性说明 cords 属性说明

circle圆形 x,y,r (x,y) 为圆心坐标，r为半径

rect 矩形 x1,y1; x2,y2 (x1,y1) 为左上角坐标，(x2,y2)为右下角坐标

poly 多边形 x1,y1;x2,y2;x3,y3;… 分别是各个点的点坐标

<area>的坐标系，原点为图片的左上角,x轴正方向向右，y轴正方向向下

图像热区链接的使用，<map>标签定义一个image-map，可以含一个以上的热区<area>，每个热区都有独立的链接。

要为<map>标签赋予name属性。

将<img>标签的usemap属性与<map>标签的name属性相关联。

空链接

空链接是指未指派目标地址的超链接。

空链接的代码：

javascript: void(0)<a href=””></a><a href=”#”></a><a href=”javascript:void(0)”></a>复制代码

列表元素

整合列表html网页，点击跳转：ul-ol.html

无序列表，<ul>定义无序列表，<li>定义列表项。

<ul>的type属性值：disc点，square方块，circle圆，none无.

有序列表，<ol>定义有序列表，<li>定义列表项。

<ol>的type属性值：数字，大写字母，大写罗马数字，小写字母，小写罗马数字。

start属性定义序号的开始位置。

定义列表<dl>，定义列表内部可以有多个列表项标题，每个列表项标题用<dt>标签定义，列表项标题内部又可以有多个列表项描述，用<dd>标签定义。

表格

整合表格html网页，点击跳转：table.html

<table>定义表格

<caption>定义表格标题

<tr>定义若干行

<td>定义若干单元格

<th>定义表头

表格分头部，主体，底部：<thead>,<tbody>,<tfoot>三个标签。

属性说明

border 设置表格的边框宽度

width 设置表格的宽

height 设置表格的高

cellpadding 设置内边距

cellspacing 设置外边距

<td>的两个属性：colspan用于定义单元格跨行，rowspan用于定义单元格跨列

<tbody>,<thead>,<tfoot>标签通常用于对表格内容进行分组。

表单由<form>标签定义，action属性定义了表单提交的地址，method属性定义表单提交的方式。

代码：

<input type=”text”><input type=”password”><input type=”radio”><input type=”checkbox”><input type=”submit”><input type=”reset”><input type=”button”><input type=”image”><input type=”file”><input type=”hidden”>复制代码

<select><option>size属性用来设置选择栏的高度，multiple属性用来决定是多选列表，还是单选selected=”selected”复制代码

表单控件，用于输入更多的文本

<textarea>元素

<textarea>标签具有name,cols,rows3个属性。

name用于提交参数

value用于输入文本内容

cols和rows分别用于文本框的列数和行数，宽度和高度。

效果：

自我评价：

代码：

<form action=”web” method=”post”> 自我评价：<br/> <textarea rows=”10″ cols=”50″ name=”introduce”> </textarea> <br/> <input type=”submit” id=”” name=””></form>复制代码

frameset

<frameset>定义一个框架集，用于组织多个窗口，每个框架存有独立的html文档

<frameset>不能与<body>共同使用，除非有<noframe>元素

<frame>用于定义<frameset>中一个特定的窗口。空元素<frame/>

frame属性

属性说明

src 需要显示的html文档

frameborder 定义框架的外边框，属性值为0或者1

scrolling 定义是否显示滚动条,有3个值：yes,no,auto

noresize=”noresize” 定义该框架无法调整大小，默认是可以调整的

marginheight和marginwidth属性定义上下左右的边距

<noframe>，用于为那些不支持框架集的浏览器显示文本

代码：

<!DOCTYPE html><html><head><meta charset=”utf-8″> <title>frameset</title></head> <frameset cols=”25%,50%,25%”> <frame src=”https://blog.csdn.net/qq_36232611″ scrolling=”no” noresize=”noresize”></frame> <frame src=”https://juejin.im/user/5e477d7ce51d4526c550a27d” ></frame> <frame src=”https://www.jianshu.com/u/c785ece603d1″ ></frame> </frameset> <noframes> <body>您的浏览器无法处理框架，请更换浏览器打开</body> </noframes></html>复制代码

预留字符

HTML 中的预留字符必须被替换为字符实体。

显示结果描述实体名称实体编号

空格

< 小于号 < <

> 大于号 > >

& 和号 & &

” 引号 ” “

‘ 撇号 ‘ (IE不支持)’

￠分（cent） ¢ ¢

£ 镑（pound） £ £

¥ 元（yen） ¥ ¥

€ 欧元（euro） € €

§ 小节 § §

® 注册商标 ® ®

™ 商标 ™ ™

× 乘号 × ×

÷ 除号 ÷ ÷

CSS基础知识

css，英文Cascading Style Sheets，中文名：级联样式表。层叠样式表。

css是一种表现语言，是对网页语言的补充。

css用于网页的风格设计，包括字体，颜色，位置等。

css使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。

引入外部样式文件：

导入外部样式文件:

使用内部样式定义：

使用内联样式定义：

<div style=”background-color: #ffffff; width: 100px; height: 100px;”></div>复制代码

css的两个特性：层叠，继承

层叠：层叠样式生效的优先级：

内联样式->内部样式->外部样式->浏览器默认效果。

继承，就是css属性可以从父元素向下传递到子元素。

css的选择器

元素选择器，是最简单的选择器。

通配符选择器，用”*”表示，表示对任意元素都有效。

属性选择器

格式：

E[attribute]{property1:value1; property2:value2;…}复制代码

语法说明

E[attribute]用于选取带有指定属性的元素

E[attribute=value]用于选取带有指定属性和指定值的元素

E[attribute~=value]用于选取属性值包含指定值的元素，该值必须是整个单词，可以前后有空格

E[attribute\|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”

css背景

css背景属性如下：

属性说明

background-color定义背景颜色

background-image定义背景图片

background-repeat定义背景图片是否重复以及其重复方式

background-attachment定义背景图片是否跟随内容滚动

background-position定义背景图片的水平位置和垂直位置

background可以用一条样式定义各种背景属性

background

background-color用于设置背景颜色，初始值为transparent透明色。

颜色取值3种如：颜色名，十六进制颜色，rgb函数。

background-image用于设置元素的背景图片，默认值为none。

background-repeat控制图像的平铺。

background-repeat默认值为repeat，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺rpeat-x，沿着y轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit。

background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为：scroll，表示可以随着页面其余部分的滚动而滚动。设置fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置inherit，继承父元素。

background-position用于设置背景图像圆点的位置。

background可以将background-color，background-position，background-attachment，background-repeat，background-image全部设置。

css字体属性

css常用字体属性表：

属性说明

font-family定义文本的字体系列

font-size定义文本的字体尺寸

font-variant定义是否以小型大写字母的字体显示文本

font-style定义文本的字体是否是斜体

font-weight定义字体的粗细

font可以一条样式定义各种字体属性

font-family用于设置元素的字体，该元素属性值一般可以设置多个字体。

font-size用于设置字体的尺寸。

font-style用于设置字体是否是斜体，默认值为normal，当设置为italic，显示为一个斜体的样式，当设置为oblique，显示为一个倾斜的样式。

font-variant用于设置字体使用小写字体，默认为normal，一旦设置为small-caps，将所有小写字母变为大写。

font-weight用于设置字体的粗细，normal值等于400，bold的值等于700。

font，可以设置font-family,font-size,font-style,font-variant,font-weight。

css文本属性表：

属性说明

color 文本颜色

direction 文本方向或者书写方向

letter-spacing 字符的间距

line-height 文本的行高

text-align 文本的水平对齐方式属性,设置元素中文本的水平方式，值有left，right，center，inherit。

text-decoration给文本添加修饰效果，值有underline为添加下画线，overline添加上画线，line-through 添加删除线，blink添加闪烁的效果,none无如何修饰,inherit。

text-indent 定义文本的首行缩进方式，默认值为0

text-shadow 为文本添加阴影效果

text-transform 切换文本的大小写

white-space 设置如何处理元素内的空白

word-spacing 定义单词之间的距离

css尺寸属性表：

属性说明

width 设置元素的宽度

min-width 设置元素的最小宽度

max-width 设置元素的最大宽度

height 设置元素的高度

min-height 设置元素的最小高度

max-height 设置元素的最大高度

css列表属性表：

属性说明

list-style-image 设置列表项标记样式为图像，none/inherit/url

list-style-position 设置列表项标记的位置，inside/outside/inherit

list-style-type 设置列表项标记的类型

list-style 可以用一条样式定义各种列表属性

list-style-type

值说明

disc 实心圆

circle 空心圆

square 方块

decimal 数字

low-roman小写罗马数字

upper-roman大写罗马数字

low-alpha小写字母

upper-alpha大写字母

none 无标记

inherit 继承父元素的该设置

css表格属性表：

属性说明

border-collapse设置是否合并表格边框

border-spacing设置相邻单元格边框之间的距离

caption-side 设置表格标题的位置

empty-cells 设置是否显示表格中空单元格上的边框和背景

table-layout 设置用于表格单元格列宽的设置方式

盒模型

css盒模型，包含元素内容content，内边距padding，边框border，外部距margin。

css内边距属性，元素的内边距在边框和内容之间。

css内边距的属性：

属性说明

padding-top元素的上内边距

padding-right元素的右内边距

padding-bottom元素的下内边距

padding-left元素的左内边距

padding用一个声明定义所有内边距属性

设置顺序为上右下左依次进行。

padding: 10px 10px 10px 10px;复制代码

css外边距的属性：

属性说明

margin-top定义元素的上外边距

margin-right定义元素的右外边距

margin-bottom定义元素的下外边距

margin-left定义元素的左外边距

margin用一个声明定义所有外边距属性

css边框的属性：

属性说明

border-top-style上边框的样式属性

border-right-style右边框的样式属性

border-bottom-style下边框的样式属性

border-left-style左边框的样式属性

border-style设置4条边框的样式属性

border-top-width设置上边框的宽度属性

border-right-width设置右边框的宽度属性

border-bottom-width设置下边框的宽度属性

border-left-width设置下边框的宽度属性

border-width设置4条边框的宽度属性

border-top-color设置上边框的颜色属性

border-right-color设置右边框的颜色属性

border-bottom-color设置下边框的颜色属性

border-left-color设置左边框的颜色属性

border-color设置4条边框的颜色属性

border-top用一条声明定义所有上边框的属性

border-right用一条声明定义所有右边框的属性

border-bottom用一条声明定义所有下边框的属性

border-left用一条声明定义所有左边框的属性

border用一条声明定义所有边框的属性

border-width一次定义4条边框的宽度

border-color一次定义4条边框的颜色

边框的样式

none，无边框效果

hidden，与none相同

dotted，点线边框效果

dashed，虚线边框效果

double，双线边框效果

solid，实线边框效果

groove，3D凹槽边框效果

ridge，3D凸槽边框效果

css轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

属性说明

outline-style 定义轮廓的样式属性

outline-color 定义轮廓的颜色属性

outline-width 定义轮廓的宽度属性

outline同一个声明中定义所有的轮廓属性

布局属性

布局属性是文档中元素排列显示的规则

布局方式3种：普通文档流，浮动，定位

css浮动涉及到的属性

属性说明

float 设置框是否需要浮动以及浮动方向

clear 设置元素的哪一侧不允许出现其他浮动元素

clip 裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则

overflow 设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll

display 设置元素如何显示，值none,block,inline,inline-block,inherit

Visibility 定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden

css定位的属性

属性说明

position 元素的定位类型，值static,absolute绝对，relative相对

top 元素上外边距

Right 元素右外边距

bottom 元素下外边距

left 元素的左外边距

z-index 元素的堆叠顺序

z-index 用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在position:absolute时有效。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/22749.html