首页 > 其他分享> 文章详细

html5札记

2020-03-05 20:52:03 阅读：176 来源： 互联网

标签：伪类 worldjasklfjkalsjflkjaf 元素选择器 html5 标签 hello 札记

软件架构分两类:b/s,c/s.

html的版本迭代.代码的编写要注释版本型号.

html的代码要规范.

html元素的高度和宽度如果只改变一个,则另一个是等比例改变.

图片使用原则:效果一致,使用小的. 效果不一致,使用好的.

图片类型:gif,png,jpg, 特点分别是:动态, 全面且非动态, 较全面且非动态.

html的解析时,浏览器会在一般情况下进行补充!　　所以并非所有情况都会补充,所以规范!!!

html注释不可嵌套.

html元素可嵌套,不可交叉嵌套.

内联框架iframe的使用是不被推荐的,在实际开发中,内联框架中的内容不会被关注.

center标签的内容默认是居中的.可将要居中的元素都放在其内部.

其实纯表现得元素和属性都是不被推荐的.

每个标签都有一个共同的属性,对某一个标签来说是唯一的.且此属性是所有标签集中唯一的.

即为:id属性.

<a href="#">联系我们</a> 的作用是自动打开计算机的电子邮件的客户端的.

css的内联样式一般在开发中是用于测试的.不用于成品. 目的是为了使得结构和表现分离....

div标签是没有语义的,但是有主要用途.即布局.

span标签也是没有语义的,但是用途是给文字加样式.

a标签可以包含任何元素.

p标签不能报好块元素.

文件路径尽量不用中文,可能会出现问题.

复合选择器的写法就是多个选型合在一起写,挨着的.

父元素---某一元素的父亲元素.(一个)

子元素-----某一元素的子元素.(多个)

后代元素------某一元素的孩子元素以及它的孙子元素...

祖先元素-------某元素的所有祖先(包括父亲,爷爷,太爷爷等等.).

后代选择器: 选择某一元素的所有后代.如: p span{}

子元素选择器: 选择某一元素的孩子元素,而非所有后代.如:p > span{}

伪类专门表示元素的状态的. 　　当我们需要把处于特殊状态的元素给设置样式,则可以通过伪类.

常用伪类有:link　　visited　　hover　　active　　focus　　selection　　

伪元素　　:跟伪类的用法类似,不过(伪类类似于类一样,成组操作) 当然伪元素也是成组操作,不过它更像一个元素的选择.

常见的伪元素有:first-letter　　first-line　　before　　after　　其中before,after分别表示标签内容和标签的连接处的位置.通常与content 连起来用.

如:

p:before{
    color:red;
    content:"helloworld";
}

<p>hello worldjasklfjkalsjflkjaf</p>

如上图.

title属性干嘛的呢? 当鼠标移入到标签中时,就会自动显示title内容出来.

属性选择器:　　选取带有指定属性的元素.

选择有多种写法:

如:

        <style type="text/css">
            p[title]{
                color:red;
            }
            p[title="xx"]{
                background-color:green;
            }
        </style>
    </head>
    <body>
        
        <p title="xx">hello worldjasklfjkalsjflkjaf</p>
        <p title="yy">hello worldjasklfjkalsjflkjaf</p>
        <p title="zz">hello worldjasklfjkalsjflkjaf</p>

属性选择器的用法.

其实还有其他匹配的选择.如

/*
*首配     尾配      通配
*/
p[title^="x"]{
    color:red;
}
p[title$="x"]{
    color: red;
}
p[title*="x"]{
    color: green;
}

兄弟选择器:　　选择某一元素的兄弟元素.

具体分以下几类:

相邻兄弟选择器:

        <style type="text/css">
            h1 + p{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h1>hello world</h1>
        <p title="xx">hello worldjasklfjkalsjflkjaf</p>
        <p title="yy">hello worldjasklfjkalsjflkjaf</p>
        <p title="zz">hello worldjasklfjkalsjflkjaf</p>

否定伪类:　　当我们在所选的元素中想去除某些特殊的元素,可以使用否定伪类!

not括号里面是选择器.

干嘛的呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>html</title>
        <link href="main.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
            p:not(#a){
                background-color:red;
            }
        </style>
    </head>
    <body>
        <h1>hello world</h1>
        <p id="a">hello worldjasklfjkalsjflkjaf</p>
        <p title="yy">hello worldjasklfjkalsjflkjaf</p>
        <p title="zz">hello worldjasklfjkalsjflkjaf</p>
    </body>
</html>

元素样式是可以继承的.

有啥用处呢?

在需要设置祖先和后代的样式且样式一样时,只需要设置祖先的样式即可,这样可以简化编码.

但是,继承不是完全的.也就是说元素的样式不是都有继承性的....

选择器之间是有优先级别的.

什么意思呢?

就是说多种选择器选中同一个元素的同一样式时:

优先级别分别是:

　　内联样式1000　　>　　id选择器100 > 类和伪类选择器 10 > 元素选择器1 > 通配选择器0 > 继承样式(无)

当多个选择器共同使用时,优先级相加作为之后的优先级.

但是,要注意: 并集选择器的优先级计算是各个单独计算的.

如果两个选择器优先级一样,则选择后者选择器确定的样式.

特殊点:　　　在选择器后面加入 !important 之后,它的优先级就变成最高的了. 比内联还高. 但是要尽量不在开发中使用.

从优先级来看,我们的伪类的编写也是要谨慎的.因为伪类即"状态" 状态之间有时候是有先后关系,因果关系,前后关系的. 编写原则是:　　前因后果.

标签：伪类,worldjasklfjkalsjflkjaf,元素,选择器,html5,标签,hello,札记
来源： https://www.cnblogs.com/zww-kjj/p/12410090.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html5札记