课前准备
1、内容了解
a.HTML
CSS
JAVAscript(JS)
JQuery(JQ)
Ajax
b.Bootstrap
oop(面向对象开发)
Es6
VUE(核心)
cli
c.XCX小程序开发
vant
layui
react 国际框架
UNI-APP 安卓、ISOapp
d.linux
mysql
php
api 接口
面试题
2、常识
a.网页源码：F12 或 右击网页空白处->检查
b.1TB=1024GB;1PB=1024TB
笔记
1、HTML（(Hyper Text Markup Language):超文本标记语言
作用：是用来描述网页的一种语言
注意：不是一种编程语言
超文本：网页中可以包含非文本信息（图片、链接、音乐、程序）
2、认识浏览器
IE
火狐(firefox)
欧朋(opear)
谷歌(chrome)
苹果(safari)
3、浏览器内核：渲染引擎(翻译代码)
Trident内核(ie内核)
Webkit 内核(谷歌内核)
Presto内核(欧朋内核)
Gecko 内核(火狐内核)
4、前端学习网址：www.w3school.com.cn
5、格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
内容
</body>
</html>
HTML标签(html tag)：由尖括号包围的关键词
1)<!doctype> 文档声明
2)<html> 根元素
3)<head> 文档的头部。
4)<title> HTML页面的标题。
5)<meta> 页面的元信息
比如搜索引擎和更新频度的描述和关键词。
6)<body>元素用于定义网页显示的内容。也称为主体标记。
7）标签关系有嵌套关系和并列关系
6、标签及属性
1) HTML元素:开始标签 + 元素内容 +结束标签
2) 双标签: <标签名>内容</标签名>例如:<p>段落</p>
3) 单标签: <标签名 /> 例如: <img />、<meta />
4) HTML属性: HTML元素提供附加信息.
7、基本标签
1）标题标签:
h1到h6、双标签，其中h1最大，h6最小。
用途：
<h1>用来修饰网页的主标题，一般是网页的标题，文章标题
<h2>表示一个段落的标题，或者说副标题，部署长尾关键词。
<h3>表示段落的小节标题，一般是用在段落小节
<h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容
注意: h1标签在一个页面中只能使用一次，因为它代表了页面的主标题
2）段落标签:
<p>段落文字</p>
3）换行
<br />
4）水平线
<hr /> 标签在 HTML 页面中创建一条水平线。
属性：width：宽度
size:粗细（大小）
color:颜色
align:对齐方式
left
right
center
5）注释: <!--注释-->
6)文本格式化标签
em i 倾斜，更推荐em
stong b 加粗，更推荐stong，语义更强烈
ins u 下划线，更推荐ins
del s 删除线（中间） 更推荐del
small 小号字
big 大号字
sub 下标
sup 上标
bdo 文字方向 :属性dir：ltr、rtl
7）图像标签img
属性：src ：(必须属性)图像的地址
相对路径:相对于自己的目标文件位置
"./"：代表目前所在的目录。
"../"：代表上一层目录。
以"/"开头：代表根目录。
绝对路径：绝对路径是指文件在硬盘上真正存在的路径。
alt ：(必须属性)无法显示时的替代文本
8) 超链接
知识相关
a：网页状态码
（200请求成功、403拒绝访问、404不存在、500服务器错误、502网络错误）
b：传输协议：
http：不加密（默认）
https：加密
定义:a元素向网页中加入链接
用法1:<a href="url地址" target="规定窗口的打开方式">链接</a>
属性：（a的）
href：所链接的地址
target：窗口打开方式
_blank:新窗口
_self:当前窗口
_parent:父窗口
_top：清除框架当前窗口打开
name：锚点
用法2: 锚点（name和#）
<a name="锚记链接名称">可有可无</a>
<a href="#锚记链接名称">点击就能返回到头的提示</a>
用法3:发邮件的链接
<a href="mailto:wwwwwww@163.com">邮件给我</a>
*必须安装发邮件的软件并设置为默认程序
9）列表标签：*可以互相嵌套,尽量嵌套类型一样的列表
a：无序标签
<ul type="属性值"> "属性值有三种 1 square实心方块 2 disc默认实心圆 3 circle空心圆"
<li>内容1<li/>
<li>内容2<li/>
</ul>
b:有序列表
<ol type=“属性值” start="属性是数字"> <!--“属性值可以为1、a、A、i、I”-->
<li>内容1<li/>
<li>内容2<li/>
</ol>
c:自定义列表
<dl>
<dt>内容1</dt> 仅仅可以包含行级元素
<dd>内容1注释</dd>
<dt>内容2</dt>
<dd>内容2注释</dd>
</dl>
8、转义字符
< -----> < ----->空格
©-----> 版权 ®-----> 注册符
> -----> > & -----> &
转义字符表: http://tool.oschina.net/commons?type=2
9、div与span：没有语义
div：区块容器 块元素 单独占一行
span：文本容器 行内元素 一行可以放多个
10、元素分类
块级元素：独占一行，自动换行，可以设置宽高，未设置则使用父元素。
代表：（div）、（ul、dl、ol、li、dt、dd）、（table、form）、h1~h6、p
行级元素：不可以设置宽高；元素宽度是内容的宽度。代表：span、a
行内块元素：不独占一行，不自动换行，可以设置宽高，未设置则使用父元素
11、标签语义化：
当看到元素标签时，能够明白标签用途，
优点：更容易被搜索引擎收录
更好体现页面主题
兼容性更好
12、标签或元素的嵌套规则
块元素可包含行元素
行元素不能包含块元素
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1~h6、p、dt
13、表格：table
1）属性：width宽度
height高度
align：对齐方式
border：边框
cellpadding：单元边沿与其内容之间的空白。
cellspacing：单元格之间的空间。
bgcolor：背景色
background：背景图
summary(规定表格内容的摘要，不显示在网页)
2）caption标签:定义表格标题。
<caption> 必须紧随 table 标签之后
3）表头：thead、 tr 、 th
4）表体：tbody、 tr 、 td
5）表尾：tfoot 、tr 、td
6）行：tr
属性：align
valign(规定表格行中内容的垂直对齐方式)
bgcolor
width
7）列：td
属性：align
valign(规定表格行中内容的垂直对齐方式)
bgcolor
width
colspan(跨列合并)
rowspan(跨行合并)
注意：行合并和列合并时在列中进行的
14、表单:form 主要负责数据采集功能
属性：action：规定表单的提交地址
method：规定表单的提交方式、get post
get:提交的数据会出现在地址栏；比较小 4k左右；通常用于获取信息
post:提交的数据不会出现在地址栏。安全性高一些；数据量大于get；通常用于提交信息
name：规定表单的名称
15、表单控件：form
1）input
属性：type
1) 文本框: text
属性：value
size文本框长度
maxlength
2) 密码框: password
属性：value
size文本框长度
maxlength
3) 单选按钮: radio
属性：value
name表单控件的名称
注意：想实现单选，必须填写相同的name。
后面要填写value="男"。提交信息时才会给后台提示。
4) 多选框: checkbox
属性：value
name表单控件的名称
3)和4)的checked属性：checked='checked';表示选中
checked=false;表示不选
5) 文件上传: file
6）隐藏域：hidden
7）提交按钮：submit
8）重置按钮：reset
9）普通按钮：button
10）图像按钮：image。具有提交功能
<input type="image" src="submit.gif" alt="Submit" />
readonly：只读，但可以提交值
2）select：单选下拉框
<select multiple></select>多选下拉框
3）option：选项
注意：select和option要一起搭配使用
开始标签 <option> 与结束标签 </option> 之间的内容是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单提交时被发送到服务器的值。注意：如果没有规定 value 属性，选项的值将设置为 <option> 标签中的内容。
4）textarea：文本域
属性：cols：列数
rows：行数
注意：行数越高则文本域越高，列数越多则文本域越宽
placeholder：提示内容
input::-ms-input-placeholder{text-align: right;}
input::-webkit-input-placeholder{text-align: right;}
input::-moz-placeholder{text-align: right;}
/* 可以将居中属性替换为定位属性,将居中属性替换成外边距是无效的
1、-moz-代表firefox浏览器私有属性
2、-ms-代表ie浏览器私有属性
3、-webkit-代表safari、chrome私有属性
4、-o-代表Opera
input:-moz-placeholder Firefox旧版本
input::-moz-placeholder Firefox新版本
新版本Firefox 默认的 placeholder 有 opacity:0.4 属性*/
maxlength：最大输入个数
required：为空不提交
5）button标签按钮类型:
<button type="button | reset | submit">按钮上的字</button>
提示：请始终为按钮规定 type 属性。不设置默认为submit（提交）
6)label标签为 input 元素定义标注（标记）。
如果您在 label 元素内点击文本，就会触发此控件，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
例如：用户名: “点击用户名这三个字inupt框自动获得焦点”
<label for="user">用户名</label>
<input type="text" id="user">
*注意id的名字不能重复
*所有控件属性
1）name:表单控件的名称
2）value：表单控件要提交的值
注意：
text、password、hidden中存在value代表初始值
checkbox、radio、image代表关联值
submit、reset、button中存在代表按钮显示的文本
若出现checkbox和radio必须设置value
3）disabled：禁用，不能提交值
readonly和disabled区别：
readonly：可以提交值；disabled：不能提交值
readonly仅仅使用在input(text / password)和textarea有效
16、视频：video
属性：src：视频路径
controls:视频播放器
17、音频：audio
属性：src：音频路径
controls:音频播放器
18、去掉滚动条
overflow:scroll：超出加滚动条，横竖都加
让竖条没有：
<body style=‘overflow-y:hidden’>
</body>
让横条没有：
<body style=‘overflow-x:hidden’>
</body>
两个都去掉
<body scroll="no" >
</body> 
扫一扫
03-07
3788
3788
03-08
1594
1594
01-18
1583
1583
06-25
2293
2293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
