一、网页构成

HTML+CSS+JS

二、HTML（超文本语言）

基础框架

注意：本文中<标签名/>为自结束标签，<标签名>（无 “ / ”则省略了</标签名>）

进入VS Code，选择HTML语言输入 “ ！”，再按 “Tab” 后，会有以下代码出现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

1.<!DOCTYPE html> 是文档声明，声明当前网页版本，是html5的写法

2.<html lang="en"> 是默认语言为英文，但可以输出中文，只是会让你的浏览器提示你要不要翻译此页，改成zh就没有翻译选项（即变成了中文页面）

3.<head></head> 是头部的标签，帮助浏览器或搜索引擎来解析网页

4.用meta标签设置网页的元数据

charset用来设置网页的字符集，避免乱码问题

name 指定的数据的名称

content 指定的数据内容

<meta http-equiv="X-UA-Compatible" content="IE=edge">是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

5.<title></title> 网页标题，搜索引擎根据title中内容判断网页主要内容

6.<body></body>是html的子元素，用来书写网页的主体

常用基础标签

（一）框架标签

（二）标题和段落，文本格式化标签

标题标签	<h1><h2><h3><h4><h5><h6>
段落标签	<p>
换行	<br/>(自结束标签）
分割线	<hr/>
加粗	<strong> / <b>
倾斜	<em> / <i>
删除线	<del> / <s>
下划线	<ins> / <u>

（三）分区，跨度，标签

<div>	大盒子，独占一行
<span>	小盒子，可以多个占用一行
注释 Ctrl+/	<!-- -->
链接标签	<a herf="(网址)" target=“_blank"> </a>

（四）HTML中的实体（转义字符）

&nbsp	空格
&gt	大于符号
&lt	小于符号
&copy	版权符号

（五）列表和表单标签

1.无序标签<ul>（里面用<li>）

2.有序标签<ol>（里面用<li>）

3.表格<table (可以写属性）>

(属性：align（文本位置：居中center），border （边框），cellpadding （文字与边框），cellspating（边框与边框），width/height宽高）

<tr>(里面用<th>)

<tr>(里面用<th>)......

4.表单标签

（1）input标签：包含在<form>中，<input type = "属性值”/>

（2）select标签：<select>（里面用<option>)

(六）图像标签

图像属性
src	图片路径
alt	替换文本
title	提示文本
width/height	设置图像宽高
border	设置图像边框粗细

盒子分类（设置居中见盒模型）

块元素（div,h1-h6,p.table,ul,section,content...)

可自动换行，可设置宽高

margin（外边框），padding（内边框）上下左右有效

行内元素(a,span,input,select,button)

不自动换行，设置宽高无效

默认排列方式从左到右

margin仅左右有效，padding都有效

消除默认边距html,body{margin和padding均设为0}

转化（在CSS内）

display：inline（块转行内）

display：block（行内转块）

display：inline-block（转换为行内标签）

页面结构

<header> 标题头部区域内容（用于页面或页面中一块区域）

<fooder> 标题脚步区域内容

<section> web网页中一块独立区域

<article> 独立文章内容

<aside> 侧边栏（相关内容和应用）

<nav> 导航类辅助内容

三、CSS

（一）选择器

（二）常见属性

1.字体属性

2.文本属性

3.背景属性

4.盒模型

（2）外边距margin的应用

margin 清除周围的（外边框）元素区域，没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，可以一次改变所有的属性

（设置方式1：margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;）

（设置方式2：margin:25px 50px 75px 100px;上右下左

margin:25px 50px 75px;上左右下

margin:25px 50px;上下左右

margin:25px;全部）

设置居中：

块元素居中：盒子必须设置了宽度，两外边距设置为auto

行内元素或行内块元素的居中，给其父元素添加text-align:center即可

嵌套块元素垂直外边距合并造成的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

为父元素定义上边框（透明的） border:1px solid transparent;

为父元素定义上（细细的）内边距 padding：1px;

为父元素添加overflow:hidden;（常用）

（2）清除浮动（清除浮动元素造成的影响）

如果父盒子本身有高度，则不需要清楚浮动
清楚浮动后，父级就会根据浮动的子盒自动检测高度，父级有了高度，就不会影响下面的标准流了
方法：(一般使用clear：both；）
- 额外标签法（隔墙法）：（只有块元素可以，不常用）找到最后浮动的盒子，写一个标签(<div class="clear">)，在style内加上
```
.clear{clear:both;
}
```
- 给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll。常用overflow:hidden;（缺点：无法显示溢出部分）
- 给父级元素添加after伪元素
```
clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;
}
.clearfix{/*IE6、7专有*/*zoom:1;
}
```
- 给父元素添加双伪元素(使用同上）
```
.clearfix:before,
.clearfix:after{content:"";display:table;
}
.clearfix:after{clear:both;
}
.clearfix{*zoom:1;
}
```

5.其他属性(网页布局）

(1)流动布局

(2)浮动布局：（要求一浮全浮，否则当前浮动元素会影响后面的标准流）

float：left/right

(3)定位：

相对定位：（以自己原来的位置为顶点，地面上的位置谁都不许占）

position：relative

left 500px（距离原来位置左边500像素）

top 10px（距离原来位置底部10像素）

绝对定位：从里到外找第一个有定位的的外层元素作为起点，没有就用浏览器原点

position:absolute;

left 500px（距离起点左边500像素）

top 10px（距离起点底部10像素）

固定定位：相对于浏览器可视窗口进行定位，起飞后在xoy面移动，固定定位会固定在浏览器的某个位置，不会随滚动条滚动（特殊的绝对定位）

position：fixed

（三）引入CSS

方法一：标签引入

（类选择器：用class属性值）

（标签选择器）

<head>
<!-- 假装有代码--><style><!--类选择器.hhh{width:400px;height:400px;background-color:   rgb(104,219,27);}-->
<!--标签选择器.div{......}
--></style>
</head><body><div class="hhh"> hhhhhh </div>
</body>

方法二：行内引入

<div class="hhh" style = 'background-color: aqua;"> hhhhh </div>

方法三：文件外引入

在HTML（同一个）目录下新建一个文件index.css

index.css

仍然使用选择器 . 换成 #

index.html

<link rel = "stylesheet" herf = "./index.css " />
<body>
<div id = "hhh"> hhhhh </div>
</body>

HTML+CSS入门学习相关推荐

CSS入门学习笔记+案例(1)
CSS入门学习一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
CSS入门学习笔记（案例+详解）
CSS入门学习笔记一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法三.CSS选择器 1.元素 ...
CSS入门学习（转）
一.基础学习 1.何为CSS CSS是Cascading Style Sheets(层叠样式表)的简称,是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). CSS文件也可以 ...
【干货】Html与CSS入门学习笔记12-14【完】
十二.HTML5标记现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...
css入门学习day02笔记
各种选择器的详解一.标签选择器如下代码: <!DOCTYPE html> <html lang="en"> <head><meta c ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...
【前端学习】CSS入门
前端学习:CSS入门文章目录前端学习:CSS入门前言 1.class01 1.我的第一个CSS 2.导入方式 3.基本选择器 (1)ID选择器 (2)标签选择器 (3)类选择器 4.层次选择器 ...
html css img标签鼠标事件,HTML+CSS入门 img标签学习
本篇教程介绍了HTML+CSS入门 img标签学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.img标签中的img其实是英文image的缩写,所以img标签的作用 ...

HTML+CSS入门学习