css第一个元素

前端

做~自己de王妃 提交于 2019-12-09 19:51:55
HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) 网页文件的扩展名:.html或.htm(没有区别) 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) △css: 层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言 JavaScript: 简称“JS”,是一种属于网络的脚本语言 常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 △jQuery: jQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码 △boodstarp(JQ+css): bootstrap:简洁、直观、强悍的前端开发框架 它在jQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 △B/S (前端/后端) Web服务的本质: 浏览器发请求 --> HTTP协议 -->

前端基础总结(后续更新)

冷暖自知 提交于 2019-12-09 19:11:58
HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) 网页文件的扩展名:.html或.htm(没有区别) 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) △css: 层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言 JavaScript: 简称“JS”,是一种属于网络的脚本语言 常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 △jQuery: jQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码 △boodstarp(JQ+css): bootstrap:简洁、直观、强悍的前端开发框架 它在jQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 △B/S (前端/后端) Web服务的本质: 浏览器发请求 --> HTTP协议 -->

3实战篇 02:项目脚手架

对着背影说爱祢 提交于 2019-12-09 13:51:18
实战篇 02:项目脚手架 本节参考代码: react-boilerplate 经过了刀耕火种的插件化时代,伴随着越来越繁荣的 npm 生态,近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化,这也让开发或选择一个合适的项目脚手架(boilerplate)成为了前端项目的第一个难点。在 React 生态中,虽然已经有了像 create-react-app 这样官方指定的脚手架项目,但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题,不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分 在 JavaScript 框架接管了所有 DOM 相关的操作与更新后,HTML 方面的工作量就大量地减少了,很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致,我们可以在模板中添加 HTML5 新引入的 viewport 属性,这对于需要支持移动端的项目非常重要。 < meta name =

3实战篇 02:项目脚手架

╄→尐↘猪︶ㄣ 提交于 2019-12-09 13:49:18
实战篇 02:项目脚手架 本节参考代码: react-boilerplate 经过了刀耕火种的插件化时代,伴随着越来越繁荣的 npm 生态,近几年来前端开发的三大件 HTML、CSS 及 JavaScript 都发生了不同程度上的进化,这也让开发或选择一个合适的项目脚手架(boilerplate)成为了前端项目的第一个难点。在 React 生态中,虽然已经有了像 create-react-app 这样官方指定的脚手架项目,但为了深入理解一个前端脚手架所需要承担的责任与能够解决的问题,不妨让我们删繁就简一起来搭建一个只包含最少依赖的功能齐全的项目脚手架。 HTML 部分 在 JavaScript 框架接管了所有 DOM 相关的操作与更新后,HTML 方面的工作量就大量地减少了,很多时候只需要为框架提供一个可以注入 DOM 元素的根节点即可。 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > </ head > < body > < div id = " app " > </ div > </ body > </ html > 为了让页面的缩放比例与当前用户设备的屏幕尺寸保持一致,我们可以在模板中添加 HTML5 新引入的 viewport 属性,这对于需要支持移动端的项目非常重要。 < meta name =

CSS 学习笔记——入门

隐身守侯 提交于 2019-12-08 17:36:49
CSS 学习笔记——入门 这些是以前学习做的笔记,现在整理一下放到博客上,清理磁盘空间啦~ 一、什么是CSS? 1. CSS指层叠样式表 (Cascading Style Sheets),用来定义如何显示 HTML 元素。 2. 样式通常存储在样式表中,把样式添加到 HTML 中,是为了解决内容与表现分离的问题 3. 外部样式表通常存储在 CSS 文件中 二、CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 例如: p { color:red; text-align:center; } 1、改变样式的 HTML 元素,例如p{} 2、每条声明由一个属性和一个值组成,属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。例如color:red。 三、CSS注释 p { text-align:center; /*这里你可以写注释*/ color:black; font-family:arial; } 四、CSS中的id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性来设置 id 选择器 CSS 中 id 选择器以 "#" 来定义。 例如: #example { text-align:center; color:0xff05cc } 此

html、css整理笔记

梦想与她 提交于 2019-12-08 17:36:06
1.表单(form) <form name="form_name" action="url" method="get|post"></form> a.input控件 ---属性:type/name/value/size/readonly/disabled/checked/maxlength (1)单行文本框--- text <input name="文本框名称" type="text" value="初始值" size="显示的字符数" maxlength="最多容纳字符数" readonly="readonly" (设置为只读)disabled="disabled"(设置为不可操作)> (2)密码框---password <input name="文本框名称" type=“password” value=“初始值” size=“显示没字符数”> (3)单选框---radio <input name="单选框名称" type="radio" value="提交值" checked="checked"(是否被选中)> (4)复选框---checkbox <input name="复选框名称" type="checkbox" value="提交值" checked="checked"(是否被选中)> *******<input type="radio/checkbox" name=

第3部分 css复合选择器,标签显示模式(display)、行高(line-height)、css背景(背景图片及位置设置)、css三大特性及优先级

微笑、不失礼 提交于 2019-12-06 18:53:43
CSS 选择器的下一个重点: 复合选择器:后代选择器;并集选择器。 标签显示模式(display)。 CSS背景位置、背景图片等。 CSS三大特性:优先级。 一、CSS复合选择器 css 的基础选择器不能满足快速开发要求,所以要使用复合选择器。 复合选择器可以更准确更精细的选择目标元素。它由两个或多个基础选择器,用不同的方式组合而成。 1、后代选择器(重点),用空格选择 也叫做包含选择器,可用来选择元素或元素的子孙后代。写法是先把外层标签写在前,内层标签写在后面。例如: 父级 子级{属性1: 属性值1; 属性2: 属性值2;} 示例:.class h3 { color: red; font-size: 16px;} 2、子元素选择器,用大于符号选择(>) 只能选择子标签,不能选择孙子标签。写法是:父级标签写在前面,子级标签写在后面,中间用大于符号(>)连接。 示例语法:.class>h3 {color: red; font-size:16px;} 还可以根据关系继续选择下去:.class>h3>span {color: red; font-size:16px;} 注意:只能用来选择子标签(或者叫亲儿子),不能选择孙子标签 3、 交集选择器,用点选择 由两个选择器构成,找到的标签必须满足标签一的特点,也有标签二的特点。例如: h3.class {color: red;}

Web阶段知识点总结《二》

核能气质少年 提交于 2019-12-06 12:07:47
《二 》CSS 知识点回顾: HTML:超文本标记语言 描述内容显示在网页中 语法规则: 不区分大小写 标签成对,但是单标签 属性值必须双引号 标签固定 标签嵌套使用 常用标签: meta title div p span a:href img:src input select textarea form:action&method table:border get和post MIME类型: 就是标记文档的类型 格式:大类型/小类型 css:text/css js:text/javascript 图片:image/jpg 所有图片:image/* 1、CSS是什么? 层叠样式表 (Cascading Style Sheets) 定义如何显示HTML元素的样式 2、CSS的作用是什么? 1、提高工作效率 2、多样式层叠 3、提高了内容和样式的分离 就是美化HTML显示的内容 3、CSS的语法规则 规则: 选择器{属性名称:值;属性名称:值} eg: h1{color:red;} CSS不区分大小写,但是id和class选择器区分大小写 4、CSS的引入方式有多少? 1、内嵌样式 Html元素都有一个属性:style,直接在html元素内使用 eg: <h1 style="font-size:20px">今天好好听课</h1> 2、内部样式 在html文档的<head>标签中使用

003-CSS属性

我的梦境 提交于 2019-12-06 06:44:12
CSS存放位置 CSS代码可以被我们放在很多的位置,已关心的有三种写法:内嵌CSS、外链CSS、行内CSS。 内嵌CSS: 指的就是将CSS代码写在HTML网页中。 外链CSS: 指的就是将CSS代码写在外部的独立CSS文件中。 行内CSS: 指的就是将CSS代码写在具体的HTML标签身上。 注意:依据浏览器渲染页面的原理,我们选择将CSS代码写在HTML文件靠前的位置。 使用外链CSS写法的时候,外部独立的CSS代码文件当中不需要写style标签,同时还需要通过link标签将某个CSS文件引入带具体的HTML文件当中【rel属性对不要省略】 <link rel="stylesheet" type="text/css" href="目录CSS文件路径"/> 对于 上述的三种CSS文件存放位置来说,行内CSS的权重是最高,但是外链与内嵌并不存在谁一定大于谁的现象(权重),它的控制能力完全取决于个字是用的选择器权重 如果想要直接将某一个样式的权重提至最高,我们只需要在该句CSS代码的最后设置!important <style type="text/css">   div{     color: red!important;   } </style> 1、音频标签 H5指的就是HTML5这个新的语言标准,在HTML5当中定义了一个audio的标签,可以直接引入一段声音资源到网页当中

第十一章 前端开发-css

只谈情不闲聊 提交于 2019-12-05 20:02:04
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中。 css优势 : 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少代码量,增加网页浏览器速度,节省网路带宽 运用独立页面的css,有利于网页被搜索引擎收录 如何用? 我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过 link 标签引用该CSS文件即可 这样浏览器在解析到该 link 标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。 1.1.1 css语法 css语法分为2个部分: 1.选择器 2.声明 声明由属性和值组成,多个声明之间用分号分隔。 css注释:注释是代码之母 /*这是注释*/ 1.1.2 css引入方式 1.1.2.1 内嵌样式 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> P{ color: green; font-size: 15px; } </style> </head> <body> <p>这是一个p标签</p> </body> <