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 ...

随机推荐

c# 使用网站的身份验证及 Cookie 的获取与使用
C# 的 Http 访问可以使用 .net 自带的 HttpWebRequest, WebClient, HttpClient 类.也可以使用开源库 RestSharp . RestSharp 的优 ...
前序遍历+中序遍历 --> 后序遍历（二叉树）
ArrayListMultimap
遇到这样一个场景,就是要判断传过来的Lists里有几组相邻的元素,然后有多少个单一的元素,比如3,3,3,4,4,4,5,5,5,6,6,6,8,9,10,11 方法有很多,但是我选了ArrayLis ...
paint进阶（转）
转自:https://blog.csdn.net/cquwentao/article/details/51374994 概述 paint的基本绘制方法已经在前面的基本图形绘制中讲解了,这里做的是进阶讲 ...
SQL join的示意图
SQL join 用于把来自两个或多个表的行结合起来. 下图展示了 LEFT JOIN.RIGHT JOIN.INNER JOIN.OUTER JOIN 相关的 7 种用法. 注意JOIN要和ON相连 ...
windows读密码的几种姿势
1.mimikatz mimikatz.exe "sekurlsa::debug" "sekurlsa::logonPasswords full" >&g ...
ubuntu安装samba
1, sudo apt-get install samba sudo apt-get install smbclient 2, vi /etc/samba/smb.conf 在最后加字段(为可读可 ...
VIM的一些使用积累
替换: :s/cst/dst/gc 黏贴后格式不对齐: gg=G 全选并黏贴 gg :"+yG
《NULL-2019团队》第一次作业：OUC二手交易平台
前言项目名称:OUC二手交易平台项目简介:针对在校大学生的二手交易平台,相对于现在市面已有的二手APP,将其使用的普遍性范围缩小,针对在校大学生,这样可以有效的保证交易的真实性和公平性. NA ...
delphi文件类型
1.DPR: Delphi Project文件,包含了Pascal代码.应用系统的工程文件2.PAS: Pascal文件,Pascal单元的源代码,可以是与窗体有关的单元或是独立的单元.3.DFM:D ...

HTML + CSS （上）

HTML

概念：

核心：

主体结构：

主流浏览器内核：

常用的标签：

功能性标签

辅助性标签

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

语义化功能标签：

无语义标签：

多媒体标签：

标签等级分类：

文本级标签：

容器级标签：

条件注释：

CSS

定义：

核心：

用法：

选择器：

三大基础选择器：

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

css3选择器：

属性选择器：

结构伪类选择器：

目标伪类选择器：

UI元素状态伪类选择器：

否定伪类选择器：

动态伪类选择器：

层级选择器：

权重比较：

布局：

标准文档流：

盒子模型：

浮动：

定位：

CSS position 属性

table:

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

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

随机推荐

热门专题

　　功能性标签

　　辅助性标签

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

　　语义化功能标签：　　

　　无语义标签：

　　多媒体标签：

　　　　文本级标签：

　　　　容器级标签：　

　　　　三大基础选择器：　　

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

　　　　属性选择器：　　　　

　　　　　结构伪类选择器：

　　　　　目标伪类选择器：

　　　　　UI元素状态伪类选择器：

　　　　　否定伪类选择器：

　　　　　动态伪类选择器：

　　　　　层级选择器：

　　　　　标准文档流：

　　　　CSS position 属性