前序知识
计算机基础知识
- 计算机由硬件+软件组成:
- 硬件:看得见,摸得着的物理部件
- 软件:可以指挥硬件工作的指令
- 软件的分类:
- 系统软件:windows,Linux,Android,Harmony等
- 应用软件:微信,QQ,王者荣耀等
- 整体图示:
C/S架构与B/S架构
- 上面提到的应用软件又分为两类:
- C/S架构: 特点:需要安装,偶尔更新,不跨平台,开发更具针对性
- B/S架构: 特点:无需安装,无需更新,可跨平台,开发更具通用性
C=>Client,B=>browser,S=>server
- 前端工程师主要负责编写B/S架构中的网页
网页相关概念
- 网址: 我们在浏览器上输入的地址
- 网页:浏览器所呈现的每一个页面
- 网站:多个网页构成一个网站
- 网页标准:
HTML简介
-
什么是HTML?
全称:Hyper Text Markup Language,超文本标记语言
超文本:指的是网页中可以包含图片,链接,音频,视频等多媒体内容
标记:文本要变为超文本,就需要用到各种标记符号
语言:每一个标记的写法都是有规定的,这种规定就是一种语言
-
相关国际组织
1.IETF:Internet Engineering Task Force,互联网工程任务组.创建于1985年,是一个开放的国际社区,致力于通过协商和合作,促进互联网的技术发展和标准化,以及解决互联网的技术问题
2.W3C:World Wide Web Consortium,万维网联盟.创建于1994年,是目前Web技术领域,最权威的标准化组织,致力于推动Web技术的发展和标准化,以及解决Web技术的问题
3.WHATWG:Web Hypertext Application Technology Working Group,Web超文本应用技术工作组.创建于2004年,是一个开放的社区,致力于推动Web技术的发展和标准化,以及解决Web技术的问题
-
HTML的发展历程
- HTML1.0:1993年,由蒂姆·伯纳斯-李创建,只有18个标签
- HTML2.0:1995年,由IETF发布,增加了表格,表单等标签
- HTML3.2:1997年,由W3C发布,增加了框架,层等标签
- HTML4.01:1999年,由W3C发布,增加了样式表,脚本等标签
- XHTML1.0:2000年,由W3C发布,是HTML4.01的升级版,更加严格
- HTML5:2014年,由WHATWG发布,增加了多媒体,图形,语义化等标签
HTML入门
HTML标签
- 标签(元素):是HTML中最基本的单位,由尖括号包裹的关键字
- 标签分为双标签和单标签(绝大多数都是双标签)
- 标签名不区分大小写,但是推荐使用小写
- 双标签:由开始标签和结束标签组成,中间包含了其他的标签或者文本
示例代码:
1
| <marquee>欢迎来到哈晓周</marquee>
|
- 单标签:只有一个开始标签,没有结束标签,一般用于插入一些单一的内容
示例代码:
1
| <img src="https://hitszzhou.oss-cn-shenzhen.aliyuncs.com/assets202402242255034.png" alt="哈晓周">
|
- 标签之间的关系:并列,嵌套.
HTML标签属性
- 用于给标签添加一些额外的信息
- 可以写在起始标签中或单标签中,形式如下:
1 2
| <标签名 属性名="属性值">内容</标签名> <标签名 属性名="属性值"/>
|
- 有些特殊的属性,没有属性名,只有属性值,例如:
- 注意点:
- 不同的标签有不同的属性;也有一些属性是所有标签都有的,例如id,class
- 属性名,属性值不能乱写,是W3C规定的
- 属性名,属性值不区分大小写,但是推荐使用小写
- 属性值可以用双引号,单引号,也可以不用引号,但推荐用双引号
- 标签中不能出现同名属性,否则后写的会失效
HTML基本结构
- 网页的基本结构如下:
- 想要呈现的内容写在body标签中
- head标签中写一些网页的基本信息,例如:标题,字符集,引入外部文件等,不会在网页中显示
- head标签中的title标签中写网页的标题,会显示在浏览器的标题栏中
1 2 3 4 5 6 7 8
| <html> <head> <title>网页标题</title> </head> <body> ...... </body> </html>
|
HTML注释
- 特点:注释内容不会在网页中显示
- 作用:用于对代码进行解释,调试,或者临时屏蔽一些代码
- 注释的写法:
- 注释的内容不能嵌套,如下反例:
HTML文档声明
-
作用:告诉浏览器当前网页是用哪个版本的HTML编写的
-
写法:
-
旧版写法:要依网页所用的HTML版本而定,写法很多.具体参考:W3C官网-文档声明
-
新版写法:
1 2 3 4 5
| <!DOCTYPE html> 或 <!DOCTYPE HTML> 或 <!doctype html>
|
HTML字符编码
- 计算机对数据的操作:
- 编码,解码,会遵循一定的规范,这种规范就是字符集
- 字符集有很多种,常见的有:
- ASCII:美国信息交换标准代码,只包含了英文字符,数字,符号,不包含中文
- ISO-8859-1:拉丁码表,包含了西欧字符,不包含中文
- GB2312:中国国家标准,包含了中文,英文,数字,符号
- GBK:GB2312的升级版,包含了更多的中文字符
- UTF-8:万国码,包含了全世界所有的字符,是目前最常用的字符集
- HTML中的字符编码写法:
1 2 3
| <head> <meta charset="UTF-8"/> </head>
|
HTML设置语言
- 作用:
- 告诉搜索引擎,网页是用哪种语言编写的,有利于搜索引擎优化
- 告诉浏览器,网页是用哪种语言编写的,让浏览器显示对应的翻译提示
- 写法:
- lang属性的编写规则:
- 第一种写法(推荐):语言代码-国家代码,例如:
- zh-CN:中文-中国
- zh-TW:中文-台湾
- zh:中文
- en-US:英文-美国
- en-GB:英文-英国
- 第二种写法:只写语言代码,例如:
- zh-Hans:中文-简体
- zh-Hant:中文-繁体
- W3School提供了一个语言代码参考和国家代码参考
- W3C官网上的说明:“Language tags in HTML”
HTML标准结构
- HTML标准结构如下:
1 2 3 4 5 6 7 8 9 10
| <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"/> <title>我是该网页的标题</title> </head> <body> ... </body> </html>
|
-
输入!,然后回车,可以自动生成HTML标准结构
-
配置VScode的内置插件emmet,可以对生成结构属性进行定制:
-
点击左下角的设置按钮
-
找到extensions中的emmet配置
-
如图方式添加一个"item-value"属性:
-
在存放代码的文件夹中,存放一个’.ico’图片,可以配置网页的图标
HTML基础
开发者文档
排版标签
标签名 |
标签含义 |
单/双标签 |
<h1>~<h6> |
标题标签 |
双标签 |
<p> |
段落标签 |
双标签 |
<div> |
块级标签,没有任何含义 |
双标签 |
- h1最多写一个,h2~h6可以写多个
- h1~h6不能嵌套使用
- p标签很特殊,其内部不能包含块级标签,例如:h1~h6,div,p
语义化标签
- 概念:用特定的标签,表达特定的含义
- 原则:标签的默认效果并不重要,重要的是标签的含义
- 优点:
- 有利于搜索引擎优化
- 有利于开发者阅读和维护代码
- 有利于开发者理解网页结构
- 有利于开发者写出更好的代码
块级元素与行内元素
- 块级元素:
- 特点:独占一行,可以设置宽高,默认宽度为100%
- 常见的块级元素:div,h1~h6,p,ul,ol,li,dl,dt,dd,table,form
- 行内元素:
- 特点:不独占一行,不能设置宽高,宽度随内容而定
- 常见的行内元素:span,a,img,em,strong,i,b,br,input,select,textarea
- 使用原则:
- 块级元素可以包含行内元素,也可以包含块级元素
- 行内元素只能包含行内元素,不能包含块级元素
- 一些特殊规则:
- h1~h6 不能互相嵌套
- p标签内不能包含块级元素
常用的文本标签
标签名 |
标签含义 |
单/双标签 |
em |
要着重强调的内容 |
双标签 |
strong |
更加着重强调的内容 |
双标签 |
span |
没有特定含义的标签 |
双标签 |
a |
超链接标签 |
双标签 |
cite |
作品标题 |
双标签 |
dfn |
特殊术语或专有名词 |
双标签 |
del |
被删除的内容 |
双标签 |
ins |
被插入的内容 |
双标签 |
sub |
下标 |
双标签 |
sup |
上标 |
双标签 |
code |
一段代码 |
双标签 |
samp |
从正常的上下文中,将某些内容提取出来 |
双标签 |
kbd |
键盘输入 |
双标签 |
var |
变量 |
双标签 |
图片标签
- 作用:用于在网页中显示图片
- 写法:
1
| <img src="图片路径" alt="图片描述" width="图片宽度" height="图片高度"/>
|
超链接
作用:用于在网页中跳转到其他网页或者其他位置
标签名 |
标签语义 |
常用属性 |
单/双标签 |
<a> |
超链接 |
href : 指定要跳转到的具体目标 target : 控制跳转时如何打开页面,常用值有_blank id : 用于锚点跳转,指定跳转目标的id name :元素的名字,写在a 标签中,用于锚点跳转 |
双标签 |
- 跳转到其他网页:
1 2 3 4 5
| <a href="http://www.baidu.com">百度</a>
<a href="./10_HTML排版标签.html" target="_self">看排版标签</a>
|
- 跳转到文件
1 2 3 4 5 6 7 8 9
| <a href="./resource/自拍.jpg">看自拍</a> <a href="./resource/小电影.mp4">看小电影</a> <a href="./resource/小姐姐.gif">看小姐姐</a> <a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a> <a href="./resource/内部资源.zip">内部资源</a> <a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
|
注意1:若浏览器不能打开文件,则会触发自动下载
注意2:若想强制触发下载,则需要添加download
属性
- 跳转到锚点
设置锚点
1 2 3
| <a name="test1"></a>
<h2 id="test2">这是一个位置</h2>
|
跳转锚点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <a href="#test1">跳转到test1</a>
<a href="#test2">跳转到test2</a>
<a href="#">回到顶部</a>
<a href="#bottom">跳转到底部</a>
<a href="./10_HTML排版标签.html#test1">跳转到排版标签页面的test1</a>
|
- 唤起指定应用
通过a
标签的href属性,可以唤起指定的应用,例如:
1 2 3 4 5 6 7 8
| <a href="tel:10086">联系客服</a>
<a href="sms:10086">联系客服</a>
<a href="mailto:[email protected]">联系博主</a>
|
列表
无序列表
- 作用:用于显示一组没有顺序关系的列表
- 写法:
1 2 3 4 5
| <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
|
有序列表
- 作用:用于显示一组有顺序关系的列表
- 写法:
1 2 3 4 5
| <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
|
自定义列表
- 作用:用于显示一组自定义的列表
- 写法:
1 2 3 4 5 6 7 8
| <dl> <dt>术语1</dt> <dd>解释1</dd> <dt>术语2</dt> <dd>解释2</dd> <dt>术语3</dt> <dd>解释3</dd> </dl>
|
dl:definition list,定义列表
dt:definition term,定义术语
dd:definition description,定义描述
表格
- 基本结构
- 一个完整的表格由:表格标题,表格头部,表格主体,表格脚部组成
- 表格涉及到的标签
table
:用于创建表格
caption
:用于创建表格标题
thead
:用于创建表格头部
tbody
:用于创建表格主体
tfoot
:用于创建表格脚部
tr
:用于创建表格行
th
,td
:用于创建表格单元(表格头部中用th
,表格主体中用td
,h代表header,d代表data)
- 常用属性
标签名 |
标签语义 |
常用属性 |
单/双标签 |
table |
表格 |
width :设置表格宽度
height :设置表格高度
border :设置表格边框
cellpadding :设置单元格内边距
cellspacing :设置单元格间距 |
双标签 |
thead |
表格头部 |
align :设置表格头部的水平对齐方式
valign :设置表格头部的垂直对齐方式 |
双标签 |
tbody |
表格主体 |
align :设置表格主体的水平对齐方式
valign :设置表格主体的垂直对齐方式 |
双标签 |
tr |
表格行 |
align :设置表格行的水平对齐方式
valign :设置表格行的垂直对齐方式 |
双标签 |
tfoot |
表格脚注 |
align :设置表格脚注的水平对齐方式
valign :设置表格脚注的垂直对齐方式 |
双标签 |
td |
普通单元格 |
colspan :设置单元格横跨的列数
rowspan :设置单元格横跨的行数 |
双标签 |
th |
表头单元格 |
colspan :设置单元格横跨的列数
rowspan :设置单元格横跨的行数 |
双标签 |
常用标签补充
标签名 |
标签含义 |
单/双标签 |
hr |
分割线 |
单标签 |
br |
换行 |
单标签 |
pre |
预格式化文本(按原文显示) |
双标签 |
表单
概念: 一个交互式区域,用于收集用户的输入信息
表单的基本结构
标签名 |
标签含义 |
常用属性 |
单/双 标签 |
form |
表单 |
action :表单提交的地址
method :表单提交的方式
enctype :表单提交的数据类型 |
双标签 |
input |
输入框 |
type :输入框的类型
name :输入框的名字
value :输入框的值
placeholder :输入框的提示信息 |
单标签 |
button |
按钮 |
type :按钮的类型 |
双标签 |
常用表单控件
文本输入框
常用属性如下:
name
:数据的名称
value
:输入数据的默认值
maxlength
:输入数据的最大长度
密码输入框
常用属性如下:
name
:数据的名称
value
:输入数据的默认值(一般不用)
maxlength
:输入数据的最大长度
单选框
1
| <input type="radio" name="***" value="***">**
|
name
: 数据的名称,想要实现单选的效果,必须保证同一组单选框的name属性值相同
value
: 提交的数据值
选中状态
: 让该按钮默认选中
1 2
| <input type="radio" name="sex" value="male"> 男 <input type="radio" name="sex" value="female">女
|
复选框
1
| <input type="checkbox" name="" value=""> 名字
|
name
: 数据的名称,想要实现单选的效果,必须保证同一组单选框的name属性值相同
value
: 提交的数据值
选中状态
: 让该复选框默认选中
1 2 3
| <input type="checkbox" name="hobby" value="smoke" checked>抽烟 <input type="checkbox" name="hobby" value="drink">喝酒 <input type="checkbox" name="hobby" value="perm">烫头
|
隐藏框
作用:用于存放一些不需要用户输入的数据,例如:用户id,用户token等
1
| <input type="hidden" name="" value="">
|
1
| <input type="hidden" name="id" value="123">
|
提交按钮
1 2 3 4
| <button>确认</button>
<input type="submit" value="确认">
|
value
:数据的值
type
:button的type属性值,默认为submit
1 2 3 4
| <button>确认</button>
<input type="submit" value="确认">
|
重置按钮
1 2 3 4
| <button type="reset">重置</button>
<input type="reset" value="重置">
|
value
:数据的值,等效于button的内容
type
:默认为reset
1 2 3
| <button type="reset">重置</button>
<input type="reset" value="重置">
|
普通按钮
1 2 3 4
| <button type="button">普通按钮</button>
<input type="button" value="普通按钮">
|
value
:数据的值,等效于button的内容
type
:默认为button
1 2 3 4
| <button type="button">普通按钮</button>
<input type="button" value="普通按钮">
|
文本域
1
| <textarea name="" id="" cols="" rows=""></textarea>
|
name
:数据的名称
id
:数据的id
cols
:文本域的列数
rows
:文本域的行数
1
| <textarea name="content" id="content" cols="30" rows="10"></textarea>
|
下拉框
1 2 3 4 5
| <select name="" id=""> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select>
|
name
:数据的名称
id
:数据的id
value
:数据的值
selected
:默认选中
disabled
:禁用
1 2 3 4 5 6 7
| <select name="city" id="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> <option value="sz" selected>深圳</option> <option value="cd" disabled>成都</option> </select>
|
label标签
- 作用:
label
标签可以与表单控件关联,点击文字后,与之相对应的表单控件就会获取焦点.
两种写法:
- 让
label
的for属性值等于表单控件的id值
- 把表单控件套在
label
标签中
fieldset与legend标签(了解)
fieldset
标签:用于将表单内的相关元素进行分组
legend
标签:用于为fieldset
标签设置标题