HTML+CSS+JS知识点整理（1）

HTML+CSS+JS知识点整理（1）

 

01、基本概念：

<!DOCTYPE html>

<!-- h5文档头：告诉浏览器用哪一种方式编译代码。 -->

<!-- 标签父子之间要空格 -->

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- meta字符集。 -->

<title>基本概念</title>

<!-- 网站标题 -->

</head>

<!-- head放置配置文件 -->

<!-- body书写自己的代码 -->

<body>

 

</body>

</html>

 

02、html：标签的作用只是负责页面结构。让浏览器知道各个部分的作用。和样式一点关系都没有。只是因为语义

 img+tab。在页面中引入图片。src标签属性图片文件。alt标签属性图片不能正常显示的时候提示文字。title标签属性鼠标移入提示文字 。放置在标签后面的都叫标签属性

相对路径：相对自身去寻找

向下寻找：images

p段落标签。在页面中引入一段话一段文字

a超链接:实现页面跳转。href:标签属性。所要跳转的页面文件。target="_blank"在新页面中打开，默认在当前页面打开。

有序列表

ol:ordered list 有序列表

li:list item 列表项

无序列表：

ul:unordered list 无序列表

li:list item列表项

li的父级只能是ul或者是ol  

ul或者ol的儿子只能是li

制作网页的技术：WEB前端开发

Web前端开发：不是一项技术，由几项技术组成。html+css+js

html:超文本标记语言HyperText Markup Language。

css:层叠性样式表

js(javascript):用户交互。

网站：由一个一个网页。

网页：图片 文字  超链接。

 

03、锚点：

浏览器有空白折叠现象。不管输入多少空格，只能识别一个。

 &nbps;空格  <br>换行

锚点：小标记。用户不知道，自己做的一个小标记

第一步：找到锚点<a href="" name="名字">锚点</a>

第二步：找到所要点击的文字<a href="#名字">点击的文字</a>

 

04、 border: 10px dashed red;

/* 边框: 值与值之间用空格隔开;

第一个值：线的粗细

第二个值：线的类型  solid实线  dashed虚线  dotted点线

第三个值：线的颜色

padding: 10px; 内边距

margin: 20px; 外边距  

盒子模型：盒子(标签)的占位范围。width  height  border margin padding

width和height(简称为content)

05、css样式：书写样式,在style标签对里面 格式：<style>选择标签{书写样式}</style>    color: #ff2334;文字颜色,值可以是英文表示，还可以是16进制

font-size: 20px;文字大小：默认16px。不能小于12px font-weight: bold;

文字加粗 text-decoration: underline;增加下划线 font-family: "楷体" 文字字体font-weight: normal/ bold文字不加粗 text-decoration: none;

去除下划线

加鼠标移入的样式(可以增加任何样式)

a:hover{

color: red;

text-decoration: underline;

font-size: 30px;

}鼠标点击字去下划线变大

border可以单独书写为四个方向。border-top border-bottom  border-left border-right，margin和padding同理

块级元素绝对居中的方式：左右外边距auto

给标签取名字 class="名字"

网页布局中的标准流：行内元素水平排列，块级元素垂直排列

块级元素：独占一行。p h1-h6 div ul ol li 块级元素的宽度是父级的100%。

行内元素：水平排列。a。给宽高无效(由内容决定)。左右外边距有效，上下外边距无效。内边距有效，会占有别的标签的位置

background: url('img/img01.png') no-repeat center bottom pink;

 

第一个值：代表图片路径

第二个值：平铺方式。默认平铺  no-repeat不平铺  repeat-x  repeat-y

第三个值：水平坐标。可以是具体的数值，也可以left  center  right

第四个值：垂直坐标。可以是具体的数组，也可以top center  bottom

第五个值：颜色

 

背景图片和img引入图片的区别

背景图片：不占位。一般用来做装饰性图片。不能被搜索引擎抓取。

img：占位。引入重要的图片，能被抓取。

 div:大区域、大面积块状排版。