HTML

概念：

　　超文本标记语言。

核心：

　　语义。

主体结构：

　　<!doctype html>　　//告诉浏览器这是什么语言
　　html　　　　　　　//主体
　　head　　　　　　//头文件
　　body　　　　　　//页面主体
　　meta 　　　　　　//设置字符集，放在head标签的第一行
　　title　　　　　　　//网页标题

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

主流浏览器内核：

　　IE: trident内核

　　Firefox：gecko内核

　　Safari:webkit内核

　　Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

　　Chrome:Blink(基于webkit，Google与Opera Software共同开发)

常用的标签：

　　功能性标签

　　　　超链接：<a herf=“链接地址”>文字内容 </a>

　　　　表格：table
　　　　　　　　tr行
　　　　　　　　td列
　　　　　　　　th相当于加粗居中的td
　　　　　　　　align对齐方式
　　　　　　　　bgcolor表格背景颜色
　　　　　　　　collspacing=“0” 单元格之间的距离为0
　　　　　　　　border-collapse：collapse表格内部之间的距离
　　　　　　　　rules=“all”内部边框的显示
　　　　　　　　border=“1”表格边框的宽度

　　　　表单：form用于用户输入input表单的

　　　　iframe：iframe 元素会创建包含另外一个文档的内联框架，无法解析的文字放入会原样输入

　　　　列表：
　　　　　　无序列表：ul li
　　　　　　有序列表：ol li
　　　　　　自定义列表：dl dt （dd修饰dt）

　　　　图片：img　

　　　　　　　　通过img标签的src引入图片地址

　　　　　　　　【注】在开发过程中一定要写alt属性，当图片加载失败的时候显示的文字，会加强搜索引擎对网页的排名

　　　　　　img的alt与title有何异同？

　　　　　　　　　　alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。

　　　　　　　　　　　　　　　　(在IE浏览器下会在没有title时把alt当成 tool tip显示)

　　　　　　　　　　title(tool tip):该属性为设置该属性的元素提供建议性的信息。

　　辅助性标签

　　　　　　部分举例：

　　　　　　　　b　　加粗
　　　　　　　　i　　　倾斜
　　　　　　　　strong　　加粗
　　　　　　　　em　　　　加粗
　　　　　　　　....

　　　　　　strong与em的异同？

　　　　　　　　　　strong:粗体强调标签，强调，表示内容的重要性

　　　　　　　　　　em:斜体强调标签，更强烈强调，表示内容的强调点

　　HTML5新增的语义化结构标签：

　　　　section元素表示页面中的一个内容区块

　　　　article元素表示一块与上下文无关的独立的内容

　　　　aside元素是辅助 article 区域的内容。也可以理解为整个网页的辅助区域

　　　　header元素表示页面中一个内容区块或整个页面的标题

　　　　footer元素表示页面中一个内容区块或整个页面的脚注

　　　　nav元素表示页面中导航链接部分

　　　　figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

　　　　main元素表示页面中的主要的内容(ie不兼容)

　　语义化功能标签：　　

　　　　　　　　meter
　　　　　　　　progress
　　　　　　　　output
　　　　　　　　.....

　　无语义标签：

　　　　　　　　div　
　　　　　　　　span

　　多媒体标签：

　　　　　　audio　　音频播放（注意：<audio>元素不支持播放wma格式的文件）

　　　　　　video　　视频播放

　　　　　　source　　为video和audio提供媒介资源

　　　　　　　　　　　　media：规定媒体资源的类型(没有浏览器支持)

　　　　　　　　　　　　src：规定媒体文件的url

　　　　　　　　　　　　type：规定媒体资源的MIME类型

　　　　　　　　　　　　　　　　常用类型
　　　　　　　　　　　　　　　　　　音频
　　　　　　　　　　　　　　　　　　　　audio/ogg
　　　　　　　　　　　　　　　　　　　　audio/mpeg
　　　　　　　　　　　　　　　　　　视频
　　　　　　　　　　　　　　　　　　　　video/ogg
　　　　　　　　　　　　　　　　　　　　video/mp4
　　　　　　　　　　　　　　　　　　　　video/webm

标签等级分类：

　　　　文本级标签：

　　　　　　　　　　span
　　　　　　　　　　　i
　　　　　　　　　　　b
　　　　　　　　　　　p（最特殊）
　　　　　　　　　　　...

　　　　容器级标签：　

　　　　　　　　　　div
　　　　　　　　　　h1
　　　　　　　　　　ul li
　　　　　　　　　　....

条件注释：

　　　　　　gt：大于

　　　　　　lt：小于

　　　　　　gte：大于等于

　　　　　　lte：小于等于

写法示例
　　　　　　　　　　<!--[if lte ie8]>

　　　　　　　　　　　　您的浏览器版本过低

　　　　　　　　　　<![endif]-->

CSS

定义：

　　层叠样式表

核心：

　　层叠

用法：

　　　　写在标签里的style属性：权重最高

　　　　style标签：直接写css
　　　　　　　　　　@import url()

　　　　link标签：引入外部样式

选择器：

　　　　三大基础选择器：　　

　　　　　　　　标签：权重最低
　　　　　　　　　id：权重最高
　　　　　　　　class：权重其次

　　　　高级选择器：（具体用法及规则请查询w3c）

　　　　　　　　并集
　　　　　　　　交集
　　　　　　　　后代
　　　　　　　　子元素选择器
　　　　　　　　相邻兄弟选择器
　　　　　　　　普通兄弟选择器
　　　　　　　　通配符
　　　　　　　　超链接伪类选择器

css3选择器：

　　　　属性选择器：　　　　

　　　　　　　　　　E[attr] 选择具有某个属性的元素

　　　　　　　　　　E[attr=value] 选择某个属性等于指定值的元素

　　　　　　　　　　E[attr^=value] 选择某个属性值以value开始的元素

　　　　　　　　　　E[attr$=value] 选择某个属性值以value结尾的元素

　　　　　　　　　　E[attr*=value] 选择某个属性值中包含value的元素

　　　　　　　　　　E[attr~=value] 属性列表中包含有value

　　　　　　　　　　E[attr|="value"] 指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

　　　　　结构伪类选择器：

　　　　　　　　　　X:first-child 匹配子集的第一个元素。IE7就可以支持

　　　　　　　　　　X:last-child匹配父元素中最后一个X元素

　　　　　　　　　　X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

　　　　　　　　　　X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

　　　　　　　　　　X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X

　　　　　　　　　　X:only-of-type匹配属于同类型中唯一兄弟元素的X

　　　　　　　　　　X:first-of-type匹配同级兄弟元素中的第一个X元素

　　　　　　　　　　X:nth-last-child(n)从最后一个开始算索引。

　　　　　　　　　　X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X

　　　　　　　　　　X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

　　　　　　　　　　X:empty匹配没有任何子元素（包括包含文本）的元素X

　　　　　目标伪类选择器：

　　　　　　　　　　E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

　　　　　UI元素状态伪类选择器：

　　　　　　　　　　E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

　　　　　　　　　　E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

　　　　　　　　　　E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

　　　　　　　　　　E:selection 匹配E元素中被用户选中或处于高亮状态的部分

　　　　　否定伪类选择器：

　　　　　　　　　　E:not(s) （IE6-8浏览器不支持:not()选择器）

　　　　　动态伪类选择器：

　　　　　　　　　　E:link
　　　　　　　　　　　　　　链接伪类选择器
　　　　　　　　　　　　　　选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

　　　　　　　　　　E:visited
　　　　　　　　　　　　　　链接伪类选择器
　　　　　　　　　　　　　　选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

　　　　　　　　　　E:active
　　　　　　　　　　　　　　用户行为选择器
　　　　　　　　　　　　　　选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

　　　　　　　　　　E:hover
　　　　　　　　　　　　　　用户行为选择器
　　　　　　　　　　　　　　选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

　　　　　层级选择器：

　　　　　　　　　　E>F 子元素选择器

　　　　　　　　　　E+F 相邻兄弟选择器

　　　　　　　　　　E～F 通用选择器/普通兄弟选择器

权重比较：

　　　　　　id、class、html标签选择器的数量

　　　　　　权重不同看权重等级

　　　　　　权重相同看位置

　　　　　【继承】
　　　　　　　　看谁近
　　　　　　　　一样近，比较权重
　　　　　　　　不一样，谁的权重大听谁的
　　　　　　　　权重一样，听后面的

布局：

　　　　　标准文档流：

　　　　　　　　　　定义：网页的解析顺序

　　　　　　　　　　特性：从左往右，从上往下

　　　　　　　　　　标签等级分类：行内元素，块级元素，行内块元素

　　　　　　　　　　脱离标准文档流方法:
　　　　　　　　　　　　　　　　　　　　浮动
　　　　　　　　　　　　　　　　　　　　绝对定位和固定定位

　　　　　　　　　　更改元素等级：　display

　　　　　　　　　　　　　　　　　　　　常用值：none，inline，block，inline-block

盒子模型：

　　　　　　主要元素：width，height ，padding ，border，margin
　　　　　
　　　　　　BFC：

　　　　　　　　　　定义：块级格式化上下文
　　　　　　　　　　触发方式：
　　　　　　　　　　　　　　display不为none
　　　　　　　　　　　　　　定位不为static
　　　　　　　　　　　　　　overflow不为visiable
　　　　　　　　　　　　　　浮动为none
　　　　　　　　　　　　　　html
　　　　　　　　　　　　　　。。。

　　　　　　　　　　解决问题：
　　　　　　　　　　　　　　margin塌陷
　　　　　　　　　　　　　　布局

　　　　　　Tip：调整子元素的位置，尽可能适合用padding,不用margin

浮动：

　　　　　　类型：float:left|right

　　　　　　特性：脱离文档流，但是不脱离文本流，产生字围效果，兄弟元素之间相互贴靠等

　　　　　　浮动带来的影响：高度塌陷，影响布局

　　　　　　清除浮动：
　　　　　　　　overflow:hidden
　　　　　　　　clear:both

　　　　　　完美解决方案：

.clearfix {

    *zoom:;

}

.clearfix:before, .clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

定位：

　　　　CSS position 属性

　　　　　　　　通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

　　　　　position 属性值的含义：

　　　　　　　　static: 　　　　　　　　元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
　　　　　　　　relative: 　　　　　　　　元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
　　　　　　　　absolute: 　　　　　　　　元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。; 　　　　　　　　元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
　　　　　　　　fixed: 　　　　　　　　元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

　　　　提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

　　　　　　CSS 定位属性允许你对元素进行定位。

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

　　　　【注】定位的参考点很重要，具体参考w3c学习

table:

　　　　tr , td , th

　　　　核心属性: colspan , rowspan

　　　　【tip】在早些年前采用table表格布局，现在已经淘汰

div+css的布局较table布局有什么优点？

　　　　改版的时候更方便只要改css文件。

　　　　页面加载速度更快、结构化清晰、页面显示简洁。

　　　　表现与结构相分离。

　　　　易于优化（seo）搜索引擎更友好，排名更容易靠前。

更多请看（HTML + CSS）下篇

HTML + CSS （上）的更多相关文章

CSS(上)
目录 CSS(上) 什么是CSS? CSS的优点 CSS的引入方式行内样式内部样式外部样式 CSS的两大特性 CSS选择器基本选择器组合选择器更多选择器选择器的优先级 CSS(上) 什么 ...
前端开发 - CSS - 上
CSS: 1.css的引入方式 2.基础选择器 3.高级选择器 4.选择器的优先级 5.伪类选择器 6.字体样式 7.文本样式 8.背景 9.盒模型border 10.margin 11.paddin ...
前端之CSS(上)
CSS CSS 简介 ## CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染 ...
html+css上传文件控件美化
html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
第一章 HTML+CSS(上)
HTML 网页的组成 HTML简介 HTML的语法 HTML的常用标签 HTML中的表格和表单 CSS的简单应用我们这里使用WebStorm开发工具配置浏览器常用插件: CodeGlance 代 ...
classname 就是在css上添加类，然后js的类名等于
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
CSS上划线、下划线、删除线等方法
text-decoration:underline; 下划线 text-decoration:overline; 顶划线 text-decoration:line-through; 删 ...
CSS（上）
css sprite是什么,有什么优缺点概念:将多个小图片拼接到⼀个图⽚中.通过 background-position 和元素尺寸调节需要显示的背景图案. 优点: 减少 HTTP 请求数,极⼤地提 ...
谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点二. 内容细节的特点三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

随机推荐

cmd 编码格式
相当于编辑器的声明为gbk格式编码,输出格式也是gbka = '中文' 就会以gbk编码为str,也只能以gbk解码. reload sys修改默认编码在不指定编码的时候充当默认解码或者编码格式
spring静态资源配置
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...
第八组Postmortem事后分析
第八组Postmortem事后分析一.团队成员总结的改进和教训隆晋威:Beta阶段完善架构设计,分工更加明确,文档更丰富,交流带来开销减少.Alpha技术选型不固定,分工混乱,没有方便的测试引擎, ...
四、IDS4建立Authorization server和Client
一.准备创建一个名为QuickstartIdentityServer的ASP.NET Core Web 空项目(asp.net core 2.2),端口5000创建一个名为Api的ASP.NET C ...
Vue-cli使用prerender-spa-plugin插件预渲染和配置cdn
参考:https://www.jianshu.com/p/6a4c0b281e7f 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr和预渲染两种解决方案,这里我们只 ...
element el-table 合计在横拉滚动条的下面，正确展示应该是滚动条在合计下面
<style lang="less"> .el-table{ overflow: auto; } .el-table .el-table__body-wrapper, ...
【串线篇】spring泛型依赖注入原理
spring泛型依赖注入原理不管三七二十一 servlet :加注解@servlet service:加注解@service dao:加注解@Repository 这相当于在容器中注册这些个类
zoj 2112 单点修改的主席树（树状数组套主席树）
题目大意: 区间第k大问题+单点修改基本思路: 这个题有用整体二分,cdq分治,还有主席树+平衡树的,还有就是主席树+树状数组. 我采用的是b站电子科大大佬的主席树写法,尤其喜欢他的离散化方法,所以 ...
localstorage sessionstorage和cookie的区别
基本概念 cookie:是网景公司的前雇员在1993年发明.它的主要用于保存登陆信息,比如登陆某个网站市场可以看到'记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的. sess ...
SSD接口详解，再也不会买错固态硬盘了
http://stor.51cto.com/art/201808/582349.htm 硬盘知识科普中,我们提到了SSD的发展史虽短,但是种类和协议比HDD不知道多到哪里去了.因此,本期小编就通过接口 ...

HTML + CSS （上）

HTML

概念：

核心：

主体结构：

主流浏览器内核：

常用的标签：

功能性标签

辅助性标签

HTML5新增的语义化结构标签：

语义化功能标签：

无语义标签：

多媒体标签：

标签等级分类：

文本级标签：

容器级标签：

条件注释：

CSS

定义：

核心：

用法：

选择器：

三大基础选择器：

高级选择器：（具体用法及规则请查询w3c）

css3选择器：

属性选择器：

结构伪类选择器：

目标伪类选择器：

UI元素状态伪类选择器：

否定伪类选择器：

动态伪类选择器：

层级选择器：

权重比较：

布局：

标准文档流：

盒子模型：

浮动：

定位：

CSS position 属性

table:

div+css的布局较table布局有什么优点？

HTML + CSS （上）的更多相关文章

随机推荐

热门专题

　　功能性标签

　　辅助性标签

　　HTML5新增的语义化结构标签：

　　语义化功能标签：　　

　　无语义标签：

　　多媒体标签：

　　　　文本级标签：

　　　　容器级标签：　

　　　　三大基础选择器：　　

　　　　高级选择器：（具体用法及规则请查询w3c）

　　　　属性选择器：　　　　

　　　　　结构伪类选择器：

　　　　　目标伪类选择器：

　　　　　UI元素状态伪类选择器：

　　　　　否定伪类选择器：

　　　　　动态伪类选择器：

　　　　　层级选择器：

　　　　　标准文档流：

　　　　CSS position 属性