一、概述
网页 一种文件 的展开
开发过程就行写日记一样、由一片空白的纸张不断丰富为充满文字和图片的ppt
Html、css、javascrpt 三大技术分别对应网页页面的(结构)、(样式)、(事件响应)
二、HTML
1、介绍
网页的结构-----基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1、标签
标签就是一种 “组件”,于< >
例如 表单,<form></form> 盒子 <div></div> 分割线<br>
需要我们自己了解和运用,每个标签都有各自的功能,例如<input>用于输入信息
2、属性
属性 于标签内的一种字段 具有修饰功能 类似于英语句子中的形容词,用于刻画或修改标签的各种属性 如,大小,颜色...
这些都需要我们自己去了解和运用,这里给出详细的列表,关于HTML中标签及属性
2、常见标签属性介绍和运用
属性
Lang:规定了页面的语言类型、为了搜索引擎、提示翻译功能
标签
<head>里面的内容一般不显示在页面中,而是给浏览器解析对接后端用的
<body>里面的内容显示在页面上,可以给用户来看
<meta>给网页提高搜索率、利用其内置属性,扩充功能。例如:配合属性charset:设置字符集
<title>将文字写在两个标签之间,设置网页的名字
<h><p><img>
<h>标签分为1-7级,由大到小,将文字在页面内设置为标题
<p>标签在页面中,将文字变得更加格式化,分为一段一段的
<img>标签用于嵌入图片,要搭配属性src使用,src=“相对路径”、“绝对路径”或“网上提供的图片路径(呈现链接样式)” 搭配alt属性时显示的描述文字
<a>
<a>可与做超链接与属性 href使用,用于指向(规定)跳转的目标地点(页面)1、href=”目标链接”
2、href=”目标页面.html”
3、href=”#id名”(页面中有id的组件)
4、href=”tel:电话号”拨打电话
5、href=”/邮箱”发邮件
配合target属性使用,限定跳转方式_self(原窗口跳转)、_blank(新窗口打开)_parent(父级窗口) 、 _top()顶级窗口
列表 <ol> <ul>
有序ol 、无序ul 、自定义列表dl
ul 搭配属性 type cycle空心圆(default)square小方块
样式: <ul> <il>格子1</il> <il>格子2</il> <il>格子</il> </ul>
ol 搭配属性 type(用于开始排序的数字) start(从第几位开始排序)
样式: <ol> <il>格子1</il> <il>格子2</il> <il>格子</il> </ol>
dl自定义的列表
样式:<dl>
<dt>1 <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd></dt>
<dt>2 <dd>2.1</dd> <dd>2.2</dd> <dd>2.3</dd></dt>
</dl>
<div><span>
这两个标签使用频率最高,广泛运用在网页的页面中,是结构化的标签,用于划分区域,有人成为盒子模型,在HTML5出世之前,html+css又被称为div+css,其重要性由此可见。
搭配其他文字修饰性标签,在项目开发中清楚HTML中原有默认样式,让css充分发挥效果
<span>标签对于一些与后端数据有关,或者后续需要修改的内容进行操作
<div> <p>段落内容 <span>分离数据</span>段落内容 </p></div>
<iframe>
功能化的标签,内嵌窗口在标签内:
1、配合src属性,链接其他页面、页面大小通过height、width属性控制、除此之外有scrolling属性控制滚动效果auto(默认) 或 no、frameborder属性控制窗口边界1有 0没有
2、通过自身name属性,配合<a>标签的target属性,在页面内进行跳转
<body>
<a src="套跳转的网址" target="insidewin">目标1</a>
<iframe name="insidewin"></iframe>
</body>
如今常用于:可用来插入广告窗口、后台管理系统
表格
<table>
必须在容器<table>内使用</table> 配合标签<tr>、<th>和<td>这两种双标签使用
<table>内属性boder、width、cellspacing、cellspadding、backgroundcolor
属性 align:用在<able>上,界定表格的位置、用在<tr>上则界定内容的位置
常用格式
<table border="1">
<tr>
<th>表头单元格1</th><th>表头单元格2</th>
</tr>
<tr>
<td>内容单元格1</td><td>内容单元格2</td>
</tr>
<tr>
<td>内容单元格1</td> <td>内容单元格2</td>
</tr>
</table>
完全版
<table border="1">
<caption> 定义于表格内,显示于表格上方用于描述表格的标签 </caption>
<thead>
<tr>
<th>表头单元格1</th><th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容单元格1</td><td>内容单元格2</td>
</tr>
<tr>
<td>内容单元格1</td> <td>内容单元格2</td>
</tr>
<tr>
<td>内容单元格1</td> <td>内容单元格2</td>
</tr>
</tbody>
<tfroot>
<tr>
<td>收尾统计</td>
</tr>
</tfroot>
</table>
合并单元格子
合并行使用属性colspan、合并列使用属性rowspan配合等于号“=”赋值
数字为几,合并同行(或列)的几个格子
表单
<form>
一种特殊的表格的结构,是用来前端收集数据,检验信息、用户交互息息相关的组件。
常常搭配标签<input>、<button>和<texteara> <select>以及其内置属性action、method使用。
注意:
<input>要搭配属性type来定义输入的数据类型
对应值text/password/submit/radio/checkbox/reset/file/button赋予其不同功能和额外形
radio(单选项)、checkbox(复选项)、reset(重置内容)
<textarea>标签搭配属性cols和rows来设置复选框的大小
<label>标签用于添加文字描述 与for属性搭配,增强触发的效果
<button>标签配合属性type有参数submit、resert、button
表单内默认(submit)表单外默认(button)
<form action="收集完数据后要跳转的页面" method="post">
<!-- method属性具有两种参数post(后台传输)和get(地址栏传输) -->
<label>Account</label><input type="text"></input>
<label>Password</label><input type="password"></input>
<label for="famale">Sex</label> <input id="famale" type="radio">famale</input>
<label for="male">Sex</label> <input id="male" type="radio">male</input>
<button >提交</button>
</form>
结束语
HTML5出世后,迈入移动端增加了大量标签
初略分类为:
结构化:<header>、<nav>、<footer>、<section>、<article>...
功能化:<veideo>、<canvas>、<aduio>...
再加入这些标签之前,一个页面分区通过大量的<div>标签然后通过id属性进行区分。这与HTML语义化的标准相违背(合适的标签包含合适的内容).更有一些功能标签用来配合JavaScript使用。
优点:
1、增强了HTML的结构性 2、提高代码阅读性 3、seo(搜索引擎)增强 4、移动端增强
5、便于维护
三、CSS
1、概述
用于修饰html,css语法结构简单主要是由两部分组成:①选择器、②一条或多条声明
2、引入方式
内联样式(行内)
于HTML标签内使用 style属性=""
内部样式(<head>标签内)
通过<style> css语句 <\style>标签
外部样式(链入式)
通过<link rel = "stylesheet" type ="text/css" href="路径/样式名.css"></link>标签
3、选择器
分类:
①全局选择器
*{
/*
内部样式声明
一般用于去默认样式(样式初始化)
*/
}
②元素选择器
元素名(标签名){
/*
一条或多条声明
*/
}
③类选择器
以.开头后接html标签的class值
.class名(类名){
/*
要求对特定的HTML进行“标记”,通过class属性
多个类选择器可进行叠加作用于一个元素上,叠加时类名之间用space(空格隔开)
例:class="类名1 类名2"
*/
}
④ID选择器
针对某一个特定元素,只能使用一次,对应搭配属性id使用
#id名{
/*
每个id只能使用一次,不可重复
id选择器使用#开头,每个元素的id不可相同
*/
}
⑤合并选择器
写法合并,对样式相同,类型相同的选择器进行合并:选择器1,选择器2,...{}
#idname1,#idname,...{
/*
选择器样式相同
*/
}
.classname1,.classname2,...{
/*
选择器样式相同
*/
}
选择器优先级(当同一个内容使用多种选择器,重复样式修饰不同时处理原则)
CSS中选择器优先级按数值“权重”进行比较
①元素选择器:1
②类选择器(class):10
③id选择器:100
行内式具有最高的权重
优先级从高到低:行内式>id选择器>class选择器>元素选择器
同级别选择器样式冲突时,显示效果按最后一个显示(前面的被覆盖)
4、属性
字体属性
p{
//字体颜色
color:red;//直接填颜色
color:#ff0000;//十六进制
color:rgb(255,0,0);//0-255
color:rgba(255,0,0,0.5);//颜色及透明度
//字体大小
font-size:25px;//chrome浏览器默认最小12px
//字体线条粗细
font-weight:lighter//更细
font-weight:border;//更粗
font-weight:bord;//粗体
font-weight:400;//100-900(400等同默认)
font-style:normal;//默认
font-style:italic;//倾斜
font-family:"微软雅黑";
font-family:"Micorosoft YaHei","simsun";//字体有名称中间有空格必须用引号
}
背景属性
div{
width:400px;
height:400px;//400像素
//背景颜色
background-color:#00ff00;
//背景图片
background-image:url("相对路径or绝对路径");
//背景样式重复
background-repeat:no-repeat;//不重复
//背景规格
background-size:100% 100%;//容器的填充程度
background-size:300px 400px;//容器的填充程度,用像素描述
background-size:cover;//保持图片比例填充,多余不显示,无空白
background-size:contain;//保持图片比例填充,完全显示内容,但有空白
//设置背景的位置,默认起始位置为0% 0%,
background-position:left top;
//双值位,共有上(top)下(bottom)中(center)左(left)右(right)五个值,任意组合
//也可使用百分比 x% y%,像素来描述 xpos ypos
}
文本属性
p{
text-align:center;//文本居中
text-align:left;//文本左边起始
text-align:right;//文本右边起始
text-transform:capitalize;//首字母大写
text-transform:lowercase;//字体全部小写
text-transform:uppercase;//字体全部大写
text-indent:20px;//首行缩进20个像素
text-decoration:overline;//上划线
text-decoration:underline;//下划线
text-decoration:line-through;//删除线
}
表格属性
table{
//添加边框
border:20px solid black;//边框2像素 实线 边框颜色:黑
//高度
height:50px;
//宽度
width:50%;
}
table{
border-collapse:collapse;//将表格设置为单边框
}
td{
text-align:center;
//属性的垂直对齐
vertical-align:top;//垂直居上
vertical-align:center;//垂直居中
vertical-align:bottom;//垂直居下
}
//表格填充
td{
padding:20px;//在没有设置表格宽高时,表格大小刚好包括内容(边距padding为0)
}
关系选择器
①后代选择器
生效范围:所有被E元素囊括的 F元素,中间用空格隔开
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
<li>列表4</li>
<li>列表5</li>
</div>
</ul>
E F{ }//E为父 F为子
ul li{
font-size:23px;
color:red;
}
//效果作用在所有包含在ul下的li标签内(间接包含也算)
②子代选择器
选择所有与E元素有直接联系的F元素,对于更深层次的元素则不起作用
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
<li>列表4</li>
<li>列表5</li>
</div>
</ul>
E F{ }//E为父 F为子,注意直接性
ul>li{
font-size:23px;
color:green;
}
③相邻兄弟选择器
选择与E元素同级的F元素,用加号(+)相连接,仅作用于相邻的第一个元素
<h3>基准</h3>
<p>相邻第一个</p>
<p>相邻第二个</p>
E+F{ }//E与F同级,注意直接相邻性
h3+p{
font-size:23px;
color:blue;
}
④通用兄弟选择器
选择E元素之后所有同级的F,与之后相邻且同级的兄弟元素,共同作用
<h3>基准</h3>
<p>相邻第一个</p>
<p>相邻第二个</p>
<p>相邻第三个</p>
E-F{ }//E与F同级,注意同级兄弟性
h3-p{
font-size:23px;
color:blue;
}
CSS盒子模型
所有的HTML元素均可以视为盒子模型,在CSS中“box-model”这种术语是用来设计和布局时使用,其本质上就是一个盒子,封装周围的HTML元素,包括:
外边距(margin)、边框(border)、内边距(padding)、实际内容(content)
<div>
<p>测试内容</p>
</div>
div{
padding:50px;
padding:60px 90px;//先上下 后左右
//仔细划分-四方赋值
padding-right:10px;
padding-top:20px;
padding-left:30px;
padding-bottom:40px
boredr:3px solid blue;
margin:80px;
margin:100px 120px;//先上下 后左右
//仔细划分-四方赋值
margin-right:40px;
margin-top:30px;
margin-left:20px;
margin-bottom:10px;
}
弹性盒子模型
是CSS3的新特性,尤其是移动端(页面需要适应不同的大小,以及不同设备类型)
引入弹性布局,目的是提供一种更加有效的方式,来对容器中的子元素进行排列。
弹性盒子模型由弹性容器“flex-container”和弹性元素“flex item”组成
弹性容器通过设置display的属性值为flex(弹性容器)
弹性容器内包含一个或多个弹性元素
<div class="flex_container">
<div class="flex_item">flex item 1</div>
<div class="flex_item">flex item 2</div>
<div class="flex_item">flex item 3</div>
</div>
.flex_container{
//常规属性用于效果演示
width:600px;
height:1080px;
background-color:blue;
//设置弹性容器
display:flex;
}
.flex_item{
//弹性元素
width:100px;
height:100px;
color:green;
}
文档流
一种默认形式
浮动
清除浮动
清除浮动方式:
①父元素设置高度
②对受到影响的元素用clear属性清除
③overflow清除浮动
④伪对象方式
CSS3新特性
动画
媒体查询
雪碧图
字体图标