day46 前端基础HTML5+CSS3

时间 2019-12-20

标签 day46 day 前端基础 html5+css3 html css 栏目 HTML5 繁體版

原文原文链接

编辑器

pycharm,sublime,hbuild,webstorm,atom

前端概念

广义:用户能看见而且交互的显示页面 狭义:运行在浏览器上的页面

学习的语言

html5 => (h5架构 + css3布局 + javasript逻辑)
网页编写 | 移动应用编写 | (客户端编写)

先后台分离 开发方式 => 经过接口完成数据交互 => 后台能够千千万,前端就是h5

HTML(超文本标记语言)

学习html的目的:完成页面结构的构建(何时用什么标签)
html属于标记语言:标记语言非编程语言,不具有编程语言具有的逻辑
html三大组成:

标签：被尖括号包裹，由字母开头包含合法字符的，能够被浏览器解析的标记。eg:系统标签，自定义标签
指令：被尖括号包裹，由!开头的标记。eg:<!doctype html> <!-- -->,只有两个:文档类型,或注释,文档类型必须放在最开始的位置 转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:&#60; &#62; &nbsp; pycharm快捷键cmd+/,h5的注释语言<!----h5注释:浏览器会把全部空白字符(空格,制表符,回车等都解析成一个空格)> 若是要实现换行, => br 标签 让中文,呵呵不乱码 => 设置字符编码集 => meta(charset属性) -->

1.标签的概念 什么是标签(what) 被<>包裹,由字母开头能够结合合法字符(-或数字),能被浏览器解析的特殊符号 why 标签具备特定的功能:换行,设置页面字符编码集,控制文字字体颜色大小,加载图片和视频 注意:标签都有头有尾,用/加标签吗来标识标签的结束(用来标识尾)

页面

一个html有且只有一个页面模板,多了浏览器会只解析成一个,若是没写的话,浏览器会自动加一个页面模板
<!-- html的注释:一个html页面有且只有一个页面模板--> <!-- html的注释: 一个html页面有且只有一个页面模板 --> <html> <head> <!-- 字符编码 --> <meta charset="utf-8"> <!-- 页面标签的标题 --> <title>页面</title> <!-- 内部或外部的css样式 | js脚本 | 页面其余设置 --> </head> <body> <!-- 全部页面显示的内容: 文本 | 图片 | 视频 | 超连接 | 表格 | 表单 ... --> <!-- js脚本 --> </body> </html>

经常使用标签

输入标签吗,按tab,会自动建立<>和</>,这是一个插件实现的,emmet,
.body.name+.body.name以后按tab自动生成层级标签 学习的目的:使用标签的语义与功能,完成页面架构的搭建(用div来完成) 1.div:'三无',无语义,无功能,无样式,完成页面的架构 2.h1:页面总标题,表明页面的'总体含义',出现一次便可 3.列表:ul>li*5 (无序列表) 4.p:段落标签 5.img:图片标签,src(数据源),alt(资源加载失败的文本提示) 6.a标签:超连接标签,href(超连接点击后跳转的地址),target(转跳方式_self在当前页面跳转,_blank打开新页面跳转) 7.经常使用的文本类标签:spam,i,b

CSS:样式层级表

学习CSS的目的:完成页面布局(还原设计稿) 三大组成部分: 选择器：由标签、类、id单独或组合出现 做用域：一组大括号包含的区域 样式块：知足css链接语法的众多样式

选择器

what:用来将CSS与HTML创建关联的桥梁,称之为css选择器 why:将原来出如今标签内部的样式分离开来,能够用一个个选择器加以管理,达到页面与样式的解耦合目的,从而提升代码的复用性和开发效率 本质:就是页面标签的某种名字

CSS三种引入方式

# 1.行间式
'''
i)写在标签的style属性中
ii)属性 与 属性值 间用:赋值
iii)属性 与 属性 之间用;隔开
'''

# 2.内联式
'''
i)写在style标签中(style标签通常出如今head标签中)
ii)用选择器与html创建链接
iii)样式块书写在做用域内
'''

# 3.外联式
'''
i)css样式彻底与html文件脱离, 造成单独的.css文件, 样式书写在.css文件中
ii)用选择器与html创建链接
iii)样式块书写在做用域内
iv)要将.css文件与.html文件创建关联  => <link rel="stylesheet" href="css文件的相对路径">
'''

# 注: 选择器的应用场景在 内联式 和 外联式

'''
总结:
开发: 最经常使用的是外联式, 内联与行间辅助样式布局
测试: 内联式, 可读性最强, 且解耦有复用性
行间的应用场景: 最简单粗暴, js操做的样式都是行间式