前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一、css需要的html（采用html5标准）
DTD,文档类型声明：
<!Doctype html>
文本编码声明：
<meta charset="utf-8">,或者<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame
当在手机上打开网页时，如果不希望屏幕缩小，以免文字变得太小，难以阅读，可以添加：
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1 user-scalable="no""><meta name="apple-mobile-web-app-capable" content="yes">
下面给出一个完整的html模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
</head>
<body> </body>
</html>
一些值得收藏的html标签：
1.不要使用<b><i>来使文字变成粗体或者斜体，如果标识语义上的强调，可以使用strong或者em.
2.对于包含多个相关项目的列表，请使用ul，比如导航链接，标题，或者诸如此类的一组提示语等。
3.如果要创建一个术语表及其定义或描述，使用<dl>,并结合<dt>(定义术语）和<dd>(定义术语）；
4.如果包含一段引用语，使用<blockquote>标签，对那些简短的引语则使用<q>标签；
5.利用一些生僻的标签如<cite>来引用书的标题，新闻报道或者网站，利用<adress>来标题和提供作者的联系信息或者版权声明。
6.要记得关闭标签，除了一些自关闭的标签，如<br>和<img>等
二、样式表的引入（采用html5标准）
为了保证良好的代码风格，采用外部样式表
<link rel="stylesheet" href="css文件路径"/>
之前的html标准，还需要加上：
<link rel="stylesheet" type="text/css" href="css文件路径"/>
此外，还有@的方式引入css文件，但是有时候会出现一些问题，因此，最好采用link标签。
如果想要避免告诉缓存的影响，使得浏览器始终加载最新的样式文件，可以在link标签的css文件后面添加查询字符串
<link rel="stylesheet" href="main.css?v=1">
每次修改样式表的时候都修改一下v=后面的那个数字，浏览器就会将它看成是新的文件，而从服务器重新下载，而不是使用缓存中的文件。
针对特殊的ie版本引入css文件，可以添加条件注释：
<!--[if IE]>
<![endif]--> 针对不同的ie版本：
<!--[if IE 7]>
<![endif]--> <!--[if lte IE 8]>
<![endif]-->
三、css选择器
和jquery的选择器类似，css3公布了一些新型的选择器，伪类和伪元素：
伪类：
和链接a有关的四个伪类：a:link,a:visited,a:hover,a:active
伪元素：（css3中伪元素使用：：，不过依旧支持Css2中的单冒号：）
::first-letter 首字母
::first-line 首行
：before,:after 这两个伪元素可以创造内容，新创建的内容作为原来元素的子元素；
::selection 针对网页上选中的项目（只有双冒号的用法）。
和子元素相关的伪选择器有：
> body>h2 选择body中的h2子标签，而非body h2那般选择所有后代h2子标签；
:first-child p:first-child选择作为第一个子元素的p标签（而非p的第一个子元素）
:last-child p:last-child选择作为最后一个子元素的p标签（而非p的最后一个子元素）
tr:nth-child(odd)每奇数行，tr:nth-child(even)每偶数行，tr:nth-child(3n+2) 3代表每三个元素，2代表从第二个元素开始
:first-of-type 与：first-child类似，但作用于具有特殊标签的第一个元素。.sidebar p:first-of-type 选择sidebar中第一个p标签（不论该p是不是第一个子标签）
:last-of-type 与上类似
:nth-of-type 与上类似
h2+p 选择与h2相邻的p元素
h2~p 选择与h2同胞标签的所有p元素
:not() 反向选择
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 |
四、css样式继承
一般来说，影响元素位置的属性，或者边距，背景颜色，元素边框border等不能被继承。
五、css样式层叠管理（决定何种样式胜出，就叫做层叠）
1，最近的，最具体的样式胜出
2，多种样式叠加，简单利用1不能判定的时候，可以利用权重计算：
1）一个ID选择器，权重为100
2）一个类选择器，权重为10
3）一个标签选择器，权重为1
由此可见，很多web设计师使用类选择器而非ID选择器的原因就在于，ID选择器的权重大，如果在父类元素中利用ID选择器设置了样式，那么子类元素往往需要更大权重才能覆盖，这样就会导致出现一些冗长、复杂的样式表。
具体操作中，可以利用chrome或其他浏览器附带的审查元素功能，来观察具体何种样式胜出，被“——”删除的就是被覆盖的样式
3，要想保证某种样式一定不被覆盖，可以使用!important,不过这种方式，尽量不要用
前端学习——css基础知识，选择器与html模板、值得收藏的html标签的更多相关文章
- python之 前端HTML/CSS基础知识学习笔记
1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...
- 前端学习---css基本知识
css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CSS学习---css基础知识0105
CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 举例:颜色,大小,高度.宽度.内外边距.边框.浮动.定位.字 ...
- 前端学习---html基础知识
HTML基本知识 学习html首先我们先看看HTML本质: web框架本质 我们在学socket,我们创建一个socketserver,然后运行起来,有一个client客户端要连接socket服务端, ...
- jsp学习---css基础知识学习,float,position,padding,div,margin
1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- CSS基础知识——选择器
选择器 元素选择器# 文档元素为最基本的选择器 例子:div{属性:值}; 选择器分组 例子:h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值 通配选择器 表示所有元素 类选择器 应用 ...
- 前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...
- 前端html5/css基础知识
https://www.cnblogs.com/clschao/articles/10073124.html
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
随机推荐
- nodejs：本地文件夹http服务器http-server
一.已经安装nodejs的电脑,有一个方便通过http访问本地文件夹.文件夹服务器 static files over HTTP,并不是我们平常说的node那个web服务器哦 二.好处 可以方便实现跨 ...
- storm在windows系统下安装调试
基础知识 Storm是一个分布式的,可靠的,容错的数据流处理系统.它会把工作任务委托给不同类型的组件,每个组件负责处理一项简单特定的任务.Storm集群的输入流由一个被称作spout的组件管理,spo ...
- GDC 2016 神秘海域4中使用Substance制作Texture
TEXTURING UNCHARTED 4: A MATTER OF SUBSTANCE 原文链接 http://www.dualshockers.com/2016/03/16/amazing-unc ...
- MySQL 性能优化的最佳20多条经验分享[转]
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情. 当我们去设计数据库表结构, ...
- git rm –cached filename
为了能重新忽略那些已经被track的文件,例如停止tracking一个文件但是又不从仓库中删除它.可以使用以下命令: 代码如下 git rm –cached filename 上面这个命令用于删除单个 ...
- java，for循环中的穷举、迭代、冒泡例题
1.100以内与7相关的数 //100以内与7相关的数: public static void main1(String[] args) { for(int i=1;i<=100;i++){ i ...
- Nginx 禁用IP IP段
最近公司网站被竞争对手用爬虫频繁访问,所以我们这边要禁止这些爬虫访问,我们通过nginx 指令就可以实现了 方法一:直接在LB机器上封IP 1.在 blocksip.conf 文件中加入要屏蔽的ip或 ...
- jquery 事件 多次绑定，多次触发，怎么清除历史绑定事件
Jquery在处理事件的时候有时候会遇到预想不到的结果 如下 <a id="link_foo">Foo</a> <script type=" ...
- FTS抓包看L2CAP Connection的建立（一）
一.概述 在前面的文章中介绍了inquiry和ACL connection的建立过程.这个连接建立后,L2CAP signaling channel(CID = 0x0001)就已经存在,可以 ...
- .NET对象与Windows句柄（二）：句柄分类和.NET句柄泄露的例子
上一篇文章介绍了句柄的基本概念,也描述了C#中创建文件句柄的过程.我们已经知道句柄代表Windows内部对象,文件对象就是其中一种,但显然系统中还有更多其它类型的对象.本文将简单介绍Windows对象 ...