无标题文章

页面重构与特效

整体感知

浏览器呈现页面

浏览器(客户端)

HTTP协议

IP

域名

服务器

就是一台电脑

数据库

网页

资源文件

程序

阿里云

1.准备域名(备案)

解析

把IP地址解析到域名上面

2.上传代码到服务器

HTML与SEO

SEO(搜索引擎优化)

搜索引擎优化

网站的目的是为了宣传 被人找到

怎么让浏览器更好的搜索到咱们

HTML

官方文档

火狐开发者

https://developer.mozilla.org/zh-CN/

(砖瓦)->标签

表面上看

完全闭合标签

半闭合标签

本质

块级标签(容器标签)

特点

独占一行

可以设置宽高

作用

用于盛放其他标签

布局

标签

div

h 标题标签

非常重要

SEO

h1

一般情况  只有一个H1标签

浏览器在搜索 页面内容的时候 优先搜索h1标签

h2-h5

不要在意 h系列标签带来的样式效果,主要是SEO时候的权重

样式由CSS来设置

W3C的语法规范

HTML负责结构

CSS就是负责样式

p 段落标签

里面一般盛放 文字 图片 音视频等

内联标签

内联块级标签

页面结构

声明文档的格式

HTML5

html

head

meta 元标签

页面的编码集

utf-8基本涵盖了全世界所有主流语言的编码

就不会出现不能识别的语言 乱码的情况

name 指定功能

description 描述

功能

1.展示在浏览器列表上的介绍

2.有利于SEO

内容设置

SEO的权限 比title低 但是相对于其他标签 也是非常高的

提取页面中 关键的词汇 组成一句话

keyword 关键词

搜索时候 输入的词汇

功能

1.优先被搜索到

2.做SEM 购买的关键词 必须在这个里面

内容的要求(严格)

由很多单词组成

由英文的逗号分隔开

title 标题标签

微软 Bing 搜索 - 国内版

作用

1. 浏览器上面显示的标题

2. 做SEO的时候 权限是最高的(比如 百度搜 250公司 的时候,如果标题是 250公司 会被优先搜索到)

百度竞价

文字要求

页面功能的标题 - 站点的名字

body

div 容器标签

div+css

h 标题标签

非常重要

SEO

h1

一般情况  只有一个H1标签

浏览器在搜索 页面内容的时候 优先搜索h1标签

h2-h5

不要在意 h系列标签带来的样式效果,主要是SEO时候的权重

样式由CSS来设置

W3C的语法规范

HTML负责结构

CSS就是负责样式

p 段落标签

里面一般盛放 文字 图片 音视频等

span

span标签无语义,可以让咱们单独控制某些文本的样式或交互,他是一个内联标签(不能直接设置宽高,并且与文本或其他内联标签共享一行)

列表

分类

无序列表

ul

li

       

常用于  内容无序 且结构一致 的内容

有序列表

ol

li

常用于 有顺序 且结构一致的内容

     

  1. 沿着条路走到头
  2.  

  3. 右转
  4.  

  5. 直行穿过第一个十字路口
  6.  

  7. 在第三个十字路口处左转
  8.  

  9. 继续走 300 米,学校就在你的右手边

自定义列表(描述列表)

dl

最外层的部分

dt

标题

描述术语

dd

描述的内容

描述部分

   

标题

   

内容描述

   

XX电视剧

   

狗血剧情,呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀

意义与结构

意义

表示这一部分是一个整体

方便统一设置 这部分的结构和样式,特别是学了DOM之后

结构

无序列表

有序列表

自定义列表

自己定义

两层

外衣list

内容item

超链接 a

是一个内联标签(不能直接设置宽高,与其他内联标签共占一行)

可以链接到其他站点或者文件

特别重要的属性href

作用

1.可以链接到其他站点

可以做友链 提高网站的排名

注意 必须互链(互相链接)才可以提高排名

2.可以链接到其他文件||其他位置

其他位置

id 选择器

# 链接到当前页(id选择器的符号)

步骤:

1. 给要跳转到的位置  添加id选择器

安全稳定

2.给a标签 添加要跳转的位置  href="#xxx"

safe

跳转到其他文件

写文件位置

3.可以下载文件

img

半闭合标签

src

资源文件的路径

alt

1. 当图片路径出错的时候,会显示alt属性的文字

2.图片作为内容 浏览器不知道图片是什么

如果添加了alt的属性,浏览器会爬取到 alt属性的文字,有利于SEO

width

宽度

height

高度

单位

默认是px

只写数字 就会认为是像素单位

如果 希望图片 等比缩放

等宽缩放

只设置 宽度

等高缩放

只设置 高度

路径

相对路径

html相对于 资源文件的路径

从内往外找

跳转上一级目录的工具

../

绝对路径

完整的路径

d:/work/img/1.jpg

描述的是一台电脑中 资源文件的具体位置

(换一台电脑 位置就很可能不一样)

导致资源文件找不到

表单

具备 与服务器通讯的功能

form

用于包裹其他的表单 输入标签的

具备 与服务器通讯的功能

通过属性

属性

action

提交数据 到服务端的位置

method

HTTP的方法

get

post

input

type

button

checkbox

多选

color

date

datetime

datetime-local

email

file

hidden

image

month

number

password

radio

单选

range

reset

search

submit

tel

text

time

url

week

placehoder

value

指定input 的默认值

可以通过js获得input 的值

怎么实现单选

1.需要使用radio类型

2.使用name给同功能的分组

缺少这一步 不可实现单选

单选或者多选  怎么点击文字进行选择

label 与 input配合使用 可以实现该功能

使用

label的for  与input 的id 进行关联

   

   

   

   

按钮

button

多行文本输入

textarea

下拉列表

表格

组成

table表

tr表格的行(table row)

td 表格数据(table data)列

td 表格数据(table data)列

td 表格数据(table data)列

td 表格数据(table data)列

tr表格的行(table row)

td 表格数据(table data)列

td 表格数据(table data)列

tr表格的行(table row)

td 表格数据(table data)列

td 表格数据(table data)列

元素

定义表格

定义表格的行

定义表格列的组

定义用于表格列的属性

定义表格的页眉

定义表格的主体

定义表格的页脚

干什么?

1.展示表格数据

2.用于页面的布局

案例

CSS

层叠样式表

贴纸游戏

类似 女生化妆

前后关系

CSS的三大书写方式

1.属性 内联样式

style属性设置

2.嵌入样式脚本style

在html中 添加style标签

在标签中添加样式

3.通过单独CSS文件的方式

1.创建css文件

2.引入css文件

怎么与html文件关联

通过link标签关联

两大必掌握技能

选择器

工作职责

抓到 要设置样式的标签

三大常用选择器

元素选择器

标签名{}

类选择器

在html中指定 类选择器的名字

.类选择器的名字{}

id选择器

#xxx{}

不同组合 可形成无数种选择器

属性

background

用于设置背景

color

设置文字颜色

with

宽度

height

高度

类选择器

写法

在起始标签的里面 添加class属性

在css文件中  使用.类选择器的名字 

多类名

案例

伪类选择器

hour

转场(过渡)动画

transition:属性 动画时长 动画执行的函数 延迟执行;

盒模型

内容

内边距

使用padding设置

设置的顺序是

上右下左

padding设置

padding:10px;

上右下左都是10

padding:10px 20px;

上10 右20 下10 左20

padding:10px 20px 30px;

上10 右20 下30 左20

padding:10px 20px 30px 40px;

上10 右20 下30 左40

单独设置某一个方向的内边距

padding-left 左侧内边距

padding-right 右侧内边距

padding-top 顶部内边距

padding-bottom 底部内边距

效果:会让 内容距离边框 有一定的间距

!!!产生后遗症

影响盒子原本的宽高

真实宽度:宽+内边距+边框

边框

通过border设置(复合属性)

效果?

添加一个边框

!!!产生后遗症

影响盒子原本的宽高

真实宽度:宽+内边距+边框

破除影响的魔咒

把盒子设置成怪异盒模型

box-sizing:borderbox;

不再让 内边距和边框 影响 盒子的宽高

border:边框的宽度 边框的样式 边框的颜色;

边框的样式

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

单独一个方向的边框

border-bottom

底部

border-top

顶部

border-left

左侧

border-right

右侧

外边距

设置 自己与父元素或者 相邻元素的间距

margin

上右下左

单独一个方向的外边距

margin-bottom

底部

margin-top

顶部

margin-left

左侧

margin-right

右侧

特点

1.相邻元素的外边距重合现象

2.可以让元素 水平方向居中

margin:0 auto;

元素的显示模式

案例

导航条

页面布局

dispay

转块级元素

block

转内联级元素

inline

转内联块级元素

inline-block

选择器的权重

选择器

三大常用选择器

元素选择器

标签名{}

类选择器

在html中指定 类选择器的名字

.类选择器的名字{}

id选择器

#xxx{}

不同组合 可形成无数种选择器

后代选择器

选择器 (空格)选择器

可以选择父元素里面所有符合的标签(子子孙孙)

相同权重的选择器

先写的 会被 后写的覆盖掉(只有相同属性 才会被覆盖,不同属性会叠加)

权重

对比选择器的 权力大小

权重规则(计算方式)

id选择器(权重 至高无上)

类选择器(权重 差一丢丢)

元素选择器(权重 低到地底)

1.先去对比 id选择器的数量(数量多的 权重高)

2.对比类选择器的数量(如果有id选择器,id选择器数量相同;类 数量多的 权重高)

3.对比元素选择器的数量

#xx .qq .qq (想都不想 有皇帝 肯定最高)

.ee .eq .rr .tt p a

p

.vv

页面布局

技术

浮动(float)

特点

在同一行 飘着

如果给元素 设置浮动

父元素不再拥有这个元素的高度

高度塌陷

如果宽度不够

左浮动 往左面掉

右浮动 往右面掉

用法

给需要设置 水平排列的元素  添加浮动

float:left|right;

左浮动

1 2 3

右浮动

3 2 1

解决高度塌陷问题

1.设置父元素的高度(不建议使用)

2.在最后一个设置浮动标签的后面 添加一个空标签 ,

设置为clear:left|right|both;(不建议使用)

3.通过伪元素的方式

父元素:after{

content:"";

display:block;

zoom:1;

clear:both;

}

作业

背景

background

是一个复合属性

background-color

background-image

background-repeat

repeat-x

repeat-y

repeat

background-position

px

%

left top center bottom

background-attachment

重点

1.设置固定的背景图

2.sprite 精灵图 雪碧图

background-position

background-size

cover

等比放大  宽不够 按宽放大; 高不够 按高度整体放大

contain

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

px

%

文字相关

字体

font-family

自定义字体

1.自定义字体

@font-face

font-family

随意起名字

src

字体的路径

2.使用字体

在使用的位置 使用font-family设置

如:

        @font-face {

            /*设置字体位置*/

            src: url("字魂79号-萌趣奶油体.ttf");

            font-family: halibote;

        }

        p{

            /*font-family: "Adobe 楷体 Std R";*/

            font-family: halibote;

        }

文字阴影

text-shadow

x轴阴影的偏移量 y轴阴影的偏移量 羽化程度 颜色

文字颜色

color

文字字号

font-size

文本对齐的方式text-align

left 把文本排列到左边。默认值:由浏览器决定。

right 把文本排列到右边。

center 把文本排列到中间。

justify 实现两端对齐文本效果。

inherit 规定应该从父元素继承 text-align 属性的值。

text-decoration 给文本添加 上下中划线

none 默认。定义标准的文本。

underline 定义文本下的一条线。

overline 定义文本上的一条线。

line-through 定义穿过文本下的一条线。

blink 定义闪烁的文本。

text-indent 可以让首行文本缩进

white-space 处理文本间空格的样式 控制是否换行

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。

pre-wrap 保留空白符序列,但是正常地进行换行。

pre-line 合并空白符序列,但是保留换行符。

word-spacing:设置单词间的间距

line-height

设置文字垂直方向居中

把line-height与高度设置为相同的

定位

相对定位

相对于 自己原来的位置挪动

还会占据原来的位置 不会影响到其他元素的布局

绝对定位

绝对定位 一般与相对定位 混合着去使用

如果没有设置 父元素的相对定位,就会参考body的位置定位

失去自己的默认宽度

固定定位

固定在某一个位置

失去自己的默认宽度

顶部或底部的导航条

弹出的广告

某个位置的图标(联系客服、工具按钮)

粘性定位

粘帖在某一个位置

会占据一定空间

定位后可以使用的属性

left

right

top

buttom

通常会有 页面层级关系的现象(被覆盖)

可以通过z-index设置层级 默认值1 负值往下  正值向上

只要发现事件不触发  就需要检查是不是页面层级的问题

隐藏元素的方式

opacity: 0; 不透明度设置为零  虽然隐藏 但是 依然存在 并且可以接收事件

visibility: hidden; 隐藏元素不显示 但是位置依然在  不可接收事件

display: none; 影藏元素 不再占位

overflow

超出部分处理方式

hidden

超出部分隐藏

也是清除浮动的方法之一  在父元素添加

scroll

超出部分滚动显示

一定要添加上宽度或高度

插件

使用第三方插件注意事项

1.引入CSS样式

2.引入js

3.一定要严格按照示例的HTML结构去写

swiper

1.引入CSS样式

2.引入js

通常在body结束标签的上面引入

引入的标签 script

3.一定要严格按照示例的HTML结构去写

字体图标

fontawesome

https://fontawesome.dashgame.com/

回顾

HTML

用于布局的标签

肯定是块级元素

特征

1.肯定是一个完全闭合标签

2.肯定可以设置宽高 独占一行

3.不是通过display转换的元素

有哪一些

div

p

h1-5

ul与li

用于布局元素的本质

当做容器  去盛放其他元素

内容的标签

通常是内联元素

会表示某一些内容

img 表示图片

src是图片的路径

a 超链接

可以点击链接到其他位置的文本

也可以在它里面放图片 或者 其他内联标签

不可以放块级元素

href是要链接的位置

input 表单标签 单行文本输入

可以演化出来很多标签

通过type值变化

text

单行文本输入

number

数字输入

radiu

单选

range

滑杆

...

span

文本

一般让某些文字 有特殊效果  会用span包裹

代码规范

脚本加载

 

   

 

 

   

   

 

命名

W3C规范

W3C CSS2.1的 4.1.3 节中提到:

标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_);

它们不能以数字,或一个连字号后跟数字为开头。

它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。

选择器命名规则

2.1 字符采用

实际项目中,建议只采用字符[a-zA-Z0-9],再加连字号(-)和下划线(_)。避免使用中文。

2.2 慎用数字

以字母开头,避免纯数字,避免数字开头,以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别,而其它浏览器下则不识别(忽略该规则)。

2.3 区分ID和class

一个ID名在文档中只使用一次,class类名可在文档中多次使用。

2.4 语义化标签

语义化标签是个很大的话题,简单点说,语义化标签就是让css选择器的命名能够反映页面结构的功能区块,如内容区域的class类名定义为content,页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然,另外一个好处是提高网页对一些特殊浏览设备的友好性。

语义化标签的一个误区是按CSS样式表现的结果命名。

如,某区域字体大小为14px,则该区域的样式名定义为font14px,css样式为.font14px{ font-size:14px;}。如,某区域字体颜色为红色,则样式定义为red,css样式为.red { color: red; }。

这样的好处是实现某种程度的“所见即所得”,即只需要看该结构的样式名,即可知道该样式控制(实现)着怎样的效果。但其弊端同样明显。

可以想象,假设是产品boss突然要将某区域的字体颜色从red改为blue,那你是只更改.red { color: red; }将其改为.red { color: blue; }?还是“勤快”的将html页面所有的red类名更改替换为blue,再添加一个新样式.blue { color: blue; }?

前者意味着“所见非所得”,当看到一个命名为red的样式却表现为blue时,你是否觉得很诡异!?

后者意味着无止境的替换或修改,若是文件较少,还可以接受。但若是有成百上千个页面,你需要将成百上千的文件替换样式名称后再上传,崩溃了,有木有?

所以严重建议不按CSS样式表现的结果命名。

从深层层次分析,CSS的出现是让HTML只专注于结构,实现网页结构和样式的分离,这也是CSS能够代替表格布局而风靡的重要原因。按CSS样式表现结果命名,实际上是让HTML结构和CSS产生强耦合,是违背结构和样式分离的。

2.5 区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

CSS命名规则常用单词

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

页面主体:main

登录条:loginbar

标志:logo

广告:banner

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guide

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

你可能感兴趣的:(无标题文章)

定义表格的表头

定义表格单元

定义表格标题