HTML概述 特点 发展历程和当前版本
1.1 html 概述 超文本标记语言
超文本 比普通文本要强大 他可以放音频，视频
标记语言 由 标签和文字组成
它是一种描述性的语言， 它没有逻辑性
html编写工具， 主要组成部分和书写规范
2.1主要组成部分
<html> -----文档声明
<head></head> ---------头信息
<body></body>-------主体内容
<html>
2.2 书写规范：w3c组织规定的
标签要正确关闭 <body></body> <img />
标签名和属性名要小写
属性值要用引号括起来 “” 或‘’
标签要正确嵌套
标签 表示内容
属性 描述内容 其实也相当于约束内容的
三 具体标签的介绍
排版标签( p, hr,pre,br, div,span,center)
p:段落标签
* hr：水平线 属性：width宽度(取值：整数，百分比) color颜色 size厚度
pre：排版标签
* br：换行标签
center：水平居中
div：块作用，方便页面内容布局
span:域
div和span都是块标签 区别
div 自动换行
span 不会自动换行
字体标签(h1-h6,strong,b,font——属性有size,color,face)
hn：标题标签 从1-6 逐渐变小
strong：加粗标签
b：加粗
font：字体标签
属性：
size 字体大小 取值1-7
color 颜色
face 字体类型 宋体 楷体 隶书等
图像标记 (img——属性有src,name,width,height,alt,border)
src：source 取值代表图片所指定的路径
路径：1 相对路径 相对当前文件
在当前文件上级：../文件名
与当前文件同级目录：直接写图片名即可
在当前文件下级：目录名/文件名
2 绝对路径 不同服务器写法不同
网络路径：
www.baidu.com/1.jpg
本地路径：
带盘符的
alt：代表图片不能显示时的提示文字
title：鼠标悬浮式的提示文字
border:边框
清单标记：列表标记(ul,ol及其子标签li)
ol ：order line 有序列表
属性：
type：取值 整数 大小写字母 1 a A i I
ul ：无序列表
属性：
type：取值 disc square circle
超链接 (a——属性有href,name,target)
属性：href：路径 url
target：跳转方式 _self _blank _parent _top
表格标签 (table及其子标签tr,td)
table ：表格
子标签：
tr：行
td：列（单元格）
属性：
border：边框
align：水平布局 left （默认） right center
width：宽度
height：高度
cellspacing：单元格之间的距离
cellpacing：单元格与内容的距离
colspan 合并列
rowspan 合并行
多媒体标记(embed, bgsound——属性有src,loop,autostart,width,height)
embed：播放视频
bgsound:背景音乐
特殊字符: > < © ®
< > 空格
表单标记 （form，input--务必掌握）
form表单作用 ：收集用户的数据，并提交到服务器
属性：name：表单的逻辑名
*action：url 表单数据提交路径
*method：数据提交方式
get明文提交，不安全，提交数据有限，1kb
post暗文提交，安全， 提交数据没有限制
enctype：文件上传时讲解
input标签作用：收集数据，
语法：<input type="" name="" value="" />
属性：
type：决定了标签的类型， 有不同功能
text 文本框
password 密码框
radio 单选按钮
checkbox 复选框
radio和checkbox都有checked属性（表示默认选中）
submit 提交按钮
reset 重置按钮
button 普通按钮
image 图片按钮 作用和submit一样
file 上传文件
hidden 隐藏域
name： 1 提交数据到服务器 供服务器取值
2 给同类标签分组
value： 接收用户数据
注 当前用户可以输入数据时 则不写walue
select 标签：下拉列表
属性：name
子标签：option
属性：value；
textarea：文本域
属性：cols：每行显示的字符数
rows：显示几行
通用属性：
readonly= “readonly” 只读
disabled = “disabled” 禁用
CSS样式表
一 什么是CSS
CSS---（装饰html） Cascading Style Sheet 层叠样式表
二 使用css的好处
2.1 网页内容和样式分离， 有利于团体开发
2.2 提高代码的复用性， 有利于后期维护
2.3 功能强大，实现更美观的效果
三 CSS基本语法
<style type="text/css">---表示标签内容为样式代码
/*css注释*/
选择器{
属性1：属性值1；
属性2：属性值2；
}
</style>
属性要用冒号赋值，必须使用分号表示结束
四 有哪三种基本选择器？
4.1 标签选择器
4.2 类选择器
4.3 ID选择器
<style type="text/css">
/*标签选择器：装饰同类标签*/
li{
color:blue;
}
/*类选择器 在同类标签中有部分标签实现其他风格*/
.color{
color：blue；
}
/*ID选择器：一般和div一起使用*/
#div1{
width:500px;
height:300px;
background-color:green;
}
五 属性
文本字体属性
div{
/*设置div的高度*/
height:50px;
/*给div添加边框*/
border: 1px solid red;
/*给文本设置颜色*/
color: lime;
/*设置文本行的高度*/
line-height: 50px;
text-align: center;
letter-spacing: 10px;
/*以下 是设置 字体样式*/
font-size: 25px;
font-family: 楷体;
font-style: italic;
font-weight: bold;
font: bold 25px 楷体;
}
a{
text-decoration: line-through;
}
列表属性
li{
list-style: none;
list-style-image: url(img 路径);
list-style-position: inside;
}
背景属性
div{
width：900px;
height: 800px;
border: 1px solid red;
background: url();
/*设置图片显示方式*/
background-repeat: no-repeat;
/*背景偏移*/
background-position: 50px 80px;
}
盒子模型
#div1{
padding-top: ;
padding-left: ;
padding: 上 右 下 左;
padding：上下 左右；
padding：上 下 左右；
padding：上下左右
/*设置外边距*/
margin-跟上面一样
}
定位属性 float clear position（相当于当前标签的原来位置）
top left z-index
float 见例子 同级 清除
</style>
六 样式的几种使用方式及优先级？
1 行内样式 作用域在当前标签
2 内嵌样式 作用于当前页面
3 外部样式 作用于多个页面
优先级
行内>内嵌>外部
就近原则
如果是同一类型（指内嵌样式 或 外部样式）时
那么三种选择器也有优先级；
三种选择器 ID选择器> 类选择器> 标签选择器
参考 css10_样式的几种使用方式及优先级.html
七 样式的高级应用
p li{} 包含
p,li{} 或者
div#div1{} 并且
javascript
介绍
javascript 是用于交互的web页面 它不需要进行编译
而是直接 嵌入在html 页面中 浏览器直接执行
js 被设计用来向html页面添加交互行为
js是一种脚本语言（脚本语言是一种轻量级语言）
js通常直接嵌入html页面 解释性语言（也就是不进行预编译）
js的组成
核心ecmascript ：语法 语句
bom：浏览器对象
dom：操作文档中的元素和内容
作用 增加用户体验
用于交互
html 引入js 两种方式
1 内嵌式 在html文档中 通过<script></script>引入
2 外联式 在html文档中 通过<script src=" "></script>
引入.js文件
基本语法：
1 变量
1）在使用js时
1）必须以字母或下划线开头
2）变量名不能包含空格等符号
3）不能使用js关键字作为变量名 ，如function
4）js严格区分大小写
2） 变量声明
var 变量名 //js变量可以不声明 直接使用 默认值为undefined
3 ）变量的赋值
var 变量名 = 值 //js变量是弱类型 也就是一个变量可以存放不同类型的数据
2 数据类型
基本类型
1）undefined 当声明的变量未初始化时，该变量的默认值undefined
2）null 一个占位符 表示为空
3）alert(null == undefined) //返回true尽管两个值相等，但含义不同
Boolean 有两个值 true 和false
Number 表示任意数字
String 字符串由 “或者‘声明 js没有字符类型
引用类型
引用类型 通常叫做类 也就是说 遇到引用值 处理的就是对象
js是基于对象 而不是面向对象 对象类型的默认值为null
js提供的所有都是引用类型 也就是对象
3 运算符
算数运算符
赋值
比较 == ===
逻辑
4 运算符操作
*boolean
*等性运算符
5 基本操作
alert() 向页面弹出一个提示框
innerHTML:向页面的某个标签中写一段内容，将原来的东西覆盖
JS代码的编写位置
行内代码
内部代码
外部代码
BOM对象：
window对象 对应整个浏览器 (会涉及到onload())
alert();
confirm();显示带有一段消息以及确认按钮和取消按钮的确认框
确认框：确定返回true
取消返回false
prompt();显示可提示用户输入的提示框
点击确定用户输入数据
var time = setInterval();
var time = setTimeout();
clearInterval(time);
clearTimeout(time);
History对象：前进和后退按钮
back();
forward();
go();
Location对象：对应地址栏
href
3个案例 一个form里面的 οnsubmit="return checkNull()" 两个是页面加载onload = “方法”
前端总结（一）
最新推荐文章于 2021-12-19 23:15:41 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
