什么是网站
网站是由很多个网页组成。
网站建设流程:
1、域名(网址)
2、租用空间(服务器)?
3、网站建设(1. 确定网站主题,2.收集资料,3、规划网站,4、制作页面)
4、网站推广
5、网站维护
二、什么是网页?
Web标准(网页的组成):结构(html)+ 表现(css) + 行为(js)
1、HTML:实现网页结构(网页内容)
2、CSS:实现网页的修饰、表现
3、JS:实现的是交互效果,可以让页面动起来
三、HTML发展史
html 超文本标记语言(Hyper Text Markup Language)www万维网的描述性语言,超文本指的是网页中包含文字、图片、输入框、音频和视频等组成,所以不是单纯的文本,而是超文本;超文本就是超链接,标记就是标签
H5的基本结构
一、两个区域1.head描述区 2.bady内容区
二、html标签1.单标签《空标签》 2.双标签《成对的》
html语法说明
1.在尖角好后面的第一个单词就是标签的名称
2.在标签后面,用空格隔开的是属性
3.属性和属性值之间用等号连接
4.属性值放在引号里面(单双引号都可以)
5.如果一个标签有多个属性时,属性和属性之间用空格隔开
常用标签
1;标题标签
区别:拥有自己默认的大小,文本也是加粗状态 唯一性:h1一个页面只能出现一次 放logo
h2-h6可以是网页板块的标题,没有唯一性
2:文字加粗标记 区别strong偏向强调语气的作用
3:文本倾斜标记
4:下划线标记
5:强制换行符
特点:浏览器只要遇到br 后面的内容聚会放到下一行
6:水平线标记
7:上丶下标记 (上) (下)
8:段落标记
9:代表单个文字后一小段文本 利用css可以达到字体变色
10:转义字符  ;(空格) >; <; (左右尖角号) ©;版本符号(备案图标)
11:div 作用:专门给网页划分布局的
html的列表
有序列表
无序列表
自定义列表
-
(
- 一般情况下放置图片 )(
- 放到是对图片的解释 )
拓展: 改变列表符号的样式:type=“属性值” 属性值:a/A i/I
改变列表符号开始的符号: start+“属性值” 属性值指一个数字,数字呆表几就从第几个开始
超链接
a里面的属性href=“跳转的地址” 开头为http://网址
target=“属性值” 属性值为_self(默认值:在当前页面打开) _blank(在新窗口打开)
title=“”提示信息 也可以作为图片的一个小标题(大部分标签都支持title属性)
标签的应用
img标签里的属性 src=“图片的路径”
alt=“文本替换图片”(属性值为空也不能删除) 说明:当图片加载不出来是,alt里面的文本替换图片
width=“”图片的宽 height=“”图片的高 border=“” 图片的边框
找图片位置(相对路径)
目标和你在同一个文件 同级找同级 ./ 当前路径
父级找子级 ./文件夹名称/图片名称
子级找父级 …/返回上一级/图片名称
表格 行 列
width=“”宽 hight=“”高 border=“”边框 bordercolor=“”边框颜色
cellspacing=“” 相邻单元格边框间的间距
cellpadding=“” 内容距离边框之间的间距
align=“属性值” 水平对齐方式 属性值:left center right
valign=“属性值” 垂直对齐方式 属性值:top bottom middle
合并单元格:跨行的都是合并行 不跨列行的都是合并列
合并行的属性:rowspan 合并列:colspan 注:无论合并行还是列都是在td操作 先合并行在列
表单标签(标签域)
属性 action=“url(路径)” 表单提交的路径
method=“get/post” 数据的传输方式
maxlength="" 输入字符的最大长度
name=“表单的名称”
表单控件: 标签input
属性:type=“” 指定input生成的类型(输入框,提交按钮,空按钮等等)
value=“” 根据type类型不同,作用也不一样
name=“” 当前表单元素的名称
size=“” 以字符为单位的,控制表单元素的大小
(文本框(输入框)
(提交按钮)
(密码框)
重置按钮(是当前表单恢复到初始状态)
空按钮
css语法: 选择符{属性:属性值;} 注:所有css代码 都要放到css样式表里
css语法说明 1:选择符悬着的说html标签
2:所有css声明都要放在大括号里面
3:css声明 包括 属性 和属性值
4:css的属性和属性值 使用冒号进行连接
5:每条声明的后面用分号结尾
6:如果一个属性有多个属性值的时候,属性值和属性值之间用空格隔开
css样式表 1:内部样式表 <style type=“test/css” 注:内部样式表,尽量放在head描述区里
2:外部样式表有两种方法
(1)首先创建一个后缀名为.css的文件
hrel=“” 连接路径 rel=“stylesheet” 建立关联性
(2)
两个的区别1:本质区别 link属于html一个标签 @import属于css提供的一个方法
2:加载顺序 link导入的css 和html 的结构 同时加载。 @import 先加载结构 后加载样式
3:兼容性差别 link的兼容性更好一些
4:js操作DOM样式的擦别 #import导入的css是无法通过js做动态的修改
3:内联样式表(行间样式,行内样式) <标签 style=“内联样式”></标签>
样式表的权重关系:
1.内联样式表的权重最大!
2.内部和外部样式的权重,和书写的前后顺序有关!
(放在后面的会把放在前面的样式覆盖掉,覆盖的只是相同属性的样式,不同属性的样式会继续执行。)
!important -> 当前声明具有最高权重! 语法: background:red!important;
css语法:
选择符{属性:属性值;}
选择符:选择符就是给标签起名字。
一:类型选择符(标签选择符)
所有的html标签可以直接当作选择符进行应用。
比如:div\p\em\i\b\strong.............
特点:能选中当前结构里面全部同名标签。
应用:想统一某一个标签样式的时候或者是清除某个标签默认样式的时候
。
二:id选择符
语法:
起名字: <标签 id=“名称”></标签>
用名字写样式: #名称{ 属性:属性值 }
特点:唯一性!在同一个页面里面,一个id名只能用一次。
应用:来划分网页外围结构
三: 类选择符(class选择符)
语法:
其名称: <标签 class="名称1 名称2 名称3 名称4..."></标签>
用类名写样式 .名称{属性:属性值;}
特点:
1:一个元素可以有多个类名,类名可以重复出现
2:可以制定一类样式.
(id、class)起名规范:
尽量小写字母开头。
数组、字母、下划线、连字符的组合。
不能使用关键字命名 (所有的标签和属性都属于关键字)
命名尽量反应板块内容、或者反应结构(语义化)。
可以是拼音,但是不能出现汉字和特殊字符。
四: 群组选择符
语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
比如:.名称1,.名称2,.名称3.....
五: 包含选择符(子代选择器\后代选择符) ( 通过父元素找子元素 )
语法:
父元素 子元素{ 属性:属性值; }
六: 伪类选择器
a:link {color: red;} 未访问的链接状态
a:visited {color: green;} 已访问的链接状态
a:hover {color: blue;} 鼠标滑过链接状态
a:active {color: yellow;} 鼠标按下去时的状态
比如a:lingk{
color:red
} 就会显示未访问的连接状态颜色为红色
七:通配符
*{ }
* 选择页面中所有的元素!
*{
margin:0; 盒子外围间距清零
padding:0; 盒子内部的距离清零
}
选择符的权重关系:
id > class > 标签
四个数字表示权重:
内联样式表 -> 1000
id -> 100
class -> 10
标签 -> 1
伪类选择符 -> 10
通配符 -> 0
包含选择符的权重为权重之和
eg :
id class{} 100 + 10 == 110
id id class 标签{} 100+100+10+1 == 211
当权重相同的时候,后写的样式会前写的样式 给 覆盖掉。
!important 权重是最高的 比如background:red !important ;
文本属性:
1: font-size:; 控制文本大小
1:为了消除系统之间显示差异,规定:16px 为标准字体大小。
2:文本大小设置,设置为偶数。
3:PC端项目,设置最小尽量别低于12px ;
4:从ps中获取文本大小,汉字量取文本高度。
5:文本单位: px \ em \ pt(磅)【常用在印刷领域】
12px == 9pt
em ( 相对大小单位,相对于父元素的font-size值而定 ) (默认情况下, 1em == 16px)
6:
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2:color:; 控制网页中的文本颜色
颜色值:
a:十六进制表示颜色值:
16进制数字:0 - 9 a - f
颜色值: #ff0000
6个数字:
前两位 红色
中间两位 绿色
最后两位 蓝色
b: RGB(255,0,0) 模式
拓展: rgba(255,0,0,0.5)0.5 指定文字透明度
3:font-family:;控制的是网页中字体类型。
默认的字体类型:"微软雅黑"
系统能支持的字体:web安全字体:微软雅黑、宋体、楷体...
英文默认的字体:Arial
语法:font-family:字体1,字体2,字体3,......
注:
1:中文字体必须放在引号里面
2:如果一个字体多个单词组成 也要放在引号里面
3:如果字体是一个单词 不需要引号。
4:先写英文字体,后写中文字体。
4:font-weight:;控制文本是否加粗
属性值:
bold 加粗
bolder 加粗
normal 清除加粗,恢复常规文本
100 - 900
100 - 500:不加粗
600 - 900:加粗的状态
5: font-style:;控制文本的倾斜
属性值:
italic 倾斜
oblique 倾斜(倾斜幅度更大,但是一般不会有明显变化)
normal 恢复常规文本
6: line-height:; 控制文本的行高。
a: 从ps设计图上:怎么获取行高:从第一行开始量到第二行开始。
b:
单行文本:
如果让单行文本在容器里面上下居中,line-height设置容器高度即可
显示状态:
小于容器高度的时候:文本往上移动
大于容器高度的时候:文本往下移动
7:text-align:; 控制文本的水平对齐方式
属性值:
center 居中对齐
left 左对齐
right 右对齐
justify 两端对齐
8:text-decoration:; 文本修饰(下划线、上划线、删除线)
属性值:
none 清除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
9: text-indent:;
text-indent:2em;首行缩进:
text-indent能设置负值:文字往左走。(悬挂式缩进)
10:字间距、词间距
letter-spacing:; 字间距
word-spacing:; 词间距
11: text-transform:; 控制文本大小写。
属性值:
uppercase 大写
lowercase 小写
capitalize 每个单词的首字母大写
浮动
属性:float
属性值:
left
right
none
特点:
1:添加浮动之后,元素是不占据空间。
2:如果让多个元素横向进行排列,所有的排列的元素,都必须添加浮动。
3:如果子元素添加浮动,宽度大于父元素的时候,后面的元素被挤到下一行。