HTML + CSS + JavaScript总结

注:(因为这个文档主要是HTML,CSS,JS的主体格式,内容多的话会用链接展示)

一、HTML

1. 文档基本格式

<!DOCTYPE! html>

<head>

<title>这是第一个博客哦</title>

</head>

<body>

<p>听歌健身睡觉写文档看书吃饭 </p>

</body>

</html

2.文档各部分解析

因为各部分的功能比较多而且比较钟重要,链接如下(谢谢,谢谢~~)

https://blog.csdn.net/qq_40860137/article/details/83990730

3.标签类型

因为html文档都是由各种各样的标签组成的,在这里介绍标签,按照我对标签的理解,标签分为行级元素(内联元素)标签,块级元素标签还有行级块元素,下面分开介绍她们所包含的各种细标签。

老样子,下面链接:

https://blog.csdn.net/qq_40860137/article/details/83990788

4.HTML编码

基本格式是&;组合,重要的编码有<(读小于号)的编码为<(lt是less than的缩写,有意思吧) , >(大于号)编码为>(gt是greet than的缩写),

还有一个编码是 (展示在文档中是空格),如果你的代码是这样写的,

这两个标签中间有3个空格,当浏览器解析时,只会把三个空格当成一个空格,此时的空格是文字分隔符,如果你想让他两中间在浏览器解析时有三个空格,可以这样写

二、CSS

css全称为cascading style sheet,寓意是层叠样式表,下面介绍css是如何引入到html文档中的

1.css文件引入

1.1行间样式

example: <div style="width:100px;height:100px;border:1px solid black;">

style的作用是给这个div添加宽高和边界线(宽度为1,且为实线,颜色为黑色)

1.2页面级css

页面级css插入的位置第一种是位于title标签的之下且在</head>之前,第二种位置是位于<body>与</body>之间

1.3外部css文件(最常用,可以减少页面代码，加快访问速度)

格式:<link href="" rel="stylesheet">

外部css文件放在meta标签之下且在</head>之前

注意:我们主张HTML(结构) + CSS(样式) +javascript(行为)相分离,所以引入css文件时,用外部css文件引入

2.选择器

选择器对于css是特别重要的,选择器是用来选择html标签的,从而给html增加一些属性,好让html样式变得好看

选择器类型如下链接

https://blog.csdn.net/qq_40860137/article/details/84060715

3.CSS属性

3.1 font-size

设置字体大小,浏览器字体大小一般是12px,自己写的话也可以用14px和16px

3.2 font-weight

设置字体宽度,属性值是根据字体包来选的,一般的属性值有lighter(颜色较轻),light(颜色轻),normal(正常颜色),bold(粗一点),

bold(很粗)

3.3 font-style

设置字体样式,一般设置的是italic(斜体)

3.4 font-family

设置子体,网页上看到的比较舒服的一般都是arial,这个字体是乔布斯刚开始带领团队的时候做的一个字体

3.5 color

设置字体颜色,有三种方式

第一种:土鳖式

color: red / black / blue /green,这种方式是在调试代码时用

第二种:颜色代码

首先补充一下,人们能看到的3中视觉颜色分别是red,green,blue,话说皮皮虾(很皮的虾)能有30种视觉颜色(这句话课外扩展...)

人看到的这三种视觉颜色每个分别都是00到ff(这是一个范围,由浅至深),要表示一个颜色的话,需要将这三个颜色函数范围组合在一起,前面再加一个"#"字符

比如:正红(#ff0000),正绿(#00ff00),正蓝(#0000ff),

备注:如果颜色代码每两位重复可以简写成一个字符(必须保证每两位相同),

如上面的正红可以写成(#f00),正绿(#0f0)

第三种:颜色函数

基本格式:color:rgba(0-255,0-255,0-255,0.5),前三个0-255分别代表人的三种视觉颜色范围,最后一个参数是代表表示Alpha通道，表示透明度

example:

html代码:

<div class="div1">rgba透明度0.4</div>

<div class="div2">rgba透明度0.6</div>

css代码:

div{

margin:10px auto;

width:200px;

height:100px;

text-align: center;

line-height: 90px;

}

.div1{background: rgba(83,172,150,0.4);}

.div2{background: rgba(83,172,150,0.8);}

执行结果:

3.6 text-align

设置单行文本对齐方式,有三个属性值,left(左对齐),center(文本居中),right(右对齐)

3.7 line-height

设置单行文本所占高度,当line-height=height时,文本相对于父元素上下居中,

font-size = line-height时,上下文字之间没有间隙

3.8 text-indent

首行缩进,属性值为xxem(em/像素,是一个相对单位,1em = 1 *font-size(该标签的)

3.9 text-decoration

设置下划线,中划线,上划线(上划线一般不用),属性值为underline,line-through,overline 和 none

4.0 border

设置容器的外边框,border是一个复合属性,

基本格式: border : 1px solid black;

第一个属性值是外边框的宽度,这个代表是四周的宽度,

第二个属性值是外边框的样式,有solid(实线),dotted(点虚线/点线),dashed(虚线),

第三个属性值是外边框的颜色,这个颜色跟字体颜色有一样,有三种格式,土鳖式,颜色代码以及颜色函数