HTML和CSS一

ssq11
414 阅读8分钟

一、HTML

超越文本限制的标记语言 Hyper Text Markup Language

定义文档的内容结构 标记语言

（万维网联盟）W3C 制定 web 标准

html发展

1991年 html1.0

1998年引入CSS ，倡导样式、内容结构分离 引入标准DOCTYPE

2008年发布HTML5草案，2012年形成稳定版本

HTML5变化
标签：DOCTYPE meta

新增语义化标签和属性

html属性可以为元素添加额外的信息

去除掉纯展示性的标签

添加canvas、video、audio、本地存储、拖拽

DOCTYPE：影响浏览器的渲染模式（提示浏览器当前使用的html版本）

页面没有DOCTYPE，可能出现怪异模式：Quirks Mode

标准模式：Standard Mode

严格模式：Almost standard mode

meta：元数据 提示浏览器使用字符编码集进行解析

语法：

html元素又叫做文档头，包含所有的元数据

title为文档标题，在浏览器标题栏显示

标记不区分大小写，推荐使用小写

空标记可以不闭合，一般不闭合：

属性值可以不添加引号，推荐使用双引号

属性值中包含true和false的可以省略（控制属性是否生效）

HTML术语

1、注释：

2、元素：

①元素组成：

<h3>      元素内容     </h3>

起始标记 元素内容 结束标记

<img src="" alt="">

属性：给元素添加额外的信息，写在开始标记里，与标记名用空格隔开，属性名与属性值用等号隔开。

②空标记：没有元素内容和结束标记的元素。

③元素嵌套：一个元素放在另一个元素里，元素不能相互嵌套。

<div>
     <p>元素嵌套</p>
</div>

④元素关系：

  • 父子关系：A元素直接包含B元素，A是B的父元素，B是A的子元素。
  • 兄弟关系：两个元素拥有同一个父元素，他们就是兄弟元素。
  • 祖先和后代关系：若A直接或者间接包含B元素，A就是B的祖先元素，B就是A的后代元素。

二、CSS

层叠样式表 Cascading Style Sheets

一种表示语言

控制页面的样式和布局，有初级的交互效果

CSS发展

CSS1.0发布于1996年12月17日

CSS 3.0版本更注重于模块化，有初步的交互效果。

三、HTML与CSS的作用

为了让HTML与CSS关联，需要在HTML中引入CSS
引入方式：

1.外部样式表（外联）： 在 head 标签里面通过 link 标签引入 css 文件

<link rel="stylesheet" href="day001.css">

2.内部样式表（内联）：在 head 标签里面通过 style 标签书写 css 代码

<style>
        p{
            color: pink;
            font-size:30px ;
        }
</style>

3.行内样式表（内嵌）：在开始标签里添加 style 属性写css语句

<p style="color: red;font-size: 30px;">p标签</p>

4.导入样式表 通过css指令@import导入外部样式表

优先级：就近原则 ，内嵌 >内联>外联

选择器

1.元素选择器：元素名{声明块}

控制页面上所有使用该元素名的元素

p{
color:pink;
}

2.类选择器：.类名{声明块}

<div class=test>div标签</div>

.test{
      color:pink;
      background-color:blue
}

① 一个元素可以有多个类名

②取类名：不能是纯数字或者一数字开头

③驼峰命名法：footerTopRightBottomLeft

第二个单词开始首字母大写

④蛇形命名法 footer__right 单词之间添加下划线

⑤匈牙利命名法 footer—bottom 单词之间加横线

3.ID选择器：#id名{声明块}

<div id=box>id选择器</div>

#box{
   color:pink
}

一个元素只能有一个id名，一个页面不能重复出现同一个id名

4.子集选择器：父元素>子元素{声明块}

<div>
    <p>子集选择器</p>
</div>

div>p{
    color:red
}

选择某一个元素下对应的子元素，可以进行连续选择，但只能一级一级选择

5、通配符选择器：*{声明块}

*{
    padding:0px;
    margin:0px;
}

匹配页面上所有元素

6、后代选择器：div p{声明块}

section a{
    text-decoration:none;
    color:pink;
}

祖先元素与后代元素用空格分开

7、并集选择器：div,h1,p,.class,#id{声明块}

同时选择多个选择器的内容，元素、选择器之间用逗号隔开

div,section a,.class,#id{
    font-size:30px;
    color:pink;
}

8、伪类选择器：可以控制同一父元素下面单独的子元素

first-child和last-child比较常用，表示选中第一个和最后一个

div>p:first-child{声明块} 选中div下面的第一个p元素

section>p:first-child{
    color:pink;
}

div>p:last-child{声明块} 选中div下面的最后一个p元素

section>p:last-child{
    color:pink;
}
a标签配套的伪类选择器：

a:link{color:red} 设置访问前的颜色，当href属性值为空时不生效

a:visited{color:green} 设置访问后的颜色（点击之后）

a:hover{color:orange} 设置鼠标移动到上面时显示的颜色

a:active{color:blue} 设置鼠标访问、点击时的颜色

优先顺序：link>visited>hover>active

匹配父元素的第N个子元素：nth-child()

1、:nth-child( 3) 括号里面直接写数字 , 数字是几就匹配父元素的第几个子元素。

p:nth-child(5)

2、匹配父元素中指定类型元素的第二个儿子

p:nth-of-type(2){
    color:blue;
}

①、括号里面写odd或even

odd：匹配奇数子元素

even：匹配偶数子元素

②、括号里写公式 an+b

3n 3的倍数 2n 2的倍数

3n+1

n从1开始

语义化标签

结构元素

header：头部标签

nav：导航栏

aside：跟周围主题相关的附加信息

article：网页正文

section：独立的整体部分

footer：页面或某个区域的底部

div：用来划分区域，没有语义

文本元素

1.em：斜体

  1. i：一般用来放图标

    3.span：跨越多个字符

    4.h1~h6：标题标签，数字越大，字体越小

  2. p：段落标签

  3. q：小段文本引用

    7.b：突出显示的文本

    8.strong：重要的文本

（跟b标签表现一样，语义上有一定差别，strong强调文本的重要性，b强调在文本上突 出显示的文本）

9.blockquote：整段的引用

10.cite：对参考文献的引用

11.abbr：对缩写词的引用

元素分类

块级元素

一个元素独占一行，会自动换行，宽高可设

body html nav header section div article

aside h元素 p blockquote footer

行内元素

多个元素在一行显示，不会自动换行，宽高自动，不可设置宽高

head mate em i span a q strong b

行内元素不能包含块级元素

a标签target属性：页面打开的位置

<a href="" target="_self"></a>  （默认值）在当前页面打开

<a href="" target="_blank"></a> 在新页面打开

路径：

站内资源使用相对路径，站外资源使用绝对路径

相对路径：站内资源。./表示从当前路径开始。../返回上一级目录

绝对路径：站外资源。协议://域名/目录

实体字符：&开始；结束

显示结果描述实体字符英文全称
空格&nbsp；
＜小于符号&lt；less than
＞大于符号&gt；greater than
&并且符号&amp；
©版权符号&copy；
®注册符号&reg；register
上下标

版权上标© sup

版权上标© sub

css常见属性

属性示例描述
colorcolor：pink设置元素内容的颜色
text-aligntext-align：center设置元素内容的对齐方式
font-sizefont-size：30px设置元素内容的文字大小
font-weightfont-weight：bold设置元素内容的文字粗细
background-colorbackground-color：red设置元素的背景颜色

颜色单位

1、关键字：color：pink

2、16进制颜色：color：#999999

#后面跟3位数或6位数的数字组成，数字用0--9及小写a--f字符组成，这些值映射到红、蓝、绿色彩通道

3、RGB值 ：rgb（250,250,250） 三原色（red，green，blue）

每个值都是0--255的整数，0为纯黑，255为纯白

4、RGBA：rgba（255,255,255,0.5） 控制颜色饱和度，a：0.0完全透明，1.0完全不透明

5、HSL值：hsl（）

色度Hue值从0-360无单位数字，表示色环，值表示了一个颜色在色环上的角度

饱和度saturation、亮度lightness值从0-100%表示

6、设置行高：line-height:30px

长度单位

一个尺寸由长度+单位组成

1、绝对长度

px：一个像素的具体大小会根据设备的分辨率有所不同

其他尺寸单位，经过浏览器计算后都会变成px单位

计算机屏幕由很多的小点组成，每一个点就是一个像素（1px）

2、相对长度

%：在不同的CSS属性中有不同的含义

em：相对于当前元素的字体大小

rem：相对于根元素的大小

（em、rem都会适应屏幕）

经过这段时间的学习以及查阅相关资料，目前已经熟练掌握了HTML、CSS、header、div、section、color、font-size、red、pink等英语单词的拼写。

avatar
文章
阅读
粉丝