标签:一个个 千万 pre 锚点 后台 特定 sel 解析 建立
前端概念:
广义:用户能看见并且交互的展示界面
狭义:运行在浏览器上的页面
学习的语言:
HTML5 =>(h5架构 + CSS布局 + JavaScript逻辑)
网页编写 | 移动端编写 | (客户端编写)
前后台分离 开发方式 =>通过接口完成数据交互 => 后台可以千千万,前端就是h5
一:HTML:超文本标记语言
学习HTML的目的:完成页面结构的搭建(什么时候用什么标签) HTML属于标记语言:标记语言为非编程语言,不具备编程语言具备的程序逻辑 HTML三大组成: 标签:被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记 eg:系统标签,自定义标签 指令:被尖括号包裹,由!开头的标记。 eg:<!doctype html> <!-- --> 转义字符:被&与;包裹的特殊字母组合或#开头的的十进制数。 eg:< >
1.1标签
标签的概念:被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号 标签具有特定的功能:换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频 注意:标签都有头有尾,用/来标识标签的结束(用来标识尾)
1.2页面
<!-- html的注释: 一个html页面有且只有一个页面模板 --> <html> <head> <!-- 字符编码 --> <meta charset="utf-8"> <!-- 页面标签的标题 --> <title>页面</title> <!-- 内部或外部的css样式 | js脚本 | 页面其他设置 --> </head> <body> <!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... --> <!-- js脚本 --> </body> </html>
1.3常用标签
目的:使用标签的语义与功能 | 完成页面架构的搭建(div) 1.div:“三无”,无语义,无功能,无样式,完成页面架构的搭建 2.h1:页面总标题,代表页面“整体含义”,出现一次即可 3.列表:ul>li*5 4.p:段落标签 5.img:图片标签,src(数据源),alt(资源加载失败的文本提示) 6.a:超链接标签,href(超链接地址),target(跳转方式_self | _blank:_self是在本页面跳转,_blank是跳转打开新页面),锚点 7.常用的文本类标签:span ,i (斜体), b (加粗)
二:CSS层级样式表
学习CSS的目的:完成页面布局(还原设计稿)
三大组成部分:
选择器:由标签、类、ID 单独或组合出现
作用域:一组大括号包含的区域
样式块:满足CSS连接语法的众多样式
2.1选择器
用来将CSS与HTML建立关联的桥梁,称之为CSS选择器
将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面与样式的解耦合目的,从而提高代码的复用性与开发效率
本质:就是页面标签的各种名字
2.2CSS三种引入方式
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操作的样式都是行间式
标签:一个个 千万 pre 锚点 后台 特定 sel 解析 建立
原文地址:https://www.cnblogs.com/liuxiaolu/p/10273598.html