前端系列
一、HTML5
二、CSS
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3
一、HTML基本介绍
1、网页
网页的基本组成：
–网页是HTML格式的文件，网站是使用HTML,CSS等制作的网页集合。
–基本元素：图片，文字，声音，视频，链接等，以htm或html后缀结尾的文件
2、 HTML的认知：
–HTML是超文本标记语言，由一套标记标签组成。是一种描述前端的语言。
–所谓超文本：1.超出文本限制，可以加入图片，声音，动画，多媒体等内容（超出文本限制）
2.超级连接文本，可以从一个文化跳到另一个文本上面
3、 Web标准的组成部分：
结构html：对网页元素的整理和分类
表现css：用于设置网页元素的版式，颜色，大小等外观样式
行为Javascript：网页模型的定义和交互的编写
4、html标签之间的关系：包含关系(父子关系)和并列关系(兄弟关系)
5、html的元素：开始标签与结束标签之间的内容，叫元素。
6、html的属性：写在开始标签中的内容，叫属性。
通用标签属性：
class：规定元素的类名
id：规定元素的唯一ID
title：规定元素的额外信息
style：规定元素的样式
1、Emmet语法
生成标签：标签名+Tab
生成多个标签：标签名*数量
生成父子级标签：ul>li
生成兄弟级标签：div+span
生成带类名或id名的标签：.类名、#id名
生成顺序div标签：div$5
生成带内容的标签：div{哈哈哈}
二、HTML文件的基本框架
根标签，头部标签，标题标签，主体标签
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>我的页面</title>
</head>
<body>
</body>
</html>
1.HTML的版本号
<!DOCTYPE html>
作用：告诉浏览器使用哪种HTML版本来显示网页，写在第一行。
2.lang语言种类
<html lang="zh-CN">
作用：用来定义当前文档显示的语言en:英语、zh-CN:中文。
3.字符集：编码类型(UTF-8、GBK...)
<meta charset="UTF-8">
4.<html>：根标签
5.<head>：头部标签，包含文件的一些常规信息，如：<meta>、文档标题、文档标题图标、CSS样式
6.<body>：主体标签，包含正文信息。
7.<title>：文档标题，设置页面的名字
8.html常用标签：
1.标题 <hn></hn>
2.文本 <font></font>
3.盒子 <div> <p>
3.图片 <img>
4.链接 <a>
5.列表 <lu><li></li></ul> <ol><li></li></ol>
6.表格 <table></table>
7.表单 <form></form>
5.-注释标签：<!-- -->
2、标签
在文档头部中，一般包括标题、图标和元信息，在头部的信息一般在标题栏显示。
<meta>标签
1、声明编码类型
<meta charset="UTF-8">
2、定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3、定义web页面描述：
<meta name="description" content="这是HTML页面">
4、定义页面作者：
<meta name="author" content="作者名">
5、每30秒刷新页面：
<meta http-equiv="refresh" content="刷新时间">
<meta http-equiv="refresh" content="30">
6、实现页面自动跳转
<meta http-equiv="refresh" content="执行跳转时间; url=跳转地址">
<meta http-equiv="refresh" content="5; url=https://www.csdn.net/">
<meta>属性：
charset=""属性：
值：编码类型
name=""属性：
author：声明作者
description：定义web的描述
keywords：定义搜索引擎关键字
generator：
application-name：
http-equiv属性：
refresh：页面刷新时间
viewport属性（用于移动端优化）:
2、标题栏图标
<link>
做用设置标题栏图标
格式
<link rel="icon" type="image/x-icon" href="图标地址">
实例
在网页标题左侧显示：<link rel="icon" type="image/x-icon" href="图标地址">
在收藏夹显示图标：<link rel="shortcut icon" type="image/x-icon" href="图标地址">
<link>标签属性：
rel：声明当前文档与被链接文档的关系
type：声明被链接文档的类型，类型可以是：icon、png、jpg、gif。
href：声明图标的地址
三、文本标签：
1、标题标签：
标签作用：块级元素，具有文字加粗，编制内容索引。
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
hn标签属性：
align属性:
作用：设置标题的对齐方式。
左对齐：left
右对齐：right
居中对齐：center
两端对齐：justify
例子
<h1 align="center">山有木兮木有枝，心悦君兮君不知。</h1>
2、段落标签：
作用：分段，段落与段落之间会有间隙
<p aling="center">分段</p>
标签属性：
align属性：
作用：设置段落的对齐方式。
左对齐：left
右对齐：right
居中对齐：center
两端对齐：justify
3、字体标签：
<font></font>
作用设置文字格式
<font size=10 color="red" face="黑体">你好，世界</font>
标签的属性：
size属性：
作用：设置文字大小。
10px
color属性：
作用：设置文字颜色
red
face属性：
作用：设置文字的字体
4、文本格式化标签：
粗体： <strong>加粗</strong>
粗体： <em>加粗</em>
加粗： <b>加粗</b>
斜体： <cite></cite>
斜体： <i>斜体</i>
下划线： <ins>下划线</ins>
下划线： <u>下划线</u>
上标： <sub>上标</sub>
下标： <sup>下标</sup>
删除线： <del>删除线</del>
删除线： <s>删除线</s>
5、 换行标签：
</br>
6、水平线标签
作用：显示水平线
<hr size="10" width="50%" align="right" color="red" noshade>
属性：
size：
作用：设置水平线粗细
width：
作用：设置水平长度
align：
作用：设置水平线对齐方式
左对齐：left
右对齐：right
居中对齐：center
color：
作用：设置水平线颜色
noshade：
作用：取消水平线阴影
5、特殊文字样式：
空格 空格
< < <小于号
= = 等于符号> >大于号
! ! 惊叹号
” " " 双引号# 数字标志
$ $ 美元标志
% % 百分号
& & &
‘ ' 单引号
( ( 小括号左边部分
) ) 小括号右边部分
- * 星号
- + 加号
, , 逗号
– - 连字号
. . 句号
/ / 斜杠
: : 冒号
; ; 分号
? ? 问号
@ @
[ [ 中括号左边部分
\ \ 反斜杠
] ] 中括号右边部分
^ ^ Caret
_ _ 下划线
` `
{ { 大括号左边部分
| | 竖线
} } 大括号右边部分
~ ~ Tilde
— � 未使用
四、盒子标签
1、块元素显示时，会以新行开始的
块级元素：
<div>
<p> 段落
<h1><h6>标题
<ol> 有序列表
<ul> 无序列表
<dl> 自定义列表
<table> 表单
<form> 表单
<address> 地址
<blockquote> 引用
块级元素特点
1.独占一行。
2.可以设置元素的高度、宽度、行高和顶底边距。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
1.
作用：
<div>标签时块元素，主要是组合HTML元素的容器。<div>标签用来布局，独占一行，块级元素，类似于一个超大盒子。
2、行内元素标签
行内元素：
<span></span>
<a></a> 链接
<img > 图片
<br> 换行
<input></input> 文本框
<textarea></textarea> 多行文本
<select></select> 下拉列表
<strong></strong> 加粗
<b></b> 加粗
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
<em></em> 斜体
<i></i> 斜体
<del></del> 删除线
行内元素特点：
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
1.
作用：
<span>标签是内联元素，可作为文本容器。<span>标签用来布局，一行可多个<span>标签，行级标签，类似于一个小盒子。
五、图片标签：
1、路径
绝对路径：一个完整路径。
相对路径：
当前层：./
上一层：../
2、图片标签
<img src="图片路径" width="500" height="600" border="10" alt="秘密" title="图片" />
属性：
src属性：
作用：图片路径
相对路径
绝对路径
width：
作用：图片宽度
100px
100%
height：
作用：图片高度
100px
100%
border：
作用：图片边框的粗细
10px
align：
作用：对齐方式
左对齐：left
右对齐：right
居中对齐：center
alt：
作用：替换文本，当图片不能显示，就会显示文字。
title：
作用：提示文本，当鼠标放在图片上，就会显示的文本。
hapace：
作用：图片周围水平空白，10px
vspace：
作用：图片周围垂直空白，10px
(2). src后面接图片路径，有绝对路径和相对路径
绝对路径：C:\Users\曾钟宁\Desktop\Web/a.jpg
网络的绝对路径：https://pics7.baidu.com/feed/fcfa.png?token=cfe6
相对目录：/表示下一级，../表示上一级，
六、链接标签
1、
作用：网页跳转、发送邮件、下载文件
超链接:
<a href="链接目标的地址" target="目标窗口的弹出方式" download="规定被下载的超链接目标。">文本，图片，音频，视频，表格</a>
<a href="https://baidu.com" target="_self">百度一下</a>
<a>标签的属性：
href：指定链接目标的地址
target属性：
作用：指定链接页面的打开方式：
_self：为默认值,当前窗口打开，
_blank：为新窗口打开。
_parent：将文档载入父窗口或包含超连接引用的框架的框架集
_top：将文档载入包含该链接的窗口，取代任何当前窗口显示的框架
download属性：
作用：规定被下载的超链接目标
文件名
2、超链接的四种状态
link状态：未被访问的状态，文字蓝色，有下划线。
hover状态：鼠标移动到链接上的状态，鼠标变手型，有下划线。
activer状态：正在点击状态，文字红字，有下划线。
visited状态：已被访问状态，文字紫色，有下划线。
3、超链接的分类:
外部链接：<a href="https://baidu.com">百度一下</a>
内部链接：网站内部的网页之间的相互连接，<a href="文件名.后缀">文件</a>
空连接：<a href="#">文件</a>
下载连接：<a href="img.zip">下载文件.zip/.exe</a>
网页元素链接：文本，图片，音频，视频，表格
锚点链接：可以快速定位页面中的某个位置
在链接文本的href属性中，设置"#id"，在目标位置标签里添加一个id属性值。
<a href="#id">跳转元素</a>
<h3 id="id">跳转位置</h3>
七、列表标签：
1、 无序列表：
<ul>
<li>列表项</li>
<li>列表项</li>
......
</ul>
<ul>标签属性：
type属性：
作用：设置符号样式：
disc：实心圆
circle：空心圆
square：方块
<li>子标签属性：
无序列表是并列关系，<ul>里面只能放<li>标签，<li>标签里面可以容纳所有元素
2、有序列表：
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>
<ol>标签属性
type属性：
作用：设置序号样式
1、A、a、I
start属性：
作用：设置起始值
3、 自定义列表
<dl>
<dt>列表小标题</dt>
<dd>内容</dd>
<dd>内容</dd>
......
</dl>
<dl>标签的属性
八、表格标签
作用：展示数据
1、表格标签：
表头单元格里的文字会加粗的居中
<table border="1">
<caption>四季特困</caption>
<tr>
<th>春季</th>
<th>夏季</th>
<th>秋季</th>
<th>冬季</th>
</tr>
<tr>
<td>春困</td>
<td>夏乏</td>
<td>秋倦</td>
<td>冬眠</td>
</tr>
</table>
标签含义：
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格的单元
2、 表格的相关属性：
tatle标签属性：
width属性：规定表格的宽度
height属性：规定表格的高度
align属性：规定表格元素的对齐方式，left、center、right。
border属性：规定表格单元是否有边框，1、""
cellpadding属性：规定单元边沿与内容之间的空白，默认为1像素
cellspacing属性：规定单元格之间的空白，默认为2像素
caption标签属性：
align属性：
设置表格标题位置
默认:top、底部:bottom、右边:right
tr标签属性：
width属性：规定表格行的宽度
height属性：规定表格行的高度
align属性：规定表格行的水平对齐方式，left、center、right。
valign属性：规定表格行的垂直对齐方式，默认:middle、top、bottom
bgcolor属性：设置表格行的背景颜色
background属性：设置表格行的背景图
3、td标签属性：
colspan； 合并行单元格colspan 写在最左行
rowspan；合并列单元格rowspan 写在最上列
width：规定表格行的宽度
height：规定表格行的高度
align：规定表格行的水平对齐方式，left、center、right。
bgcolor：设置表格行的背景颜色
background：设置表格行的背景图
valign：规定表格行的垂直对齐方式
默认:top
middle
bottom
baseline
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border=1 cellpadding="0" cellspacing="0" align="center" width=400px height=200px>
<caption><h2>热门歌曲</h2></caption>
<tr>
<th align="center">序号</th>
<th align="center">名称</th>
<th align="center">歌手</th>
<th align="center">时长</th>
</tr>
<tr>
<td align="center">01</td>
<td align="center">明年今日</td>
<td align="center">陈奕迅</td>
<td align="center">02:34</td>
</tr>
<tr>
<td align="center">02</td>
<td align="center">青花瓷</td>
<td align="center">周杰伦</td>
<td align="center">02:56</td>
</tr>
</table>
</body>
</html>
九、表单标签：
表单的组成：表单域，表单元素，提示信息
1、表单域
用于定义表单域，以实现用户信息的搜集和传递
<form></form>
<form>标签的属性：
属性action：属性值url地址
作用：用于接收并处理表单数据的服务器的url地址
属性method：属性值get/post
作用：用于设置表单数据的提交方式
属性name：属性值名称
作用：用于指定表单域的名称，以区分同一个页面中的多个表单域
2、 表单元素
1）输入框元素：
<input type="属性值" name="元素名" value="请求输入" checked="" maxlength="30" />
input标签的属性：
type、name、value、checked、maxlength
type属性的属性值：
text 定义单行的输入字段(文本框)，用户可在其中输入文字
password 定义密码字段，会进行掩码
radio 定义单选按钮，可以实现多选一，必须写上相同的name属性
checkbox 定义复选框，可以实现多选，必须写上相同的name属性
submit 定义提交按钮，可以把表单元素里的值提交给后台服务器
reset 定义重置按钮，可以重置表单中的所有数据
button 定义可点击按钮，(onclick=""，一般通过JavaScript启动脚本)
hidden 定义隐藏的输入字段
file 定义字段和“浏览”按钮，文件上传用(能上传头像之类的)
image 定义图像形式的提交按钮
属性name=用户自定义
作用：定义input元素的名称
属性value=用户自定义
作用：用于规定input元素的值
属性checked=checked
作用：规定input元素首次加载时应当被选中
属性maxlength=正整数
作用：规定输入字段中字符的最大长度
<label>标签：是input元素定义的标注标签
作用：增加input元素的点击范围
例如：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
点击按钮后触发的事件
onclick=""
2）下拉表单元素：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
......
</select>
在<option>中定义select="selected"时，当前项即为默认选中项
3）文本域元素：
textarea用于定义多行文本输入的控件(留言板之类的)
<textarea rows="3" cols="20">
文本
</textarea>
属性rows="显示的行数"
属性cols="每行的字符数"
3、CSS样式引入
1、标签：
<style>：样式定义
<link>：样式引用
2、属性：
rel="stylasheet" 外部样式表
type="text/cass" 引入样式的类型
margin-left 边距
3、三种样式表插入方法：
外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式：
<style type="text/css">
body {background-color.red}
p{margin-left:20px}
</style>
内联样式表：
<p style="color:red"></P>
十、HTML5的新特性
1、HTML5的文档结构标签
<section> 段落
<nav> 构建导航栏
<header> 页面的页眉
<footer> 页面的页脚
<article> 主体内容
<aside> 边界内容
<hgroup> 段落
<time> 日期/时间
<mark> 重点文字
2、视频标签：
<video src="视频文件路径" controls="controls"></video>
autoplay：当页面加载完视频自动播放
loop：视频结束重新播放
controls：显示浏览器控件
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
muted：如果出现该属性，视频的音频输出为静音。
url：当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。
3、音频标签：
<audio src="音频文件路径" controls="controls"></audio>
autoplay：当页面加载完音频自动播放
loop：音频结束重新播放
controls：显示浏览器控件
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
4、备份标签：
可以为video和audio标签提供多个备用文件<video controls="controls">
<source src="音频文件地址" type="媒体文件类型/格式">
<source src="音频文件地址" type="媒体文件类型/格式">
</video>
5、绘图标签
6、其他标签
<datalist> 描述细节
<summary> 细节显示
<figcaption>定义<figure>标签的标题
<figure> 段落
<ruby> 解释
<rt> 分隔
<meter> 定义度量衡
<command> 定义命令按钮
<menu> 定义菜单列表
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
