HTML+CSS学习笔记
1.HTML
概念：最基础的网页开发语言。是一种超文本标记语言：超文本（用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本）；标记语言（由标签构成的语言。<标签名称> 如html，xml；标记语言不是编程语言，没有逻辑性）
1.1 快速入门
标签是成对出现的，分为围堵标签和自闭和标签；标签可以嵌套；开始标签内可以定义属性，属性由键值对构成，值需要引号引起来；html不区分大小写，但是一般用小写；head标签一般用来嵌套meta title style
生成标签：直接输入标签名，按tab键
生成多个相同标签：加上*；比如div*3
有父子级关系的标签，用>；比如 ul>li
有兄弟关系的标签，用+；比如div+p
生成带类或者id名字的，直接写.demo或者#two，再按tab
生成div类名有顺序，用自增符号$
生成的标签内部写内容可以用{}表示
按住shift+alt下拉可以选中这一列内容批量处理
1.2 语法
1.2.1 标签
文件标签：构成html最基础的标签
html：文档的根标签
head：头标签，用于指定html文档的一些属性；引入外部的资源
title：标题标签
body：体标签
<!DOCTYPE html>：定义文档类型是html
文本标签：和文本有关的标签
注释：<!-- 注释内容 -->
<h1>to<h6>：标题标签
内容
<p>：段落标签。
<br/>：换行
<strong>：加粗
<em>：倾斜
<del>：删除线
<hr/>：显示一条水平线：
属性：color颜色；
width长度；
size高度；
align对齐方式（midden left right）
<b>：字体加粗
<i>：字体倾斜
<font>：字体标签，可以使用size color face（字体类型）
<center>：文本居中
属性：color（推荐使用#FFFFFF这样的）；
width：数值：width=‘20’(单位默认是像素px)；百分比：相对于父类的百分比占比
图片标签：
<img src="image.jpg" align="middle" alt="日落" title="日落"/>
alt：当图片加载失败出现alt中的内容
title：在图像可见的时候对图像的描述
列表标签：
有序列表<ol><li></li></ol>
无序列表<ul><li></li></ul>
描述列表：一般是一个dt对应多个dd<dl><dt><dd></dd></dt></dl>
链接标签：定义一个超链接：
属性：href：访问资源的url(统一资源定义符)；当href="javascript:void(0);"不跳转
指向文件：把href指向文件路径
target：指定打开资源的方式；（_self：当前页面打开；_blank：在新页面打开）
<a href="https://www.baidu.com/" target="_self">click</a>
mailto：邮箱地址，自动打开邮箱软件并填写地址
1.2.2 HTTP结合CSS
div和span：每个div占一整行，分行显示，块级标签，相当于一个容器；span是将文本信息在一行展示，行内标签（内联标签）,没有语义，为了设置单独的样式
section：定义一个区段
aside：定义一个区段侧边栏区域
表格标签：
table定义表格
属性：border 边框粗细
width 表格占了界面的多少百分比
cellspacing="1" 表格边框之间的距离，0表示单元格边框合为一体
cellpadding="20" 表格内文字和表格边框距离
backgroundcolor="aliceblue" 背景颜色
align="center" 对齐方式
tr定义行
属性：bgcolor="aliceblue" 背景颜色
align="center"对齐方式（文本对齐方式）
td定义单元格
colspan：合并列
rowspan：合并行
th定义首行
<caption> 定义表格标题（定义了之后在头部分的改动对体部分不影响）
<thead>：表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格脚部分
可以把表格分块展示，如果不加这些东西，需要等待表格加载完才显示，可以支持独立于表格标题和页脚的表格正文进行滚动，当长的表格被打印的时候表格的表头和页脚可以被打印在每张页面上
使用行和列的标题：scope可以添加在<th>中，比如<th scope="col">内容</th>或者<th scope="row">内容</th>
表单标签：用来采集用户输入的数据，用于和服务器进行交互。
<form method="传送方式" action="服务器文件">
使用标签：from：可以定义一个范围，范围代表采集用户数据的范围
属性：action：指定提交数据的URL
method：指定提交方式
分类：7种，常用的2种：表单项中的数据要想被提交：必须指定name属性
get：
1.请求参数会在地址栏显示，会封装在请求行中；
2.请求参数大小有限制；
3.不太安全（地址栏会显示相关信息）
post：
1.请求参数不会在地址栏显示，会封装在请求体中（HTTP协议后讲解）；
2.请求参数大小没有限制；
3.相对安全（地址栏不会显示相关信息）
表单项标签
input：可以通过type改变元素展示的方式
type：
text：文本输入框，默认；也有value；提示语用placeholder：指定输入框的提示信息，当输入框内容发生变化，会自动清空
passport：密码输入，会隐藏输入；也有value
number：只能输入数字
url：网址
email：邮箱
radio：单选框，注意：要想实现单选，name值要一样；一般会给每一个单选框提供value的属性，给服务器判断；默认选中可以使用checked
checkbox：复选框，也需要指定value；默认选中可以使用checked，即默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息
按钮：
submit：提交按钮，提交表单
button：普通按钮
image：图片提交按钮
scr属性指定图片路径，也可以提交表单
label：指定输入项的文字描述信息
label的for属性一般会和input的id属性值对应，对应了，则点击label区域，会让input聚焦到输入框
select：下拉列表 ；子元素：option用来指定列表项；默认的话加入selected即可
例：
省份:<select name="province">
<option value ="">--请选择--</option>
<option value ="1">北京</option>
<option value ="2">西安</option>
<option value ="3">上海</option>
</select>
textarea：文本域
<textarea rows="行数" cols="列数">文本</textarea>
cols：指定列数，每一行多少个字符
rows：默认多少行，不够自动扩容
1.3 DHTML
动态HTML，指的是使用客户端脚本语言将静态的HTML内容变成动态的技术的总称。动态HTML技术是通过调用客户端脚本语言js，利用DOM可指定欲发生动态变化的HTML元素。
一些概念：
HTML：超文本标记语言
CSS：层叠样式表
DOM：文档对象模型
CGI：通用网关接口
XML：可扩展标记语言，可自定义扩展标签
JSON：是一种以JS的对象表示法为基础的轻量级数据标记语言。能够处理false null true 对象 数组 数字 字符串七种类型。其键值对都需要双引号。
2. CSS
层叠样式表，多个样式可以作用在同一个html元素上，同时生效
降低耦合度、分工协作更容易、提高开发效率
2.1 快速入门
2.1.1 引入CSS
CSS优先级：（就近原则）1>2>3（前提（实际开发也是这样）：嵌入式css样式位置在外部式后面）
1.内联模式
在标签内使用style属性指定css代码
如：<div style="color: red;">hello css</div>
不推荐
2.内部样式
在head便签内，定义style标签，style标签的标签体内容就是css代码
<style type="text/css">
div{color: blue;}
</style>
<div>
hello css
</div>
3.外部样式
1.定义css资源文件(创建一个css文件)
div {
color: gold;
}
2.在head标签内定义link标签引入外部资源
如：<link rel="stylesheet" type="text/css" href="a.css"/>一般位于文档头部
rel="stylesheet" type="text/css"是固定的写法 不可以修改
1，2，3中作用范围越来越大;1方式不常用，2，3比较常用
第三种格式可以改写为
2.1.2 CSS选择器
选择器｛
属性名1：属性值1；
属性名2：属性值2；
｝
选择器：筛选具有相似特征的元素
每一对属性需要用；隔开，最后一对可以不需要
选择器
基础选择器（优先级：内联选择器>id选择器>类选择器>标签选择器>通配符选择器）
id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一。在一个文档中只能用一次
语法:#id属性值｛｝
元素选择器:选择具有相同标签名称的元素
语法:标签名称｛｝
注意：id选择器优先级高于元素选择器，比如定义了div颜色又定义了id选择器，会优先按照id选择器设定的内容更改
类选择器:选择具有相同class属性值的元素
语法:.class属性值｛｝
注意:类选择器优先级高于元素选择器 id选择器优先级大于类选择器
扩展选择器
选择所有元素
语法：*{}
并集选择器
选择器1，选择器2｛｝
子选择器（筛选选择器1下的选择器2进行操作）
语法：选择器1 选择器2｛｝
父选择器（筛选选择器2的父元素选择器1，就是只作用于选择器2的父选择器1，即使选择器1有同名的）
语法：选择器1>选择器2
属性选择器：选择属性名称，属性名=属性值的元素(一般用于input标签 )
语法：元素名称[属性名=“属性值”]｛｝
伪类选择器：选择一些元素具有的状态
语法：元素：状态｛｝
如：<a>（链接）
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
2.1.3 CSS属性
1.字体 文本
font-size：字体大小
color：文本颜色
text-align：对齐方式 center，left，right
line-height：行高，用em代表一个字体的大小
font-family：字体
font-weight：字体粗细；bold：粗；400等同于normal；700等同于bold；数字后面不跟单位
font-style：字体样式；normal：默认正常；italic：设置本身字体就有倾斜的样式时，让字体变为斜体；oblique：强制把所有字体倾斜
text-decoration：设置添加到文本的修饰
underline overline line-through
text-indent：段前空格
当需要设置多项属性，可以使用缩写。但是至少要保证字体大小行间距和中英文字体样式（缩写严格按照以下语法顺序：
body{font：font-style font-weight font-size/line-height font-family}
长度单位的一个特殊情况：
给font-size设置单位为em的时候，计算标准以p的父元素的font-size为基础。
2.背景
background：复合属性
3.边框
border：设置边框，复合属性，即上下左右边框都可以设置
可以单独只为一个边设置边框：border-bottom；border-top；border-right；border-left；
border-style：dashed(虚线)，dotted（点线），solid（实线）
border-radius：圆角，数值有四个 依次为左上右上右下左下
4.尺寸
width：宽度
height：高度
5.中文字间隔和字母间隔
letter-spacing：字母与字母之间的间隔
word-spacing：单词间距间隔
6.布局模型
flow layer float
flow：流动模型：所有块状元素自上而下排列（每一个块状元素默认是占着一行）块状元素中的内联元素是从左到右排列
float：浮动模型：
7.层模型
定位=定位模式+边偏移
绝对定位：position:absolute
没有父元素或者父元素没有定位，就用浏览器作为父元素；会脱标
相对定位：position:relative
（不脱标，就是还保留着原来位置）相对于以前的自己的位置的移动，偏移前的位置保留不动。即div元素产生偏移但是以前的位置还保留着 所以后面的span元素显示在了div元素以前的位置
子绝父相：
子级是绝对定位的话，父级要用相对定位
子级绝对定位不会占有位置，可以放在父盒子任一个地方
父盒子需要加定位限制子盒子在父盒子内
父盒子布局时需要占有位置，因此只能相对定位
固定定位：position:fixed
（会脱标）即将这个块状元素始终固定在页面的某一个位置，不随着浏览器流动的影响，比如网页的小广告
固定在版心右侧位置：
让固定定位的盒子left：50% 走到浏览器可视区的一半位置
让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置
粘性定位：
选择器{ position: sticky; top: 10px；}）
特点：
以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置
必须添加top left right bottom的一个才有效
relative和absolute相结合，实现以relative为定位基准,
参照定位的元素必须是相对定位元素的前辈元素
<div id="box1"><div id="box2"></div></div>
同时参照定位元素必须加入position：relative；
此外定位元素加入position：absolute 就可以进行偏移定位
定位叠放次序z-index
使用z-index来控制盒子的前后次序（z轴）盒子越大越靠上，如果没有指定就按照后来者居上
语法：
选择器 {z-index： 1；}没有单位，只有定位的盒子才有z-index属性
绝对定位的盒子水平居中
先移动left：50% 父容器宽度的一半
再向左移动自身的一半像素
定位的特殊特性
绝对定位和固定定位同浮动类似
行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位 如果不给宽度或者高度，默认大小是内容的大小（相当于背景色）
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位元素都不会触发外边距合并的问题
绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位就会
如果一个盒子既有left属性也有right属性 默认执行left属性
8. 元素的显示与隐藏
1.display：用于设置一个元素如何显示
display:none；隐藏元素（不占有位置）用的多
display:block；转化为块元素，同时显示元素
2.visibility:visible看见
visibility:hidden(占有位置)
3.overflow:溢出
visible auto（自动判断要不要） hidden scroll（滚动条）
9. 弹性盒模型
flex模型实现将块元素在一行显示
1.在父元素上设置display：flex属性把块级元素在一排显示
2.子元素排列默认从左到右，与父元素左边没有间隙
对flex模型内的元素横轴排列方式设置justify-content
flex-start:起点对齐
flex-end:右对齐
center:居中对齐
space-around:项目两侧间隔相等
对flex模型内的元素竖轴排列方式设置align-items
flex-start：默认左对齐（左上）
flex-end：交叉轴的终点对齐（左下）
center：交叉轴的中点对齐（左中）
baseline：项目的第一行文字基线对齐：和文字大小有关系
stretch：默认值，占满容器整个容器高度
对flex模型的子元素设置占比
flex：设置子元素相对于父元素的占比，只能是正整数表示占比多少，设置后宽度属性会失效
10.水平居中设置
行内元素：被设置元素是文本/图片等行内元素时，水平居中是通过给父元素设置text-align:center实现的
定宽块状元素：即块状元素的宽度固定
通过设置左右margin值为auto实现
已知宽高实现盒子水平垂直居中
先使用父类和子类的相对绝对关系实现第一步，接着把子类设置为top：50%；left：50；此时满足子类左上角位于中心。接着使用margin把子类中心移到父类中心：margin：-高/2 0 0 -宽/2；
宽高不定实现盒子水平垂直居中
利用父元素设置相对定位子元素设置绝对定位
子元素设置上和左偏移50%
使用css3的属性translate位移给上和左都位移-50%
!important:设置最高权值，!important需要在分号前面。
p{color:red !important;}
11. 元素分类
1.块级元素
特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行
元素的高度 宽度 行高以及顶和底边距都可设置
元素宽度在不设置的时候是本身父容器的100%，除非设定一个宽度
2.内联元素
特点：和其他元素在同一行，但是内联元素之间会有一定的间隔
元素的高度 宽度及顶部和底部边距不可设置
元素的宽度就是它包含的文字或者图片的宽度，不可改变
3.内联块状元素
特点：和其他元素都在一行上
元素的高度 宽度 行高以及顶和底边距都可设置
CSS书写顺序
1.实际开发中不会直接用链接a而是用li包含链接（li+a）的做法
建议遵循以下顺序：
1.布局定位属性：display / position / float / clear / visibility / overflow
2.自身属性：width / height / margin / padding / border / background
3.文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
4.其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
扫一扫
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
