编辑器

pycharm,sublime,hbuild,webstorm,atom

前端概念

广义:用户能看见并且交互的显示页面

狭义:运行在浏览器上的页面

学习的语言

html5 => (h5架构 + css3布局 + javasript逻辑)

网页编写 | 移动应用编写 | (客户端编写)

前后台分离 开发方式 => 通过接口完成数据交互 => 后台可以千千万,前端就是h5

HTML(超文本标记语言)

学习html的目的:完成页面结构的构建(什么时候用什么标签)

html属于标记语言:标记语言非编程语言,不具备编程语言具备的逻辑

html三大组成:

标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签

指令：被尖括号包裹，由!开头的标记。eg:<!doctype html> <!-- -->,只有两个:文档类型,或注释,文档类型必须放在最开始的位置

转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:< > &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操作的样式都是行间式

day46 前端基础HTML5+CSS3的更多相关文章

  1. 2019年最新超级有趣好玩的html+css网页布局课程,前端入门基础,html5+css3零基础入门课程-黑马程序员pink老师精心录制

    大家好,我是黑马程序员pink老师!! 本次视频是前端零基础入门的课程,pink老师采取有趣好玩讲法,带你快乐的学习枯燥的html+css知识,学完之后让你能快速布局pc端页面.代码也可以讲的好玩有趣 ...

  2. 10款web前端基于html5/CSS3应用特效

    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式 对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换.这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦 ...

  3. 大前端之HTML5\CSS3

  4. 《web前端设计基础——HTML5、CSS3、JavaScript》 张树明版 简答题简单整理

    web前端设计基础——HTML5.CSS3.JavaScript 简答题整理 第一章 (1)解释一下名词的含义:IP地址.URL.域名   iP定义了如何连入因特网,以及数据如何在主机间传输的标准. ...

  5. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  6. front-end——HTML5/CSS3基础

    概述 1.什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页,随着互联网技术的发展,html5,css3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完 ...

  7. 【Web前端HTML5&CSS3】03-字符实体与语义标签

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...

  8. 【Web前端HTML5&CSS3】05-样式继承与其他概念

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位 像素 屏幕分辨率 图像分辨率 百分比 em ...

  9. 【Web前端HTML5&CSS3】06-盒模型

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型 1. 文档流(normalflow) 2. 块元素 3. 行内元素 4. 盒子模型 盒模型.盒子模型.框 ...

随机推荐

  1. 黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

    更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...

  2. spring boot项目中处理Schedule定时任务

    项目中,因为使用了第三方支付(支付宝和微信支付),支付完毕后,第三方支付平台一般会采用异步回调通知的方式,通知商户支付结果,然后商户根据通知内容,变更商户项目支付订单的状态.一般来说,为了防止商户项目 ...

  3. maven私库nexus2.3.0-04迁移升级到nexus-3.16.1-02（异机迁移备份）

    环境信息: nexus2.3.0-04安装在32位Windows server 2003系统上 安装位置信息如下: 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,nexus2 ...

  4. CentOS_6.5配置iptables防火墙策略

    ###############配置filter表防火墙############### #清除预设表filter中的所有规则链的规则iptables -F #清除预设表filter中使用者自定链中的规则 ...

  5. 初学者常用的LINUX命令

    测试初学者常用的LINUX命令 一.常用管理命令:1. shutdown -h now 关机命令2. shutdown -r now (reboot) 立即重启命令 3. clear 清屏命令 4. ...

  6. python对mysql进行简单操作

    python 连接MySQL数据库,进行简单操作 一.连接MySQL数据库,关闭连接 import pymysql db = pymysql.connect(host="xxx.xxx.x. ...

  7. shell脚本实现telnet测试服务端口

    备注,使用方法:当前目录下要存在需要测试的地址端口的文件ip.txt,例子:cat ip.txt141.12.65.17 7500 #!/bin/bashcur_dir=$(pwd)ipfile=$c ...

  8. tail -f 命令暂停方法

    Linux 下查看日志时,使用 tail -f 可以不断的刷新日志信息. 例如: tail -f logs.log 此时要想暂停刷新,使用ctrl+s暂停终端.若想继续终端,使用ctrl+q. 若想退 ...

  9. Anatomy of a Database System学习笔记 - 事务：并发控制与恢复

    这一章看起来是讲存储引擎的.作者抱怨数据库被黑为“monolithic”.不可拆分为可复用的组件:但是实际上除了事务存储引擎管理模块,其他模块入解析器.重写引擎.优化器.执行器.访问方式都是代码相对独 ...

  10. HTTP发送RAW请求注意的问题

    1.使用jar httpcomponents-client-4.5.6-bin.tar.gz 解压后倒入lib中的所有包 2.参考代码如下 import org.apache.http.HttpRes ...