前端工具使用记录(css/js/htm)

一、css功能（Cascading Style Sheets）
CSS 用于控制网页的样式和布局。
1.内部样式表直接在标签内部定义，使用style属性，写法如下：

<style></style>

2.使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的部分插入以下内容：

<link rel="stylesheet" type="text/css"  href="文件位置/你的CSS文件名.css" />

3.内联样式是直接在html标签上定义该标签的css样式，如：

  <div style="width:200px;height:30px;"></div>

生效规则：

样式表的元素选择器选择越精确，则其中的样式优先级越高。
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高。
一个元素同时应用多个class，后定义的优先(即近者优先)
如果要让某个样式的优先级变高，可以使用!important来指定。

CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高；
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 7 种基础的选择器：
ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href=“segmentfault.com”]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
后代选择符： .father .child{}
子选择符： .father > .child{}
相邻选择符: .bro1 + .bro2{}
CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
display 属性 none（此元素不会被显示）、block（此元素将显示为块级元素，此元素前后会带有换行符）、inline（默认。此元素会被显示为内联元素，元素前后没有换行符）、inline-block（行内块元素）。
子元素只有在自身没有设定相应的样式参数时，才会继承父元素的。
元素右下角出现黄色三角形中间有感叹号说明这个属性在这里无效。

overflow处理元素属性超出容器尺寸的情况。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值

一些最重要CSS3模块如下：选择器，盒模型，背景和边框，文字特，多列布局，用户界面
-moz代表firefox浏览器私有属性
-ms代表ie浏览器私有属性
-webkit代表safari、chrome私有属性
-o代表opera私有属性

border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
border-image 设置所有边框图像的速记属性
box-shadow 附加一个或多个下拉框的阴影

文本效果
text-shadow，box-shadow，text-overflow，word-wrap，word-break
opacity 属性为按钮添加透明度 opacity: 0.6;

元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中

弹性盒子是 CSS3 的一种新的布局模式。
弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

二、html
全写： HyperText Mark-up Language 译名：超文本标识语言.
通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；纯文本文件；文件扩展名： .html；html文件必须在Web浏览器上运行。

一份 HTML 文件的基本架构：

<!doctype html>
<HTML>
<HEAD>
<title>HTML超文本标记语言在线教程</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="author" content="合肥世杰">
<meta name="keywords" content="html,css,asp,jsp,php"><meta name="description" content="世杰教育网站！"> <meta http-equiv="refresh" content="10">  <meta http-equiv="refresh" content="2;url=http://www.163.com"> <meta http-equiv="Expires" content="01 Jan 2008 00:00:00"> <base href="http://www.sje.com.cn" target="_blank"> <link href="../css.css" rel="stylesheet" type="text/css">  <link rel="fontdef" src="Amelia.pfr"> </HEAD>  <BODY> 网页的内容，很多标记都作用于此  <script src="/jquery.js"></script></BODY> </HTML>

HTML5中表单验证的方法(在提交前，表单会验证控件是否符合设置的要求)

1.在表单控件中将required特性设置为required或者true，必填字段，而且会提供提示
2.类型不匹配  保证控件值与预期类型相匹配(如numbe、email、URL等)，通过指定表单控件的type特性值<input type="email" name="myEmail">
3.格式匹配   根据表单控件上设置的格式规则验证输入是否为有效格式，pattern特性，井赋予适当的匹配规则。<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A creditcard number is 16 digits with no spaces or dashes">
4.长度控制   设置maxLength特性  <input type="text" name="limitedText" maxLength="140">
5.最小值   min特性，并赋予允许的最小值 <input type="range" name="ageCheck" min="18">
6.最大值  max特性，并赋予允许的最大值 <input type="range" name="kidAgeCheck" max="12">
7.增量设置  设置step特性，指定数值的增量  <input type="range" name="confidenceLevel" min="0" max="100" step="5">

XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。FormData 就是 XMLHttpRequest一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。
例如：

       file = image.files[0];var formData = new FormData();formData.append('image', file);$.ajax({type: "POST",url: url,data: formData,   contentType: false, //告诉jQuery不要去设置Content-Type请求头headers: {Accept: "application/json"  },processData: false, //告诉jQuery不要去处理发送的数据success: function (response) {console.log(response)}

processData设置为false。因为data值是FormData对象，不需要对数据做处理
contentType设置为false，不设置contentType值，因为是由表单构造的FormData对象，且已经声明了属性enctype=“multipart/form-data”，所以这里设置为false

新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

定义页面独立的内容区域。

查看全文

http://www.taodudu.cc/news/show-2298288.html

第三阶段：数据存储与计算（离线场景)：3.2 数据存储hdfs
linux下最常见的操作和命令
linux基础教程-黑马程序员汇总PDF
linux基本资料
java输出空心菱形用斜杠,java基础知识总结1
php数字验证码代码,php中文字母数字验证码实现代码
Context-Aware Patch Generation for Better Automated Program Repair -上下文感知补丁生成更好的自动化程序修复
算法训练营图的应用（拓扑排序）
Linux 基础
01 - 树莓派简介以及烧录系统
数据集成-2-xml
05_家谱管理系统(小钱版)[数据结构][2012-02-03]
Java数据结构与算法4-树学习笔记
数据结构--树
赛码行测题库_行测数字推理题库
路由交换复习选择题题库
java知识竞赛题库_java程序设计题库
用c语言做判断题题库及答案,C语言题库及答案(选择题)
大一python选择题题库及答案_万维考试系统选择题题库(含参考答案).pdf
python爬取网页题库_用Python爬取本站离线题库
mysql 题库_题库Mysql表设计案例
Mybatis题库
操作系统选择题题库
python选择题题库百度文库_(完整版)Python题库
大一python选择题题库及答案_大学计算机python选择填空题库及答案
大一python选择题题库及答案_python选择题库
shell题库选择题_linux题库选择及答案
python选择题题库
计算机组成原理选择题题库
最全的Java笔试题库之选择题篇-总共234道【61~120】

前端工具使用记录(css/js/htm)相关推荐

【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）
项目源码已上传至码云仓库:云南农业职业技术学院/HTML响应式成人教育官网前端页面(HTML+CSS+JS实现) 项目演示地址:成人教育网 AAP端下载地址:成人教育网APP端.apk-互联网文档类资 ...
前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
前端面试宝典 html css js ajax es6
面试宝典一.HTML和CSS 1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 1 3. ...
一节前端课：html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示,由于一直想学前段的知识,点进去了,收获了一些东西,做个记录. 题目:计算器的实现技术:html+css+js 1 . body里放俩div,一个大的包一个小的,小 ...
表严肃：前端语言基础HTML+CSS+JS，JQuery
课程链接HTML 课程链接CSS 课程链接JS 课程链接JQuery font-awesome使用图标使用与效果: HTML HTML教程文档一张网页一个html:内部是页面 body:放可见的显 ...
前端开发基础 HTML+CSS+JS
文章目录 HTML介绍 CSS介绍 JavaScript介绍 HTML.CSS和JavaScript之间的关系 HTML使用基本结构常用标签 CSS使用使用方法常用属性盒子模型选择器默认 ...
前端总结（html css js jQuery）
前端三剑客总结在这里插入代码片架构模式:c/s 和 b/s (客户端/服务器浏览器/服务器 ) 我们学的是b/s架构模式. 资源分类:动态和静态资源动态资源需要用到数据库(不是动一动就是动态资源 ...
web前端大作业html+css+js 20页网页设计+二级菜单
文章目录前言一.我的界面二.代码 html 1.首页 2.资料 css 首页 js 时间显示总结前言 web课程总共学了8周,有6周的时间我都在摸鱼.而在最后的两周里,我翻看了csdn上许多 ...
基于HTML+CSS+JS+JSP+Mysql的书城购书商城设计与实现文档+项目源码及数据库文件
资源下载地址:https://download.csdn.net/download/sheziqiong/85723200 资源下载地址:https://download.csdn.net/downl ...
HTML+CSS+JS漫谈（一）
既然是技术博客,从本篇开始,将进入技术的主题.我将写出自己学习技术时遇到的问题以及解决的思路,一些想法以及一些收获, 由于个人学的浅,如果有说的不对或不准确的地方,还请大家批评指正. 前端开发三剑客 ...

前端工具使用记录(css/js/htm)

相关文章：

前端工具使用记录(css/js/htm)相关推荐

最新文章

热门文章