web前端复习
前端引入
前端的发展历程：美工 网页制作 Web前端开发 全栈开发 大前端
大前端作用：网站（PC 移动端） 管理系统 APP 小程序 数据可视化 智能电视 桌面应用 网页游戏 工具和后端（node）
网页为啥叫HTML
蒂姆·伯纳斯·李制定W3C规则
网页是网站的一页 文件扩展名html
HTML是超文本标记语言 用来描述网页的一种语言 不是编程语言是标记语言（标记标签来描述网页）
浏览器
can i use网站
常见浏览器：Opra欧朋 Firefox火狐 Internet explorer IE浏览器→Edge浏览器 Safari苹果 Chorme谷歌 QQ浏览器
Web标准的制定
万维网联盟 World Wide Web Consortium（W3C）
W3C制定HTML的语法，标准 CSS的语法，标准
W3C和ECMA制定了行为标准 W3C DOM,ECMAScript
HTML结构 CSS表现 JS行为
第一个网页
html head title body之间的关系
固定的结构
基本语法：常规标记（双标记）<标记></标记> 空标记（单标记）<标记 />
相关工具
HTML编写工具：SublimeText Webstorm HBuilderX VSCode AdobeDreamweaver
VSCode相关插件：Auto Rename Tag view-in-browser Live Server
文档声明与字符统计
<!DOCTYPE html> <!-- 特殊且固定的文档声明标签 -->
<html lang="en"> <!-- 表示以下代码语言 搜索引擎优化和浏览器有帮助 en英语 zh-CN中文 ja-jp日语 -->
<head>
<meta charset="UTF-8"> <!-- ASCII -美国信息交换标准代码 ISO-8859-1 - 拉丁字母表的字符编码 GB2312 - 汉字编码字符集 UTF-8-Unicode 万国码字符编码 -->
<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>
HTML标签
Web语义化：裸奔好看 爬虫喜欢 方便维护
HTML标签：
文本标题（h1-h6）格式<h1>内容</h1>
文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距
段落标签（p）格式<p>内容</p>
标识一个段落(段落与段落之间有段间距)
换行（br）格式<br/>
换行是一个空标记（强制换行）
水平线（hr）<hr/>
加粗（b）格式<b><b/>（strong）格式<strong></strong>
b只是显示加粗 strong强调内容突出文本
倾斜（em）格式<em></em>（i）格式<i></i>
em强调文本 i倾斜文本
删除线（s）格式<s></s>（del）格式<del></del>
下划线（u）格式<u></u>
下标与上标（sub）格式<sub></sub>（sup）格式<sup></sup>
百科词条案例
<!DOCTYPE html>
<html lang="zh-CN中文">
<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>
<h1>HTML5</h1>
<p>本词条由“科普中国<strong>"科学百科"词条编写与应用工作项目</strong>审核。<br></p>
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是<strong>构建以及呈现互联网内容的一种语言方式.</strong><br>
被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开
<br>发。<br>
HTML5是Web中核心语言HTML的规范，<em><strong>用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的</strong></em>，在浏览器中<br>
通过-些技术处理将其转换成为了可识别的信息。HTML5在从前<del>HTML4.01</del>的基础上进行了一定的改进，虽然技术人员在开发<br>
过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
<sup>[1-2]</sup><br>
<h2>HtmI5的新特性</h2>
<hr></hr>
HTML5将Web带入一个成熟的应用平台,在这个平台上，<strong>视频、音频、图像、动画以及与设备的交互</strong>都进行了规范。
<h3>智能表单</h3>
表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增<br>
强了HTML可表达的表单形式，再加上新增加的一些表单标签, 使得原本需要JavaScript来实现的控件,可以直接使用HTML5<br>
的表单来实现; - -些如内容提示、焦点处理、数据验证等功能，也可以通过THML5的智能表单属性标签来完成。<sup>[6]</sup>
<h3>多媒体</h3>
HTML5最大特色之一就是支持音频视频， 在通过增加了audio. video两个标签来实现对多媒体中的音频、视频使用的<br>
支持，只要在Web网页中嵌入这两个标签，而无需第三方插件(如Flash) 就可以实现音视频的播放功能。HTML5对音频、 视频<br>
文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
</body>
</html>
不一般的hr
<hr color="red" width="300px" align="right'">
color→颜色
width→宽度
align→对其方式
noshade→取消阴影
<!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>
<hr color="red">
<hr color="green">
<hr color="blue">
<hr color="black" width="300px">
<hr color="black" width="300px" align="left">
<hr color="black" width="300px" align="right">
<hr noshade="noshade">
</body>
</html>
特殊符号
特殊符号:在编写文本是,会遇到输入法无法输入的字符,如®(注册商标),©(版权符)等,还要在一段文字中加入多个空格时,页面无法解析出多个空格.这些无法输入和空格字符都是特殊字符,HTML中有专门的代码.
| 特殊字符 | 含义 | 特殊字符代码 |
|---|---|---|
| 空格符 |   ; | |
| © | 版权 | © ; |
| ® | 注册商标 | ® ; |
| < | 小于 | < ; |
| > | 大于 | > ; |
| & | 和号 | & ; |
| ¥ | 人民币 | ¥ ; |
| ° | 摄氏度 | ° ; |
| < | 左尖角号 | < ; |
| > | 右尖角号 | > ; |
div和span标签
div标签，没有具体含义，用来划分页面的区域，独占一行。
span标签，没有实际意义，主要应用在对文本独立修饰的时候，内容有多宽就占用多宽的空间距离。
列表
有序列表：
<ol></ol> <li></li> li里面可以随意放标签，但ol里面只能放置li
type属性:改变前面标记的样式(一般通过CSS去控制) <ul type="value">
1数字有序列表 a小写字母顺序列表 A大写字母顺序列表 i小写罗马字母列表 I大写罗马字母列表
start开始 但属性取值一定为数字（超过26则在第一个的基础上加）
无序列表：
ul>li快捷输入
<ul></ul> <li></li> ul里面只能放li，li里面可以放其他标签
type属性:改变前面标记的样式(一般通过CSS去控制) <ul type="value">
disc 实心圆 circle 空心圆 square 实心方块 none没有
自定义列表：
快捷输入：dl>dt+dd
<dl></dl> <dt></dt> <dd></dd>
可以是文字也可以是图
图片标签的路径
<img src="路径" alt="注释">
相对路径:相对路径是指以当前文件资源所在的目录为参照基础，链接到目标文件资源(或文件夹)的路径.
以“./"开头，代表当前目录和文件目录在同一个目录里，“./"也可以省略不写！
以"…/"开头：向上走一级，代表目标文件在当前文件所在的上一级目录.
以"…/…/"开头：向上走两级，代表父级的父级目录，也就是上上级目录，再说明白点，就是上一级目录的上一级目录.
以"/"开头，代表根目录.
绝对路径:从根目录开始,是一个完整的路径.
“D:/abc/”：代表根目录,绝对路径.
·在windows中路径斜线/与反斜线\都可表示,在网络路径中必须/ 尽量避免写反斜线\
注释：如果使用服务器打开，本地路径无法访问
图片标签的属性
<img src="图片" alt="路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后(加载失败)的提示信息" width="200px" height="200px">
超链接标签
<a href= "路径"title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档"> 内容 </a>
Target属性:规定在何处打开文档 target="_self"默认值 target=“_blank"新窗口打开
表格：
标签：
<table>:表格的最外层容器
<tr>:定义表格行
th:定义表头
td:定义表格单元
<caption>:定义表格标题
属性：
1.宽度 width .
2.高度 height
3.边框 border
4.边框颜色 bordercolor
5.背景颜色 bgcolor
6.水平对齐 align=“left或 right或center”
7.cellspacing=“单元格与单元格之间的间距”
8.cellpadding=“单元格与内容之间的空隙”
行tr 属性
1.高度 height
2.背景颜色 bgcolor
3.文字水平对齐 align=“left或 right或center”
4.文字垂 直对齐 valign=“ top或middle或bottom";
单元格td属性
1.宽度width
2.高度height
3.背景颜色bgcolor
4.文字水平对齐 align= “left或right或center"
5.文字垂直对齐valign=“top或middle或bottom";
如果一个单元格设置宽度，影响的是这一整列的宽度
如果一个单元格设置高度，影响的是这一整行的高度
表格合并
Colspan="所要合并的单元格的列数” 必须给td
Rowspan=“所要合并的单元格的行数” 必须给td
表格实例
<!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>
<table border="1" cellspacing="0" cellpadding="0"align="center" bordercolor="red">
<tr height="50" align="center">
<td width="100">会员注册</td>
<td width="150"></td>
<td width="100">出生日期</td>
<td width="150"></td>
</tr>
<tr height="50">
<td>身份证号</td>
<td colspan="3"></td>
</tr>
<tr height="50">
<td>通信地址</td>
<td colspan="3"></td>
</tr>
<tr height="50">
<td>联系电话</td>
<td colspan="3"></td>
</tr>
<tr height="50">
<td>会员卡号</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
表单标签
<form method=“get或者post" action=“向何处发送表单数据">
<input />
A.属性type定义输入框的类型
a)文本框 type=“text”
密码框type=“password”
b) 提交框type=“submit" 和<button>提交按钮</button> 一样
c) 按钮框type=“button” 单纯的按钮
d) 重置框type= “reset” 清空的效果
B. 属性 placeholder描述输入字段预期值的简短的提示信息。兼容到IE8以上
C. 属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.属性 value
</form>
CSS内部样式表
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值
2）属性必须放在花括号中，属性与属性值用冒号连接
3）每条声明用分号结束
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开
5）在书写样式过程中，空格、换行等操作不影响属性显示
选择器（选择符）{属性:属性值; 属性:属性值;}
### 外部标签
<link rel="stylesheet" type="text/css"href="">
<style> @import url(); </style>
扩展知识点：link和import之间的区别？
①差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
②差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
③差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
行内样式表
<div style="color: red; width: auto;height: auto;">我是DIV</div>
样式表的优先级
！important>行内>内部>外部
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
