前端
- 前端主要使用HTML、CSS、JavaScript这三剑客来进行开发。
- 前端主要负责页面内容的呈现,页面效果的制作,以及各种交互效果的实现。
前端能做的不止是网页
随着现在前端技术的发展,各种跨平台方案的涌现,大前端的潮流已经是不可避免了。我们不仅能写网页,也可以用nodejs来做后端程序,还可以依赖一些跨平台方案去开发手机上的APP以及微信小程序等等
总而言之,你所能看到的一切皆为前端,前端能够做到的事情远远不止开发网页这一项。网页是由文字,图片,音频,视频,超链接等组成。
常见的五大内核:Trident,Gecko,Webkit ,Presto和Blink :
内核 | 浏览器 | 备注 |
---|---|---|
Trident | IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器 | |
Gecko | Mozilla、Firefox | 开源项目 |
Webkit | Safari、Chrome | 开源项目 |
Presto | Opera | Presto是由Opera Software开发的浏览器排版引擎,它也是世界上公认的渲染速度最快的引擎。 |
Blink | 由Google和Opera Software开发的浏览器排版引擎 |
HTML
- 全名Hyper Text Markup Language简称超文本标记语言。
- HTML的骨架结构由四个标签组成
- html标签是网页的整体
- head标签是网页的头部
- body标签是网页的身体
- title标签是网页的标题
HTML的基础模板
<!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>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
:说明文档是类型,告诉浏览器的解析器使用哪种规范来解析页面。
<html>...</html>
包裹所有代码,除了第一行。在它们之间是文档的头部和主体。
<head>...</head>
是所有头部元素的容器。<head>
中的元素可以引用脚本(scripts)
、样式表(css)
、各种meta
信息等等。
<meta>
描述了一些基本的元信息,这些数据不会在页面中显示,但会被浏览器解析。例如开发工具、作者、网页关键字、网页描述、页面定时刷新及跳转等一些东西。
注意:<meta>标签没有结束标签
<title>...</title>
网页的名称
<link>
定义了文档与外部资源的联系,最常用的就是外联css文件。
注意:link标签没有结束标签
<body>...</body>
定义文档的主体,<body>
与</body>
标签之间的文本是要在浏览器中显示的页面内容,绝大多数html
标签写在里面
HTML基础标签
HTML标签的构成
<开始标签>内容</结尾标签>
- 标签有
<
、>
、/
、和英文单词或者字母组成,由<>
包裹的英文单词或者字母叫做标签名
- 常见的标签由两部分组成,我们称之为
双标签
,前部分叫做开始标签
,后部分叫做结束标签
,由这两部分包裹的为内容 - 少数的标签由一部分组成,我么称之为
单标签
,无法包裹内容,一般在内部书写参数。
HTML标签的属性
开始标签
或者单标签
中可以包含一些属性,通过=
指定属性值
<开始标签 属性名="属性值"></结尾标签>
<单标签 属性名=“属性值”>
HTML标签的关系
- 父子关系
<body>
<h1>我是一级标题</h1>
</body>
- 兄弟关系
<h1>我是一级标题</h1>
<p>我是段落</p>
HTML标签的内容
标签名 | 含义 |
---|---|
<div></div> | 块级标签,常与CSS属性配合进行网页布局 |
<h1>–<h6> | 定义标题,<h1>为一级标题,<h2>为二级标题,以此类推,<h1>为最大的标题,<h6>为最小标题 |
<p></p> | 定义段落,用于包裹一段文字 |
<span></span> | 行内元素,为少量的文字单独设置样式。 |
<a></a> | 超链接标签 |
<img> | 引入图片 |
<ul></ul> | 定义无序列表 |
<ol></ol> | 定义有序列表 |
<li></li> | 定义列表的项目 |
<br> | 换行 |
<hr> | 定义水平线 |
<select></select> | 创建单选或多选菜单 |
<option></option> | 定义下拉列表的其中一个选项,位于select元素内部 |
<video></video> | 定义视频内容,支持的格式有MP4,Ogg等 |
<audio></audio> | 定义一段音频,支持的三种格式为MP3,WAV,Ogg |
超链接属性名 | 属性值 | 备注 |
---|---|---|
href | 规定链接指向的页面的 url。 | (url:资源地址,指要链接到的网页或者文件的地址) |
title | 用于指定指向链接时所显示的提示信息 | |
target | 规定在何处打开链接文档。 | _blank:在新窗口打开,_self:在同一个窗口中打开,_parent:在上一级窗口中打开, _top:在浏览器的整个窗口中打开) |
img属性名 | 属性值 | 备注 |
---|---|---|
src | 图片路径 | 可以是绝对或者相对路径 |
alt | 替换文本 | 当图片加载失败时,才会显示alt的文本,图片加载成功时,不会显示alt的文本 |
title | 提示文本 | 当鼠标悬停在图片上时,才会显示的文本 |
width、height | 图片宽高 | 如果只设置了其中的一个,另一个会自动等比例的缩放,此时图片不会变形。如果同时设置,此时图片可能变形 |
video属性名 | 属性值 | 备注 |
---|---|---|
src | 视频路径 | 可以相对、绝对路径 |
controls | 显示播放的控件 | |
autoplay | 自动播放 | chrome中需要muted实现静音播放 |
loop | 循环播放 |
audio属性名 | 属性值 | 备注 |
---|---|---|
src | 视频路径 | 可以相对、绝对路径 |
controls | 显示播放的控件 | |
autoplay | 自动播放 | 部分浏览器不支持 |
loop | 循环播放 |
HTML的高级标签
input标签
在网页中显示手机用户信息的表单效果,如登录注册页面。可以通过type属性值的不同展示不同效果
type属性值 | 说明 |
---|---|
text | 文本框,用于输入单行文本 |
password | 密码框,用于密码输入 |
radio | 单选框,实现多选一,checked 指定默认选中选项 |
checkbox | 多选框,实现多选一 |
file | 文件选择,用于上传文件 |
submit | 提交按钮,用于提交表单 |
reset | 重置按钮,用于重置表单 |
button | 普通按钮,默认无功能,通过js赋予功能 |
placeholder | 输入类型时,显示在输入框的提示信息 |
<form>
<!-- 1、文本框:text(type属性的默认值) -->
昵称:<input type="text" placeholder="请输入您的昵称"><br><br>
<!-- 2、密码框:password -->
密码:<input type="password" placeholder="请输入您的密码"><br><br>
<!-- 3、单选框:radio -->
性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br><br>
<!-- 4、多选框:checkbox -->
爱好:<input type="checkbox" checked>敲代码
<input type="checkbox" checked>熬夜
<input type="checkbox">掉头发<br><br>
<!-- 5、文件选择:file -->
<input type="file" multiple><br><br>
<!-- 按钮 -->
<!-- 1、submit:提交按钮 -->
<input type="submit">
<!-- 2、reset:重置按钮 -->
<input type="reset">
<!-- 3、button:普通按钮 -->
<input type="button" value="普通按钮">
昵称:<input type="text" placeholder="请输入您的昵称"><br><br>
<!-- 提交按钮 -->
<button type="submit">button提交按钮</button>
<!-- 重置按钮 -->
<button type="reset">button重置按钮</button>
<!-- 普通按钮 -->
<button type="button">button普通按钮</button>
</form>
button标签
在网页中显示用户点击的按钮,同上,只不过上面的是Input
中type
设置为button
。这个标签就是button
,本质是类似的,它是双标签。这个标签更便于包裹其他内容,比如图片和文字
select下拉菜单
在网页中提供多个选择项的下拉菜单表单控件,由select
标签和option
标签组成。selected
属性表示下拉菜单的默认选中
<!-- 下拉菜单 -->
<!-- select:表示下拉菜单的整体 -->
<!-- option:表示下拉菜单的每一项 -->
所在城市:<select>
<option>上海</option>
<option selected>北京</option>
<option>广州</option>
<option>深圳</option>
</select>
textarea标签
在网页中提供可输入多行文本
的表单控件
cols
规定了文本域内可见宽度,rows
规定了文本域内可见行数
label标签
常用与绑定内容与表单标签的关系,在后面的开发中会经常用到。有两种使用方法如下:
- 使用方法1
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值使用方法
- 使用方法2
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
HTML格式化
文本格式化标签
标签 | 描述 | 例子 |
---|---|---|
<b> | 定义粗体文本 | 文字 |
<em> | 定义着重文字 | 文本 |
<i> | 定义斜体字 | 文本 |
<small> | 定义小号字 | 文本 |
<strong> | 定义加重语气 | 文本 |
<sub> | 定义下标字 | 文本文本 |
<sup> | 定义上标字 | 文本文本 |
<ins> | 定义插入字 | 插入 |
<del> | 定义删除字 |
- HTML “计算机输出” 标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
- HTML 引文, 引用, 及标签定义
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目 |
语义化标签
在HTML5新版本中,推出了一些有语义的布局标签供开发者使用
标签名 | 意义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
aside | 侧边栏 |
main | 元素中的内容对于文档来说应当是唯一的、如侧栏、导航栏、版权信息、站点标志或搜索表单 |
section | 区块 |
article | 文章 |
footer | 页尾 |
以上标签显示特点和div一致,但是比div多了不同的语义,语义化使网页结构更加清晰/使用更少的js
、css
,更加有利于SEO
引擎优化。
字符实体
空格合并现象,如果在html代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格
常见字符实体,前期仅作为了解即可。
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | ' | (IE不支持)' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | € | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
\™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
行内元素和块级元素
行内元素
一个行内元素只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。
特点:
- 和其他元素都在同一行,不会自动换行,水平方向依次排列;
- 高,行高及外边距和内边距不可改变;
- 宽度就是它的文字和图片的宽度,不可改变;
- 内联元素只能容纳
文本
或者其他内联元素
。 - 举例:
a
、b
、br
、i
、span
、small
、big
、sub
、sup
一般行内元素不能设置宽高,但并不是所有的行内元素都不能设置宽高,替换元素
就可以。
替换元素:浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img
、input
、textarea
、select
、object
都是替换元素
块级元素
块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素
或者内联元素
。
特点:
- 总是在新行上开始,可以自动换行,垂直方向依次排列;
- 高度、行高以及外边距和内边距都可控制;
- 宽度默认是它容器的
100%
,除非设定一个宽度; - 他可以容纳
内联元素
和其他块元素
。 - 举例:
div
、h1-h6
、p
、ol
、u
l、li