第一天学习HTML

最新推荐文章于 2022-07-25 22:25:31 发布

梦迁

最新推荐文章于 2022-07-25 22:25:31 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/weixin_44123074/article/details/103444640

版权

1. html css javascript

html 是网页得结构，css是网页的样式，js是网页的行为。
菜鸟教程 runnood
html 超文本标记语言（hypertext makeup language）
w3c 万维网联盟（word wide web consortium）
css 层叠样式表或者级联样式表（cascading style sheets）
注释
元素通过<>识别，尖括号里的是元素名称，这样就创建了一个标记。

标记通常成对出现。

单标记

dom document object model

1 属性：书写在开始标记里，以=隔开。

alt+shift+f

xhtml 可扩展HTML

语义化结构标记

header ：表示页面或某个区域的头部
nav：表示导航栏
article：表示文章或其他可以独立存在的内容
aside:用于表示跟周围主题信息相关的附加信息
section：表示一个整体的一部分主题。
footer:表示页面每个部分的脚注。

文本元素

1 h1~h6表示一级标题到六级标题。
1. p paragraph 段落
2. stong b 加粗
3. em i表示斜体
4. blockquote整段的引用
5. q 小段文本的引用
6. span 跨越多个字符
7. cite 对参考文献的引用
8. abbr对缩写的引用
9. a 超链接新的标签页打开

绝对路径

示例：http://meyerweb.com/eric/tools/reset/reset.css

协议：http

域名： meyerweb.com

目录：eric/tools/reset/reset.css

使用场景：1. 访问站外资源

相对路径（总是从当前位置出发，寻找目标）

相对路径是相对于当前资源的位置，只能用于访问站内资源，相对路径的书写格式：./路径

./表示当前资源所在的目录，必须作为响度一路经的开始，可省略。

…/ 表示返回上一级目录

引入css种类

css外部样式表

<head>
  <link rel="stylesheet" href="main.css">  
</head>

内部样式表

<head>
    <style>
        div{
            border:1px solid red;
            width:100px;
            height:1000px;
        }
    </style>
</head>

行内样式表

<body>
 <div style="background:red;color:yellow">  </div>
</body>

css @import

<head>
    <style>
    @import url("global.css");
    </style>
</head>

css注释

ctrl+/

css规则

h1{
color:red;
text-align: center;
}

css元素选择器

<head>
    <style>
        p{
           font-size:18px;
        }
    </style>
</head>
<body>
    <p> learning css selector</p>  
</body>

css类选择器

书写格式 .类名{} 类选择器是最常使用的选择器，因为复用性

<head>
    <style>
        .awesome{
            color:yellow;
        }
    </style>
</head>
<body>
    <div class="awesome"> 惊叹的
    </div>
</body>

css id选择器

书写格式：#id{} 具有唯一性 注释：一般js使用id选择器

#a   wesome{
font-size:18px;
}
<body>
    <h1 id="awesome">
        learn css selector
    </h1>
</body>

*{} ：可以选择所有元素通配符

*{
margin:0;//外边距
padding:0;//内边距
}

后代选择器 ul li{ color:red;} 1~5字体都会变红

<ul>
    <Li>1</Li>
    <Li><2/Li>
    <Li>
        <ol>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </Li>
</ul>

子级选择器 ul> li{ color:red;} 1~2字体都会变红

<ul>
    <Li>1</Li>
    <Li><2/Li>
    <Li>
        <ol>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </Li>
</ul>

并集选择器 h1,h2,h3{}

<style>
    h1,h2,h3{
        font-wight:400;
    }
</style>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>

[href="#"] 属性选择器多用于表单元素

<style>
    a{
        font-wight:400;
    }
</style>
<a href="#"></a>

ul li:nth-child(4) 伪类选择器选中第四个

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul li:nth-last-child(4) 选中第一个

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul li:nth-child(odd)选中奇数 1.3被选中

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul li:nth-child(even)选中偶数 2.4被选中

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul li:nth-child(3n){} 3的倍数 n从零开始选中1,4

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

a:link{} 超连接没被访问 lv ha;
a:visted{} 超连接已经被访问
a:hover{} 鼠标悬停或移入
a:active{} 超连接被鼠标正点击

/*伪元素*/
/*双冒号为伪元素，单冒号伪类ie7,8,9等老式浏览器不支持双冒号*/
a::befor{
    content:"请点击";
}
a::after{
    content:"呀";
}
//before之前 after之后

/*首字母*/
h1::first-letter{
    font-size:500px;
}

相同的属性不同的值：申明冲突

层叠的过程 1. 比较优先级

优先级低的声明会被淘汰，高的则胜出

2. 比较特殊性

特殊性低的声明会被淘汰，高的则胜出。

3. 比较源次序

源次序靠前的声明会被淘汰，靠后的则胜出。

color:red !important; /*重要声明*/

	嵌入	id	class	元素
	a	b	c	d
style	1	0	0	0
id	0	1	0	0
class,属性，伪类	0	0	1	0
元素，伪元素	0	0	0	1
通配符		0
！important		最高

子元素会自动拥有父元素的某些css属性，文本类的属性会被继承。

显示结果	实体名称
空格	&nbsp
<	&lt
>	&gt
©	&copy

梦迁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天学习HTML

1. html css javascripthtml 是网页得结构，css是网页的样式，js是网页的行为。菜鸟教程 runnoodhtml 超文本标记语言（hypertext makeup language）w3c 万维网联盟（word wide web consortium）css 层叠样式表或者级联样式表（cascading style sheets）注...
复制链接

扫一扫