本文详细介绍了HTML基本结构元素、CSS样式应用、快捷键使用以及定位、弹性布局和背景设置等关键概念，帮助读者掌握网页开发的基础知识。
快捷键
ctrl+s 保存
alt+b 启动浏览器运行程序
ctrl+a 全选
ctrl+c 复制
！+Tab 创建基本的网页架构
ctrl+/ 生成注释
HTML基本结构元素
doctype：文档类型 doc->document
html标签：网页最外层的父标签，双标签，成对出现，<html></html>
head标签：头部标签
meta标签：charset字符集
title标签：设置页面的标题
body标签：文档主体内容
页面语义结构元素
header：页面头部内容
nav：导航栏信息
section：部分内容信息
main：主要内容
footer：底部信息
aside：侧边导航栏
文本内容标签
标题标签：h1-h6 特点：字体逐级变小，加粗 （英语：headline）
段落标签：p（英语：paragragh）
换行标签：br（英语：break row）
水平线标签：hr（英语：horizontal）
注意：br和hr是单标签
图片元素
标签：img
属性：src：图片引用地址
alt：图片丢置时显示的内容，通常用于优化搜索引擎
title：鼠标滑动到图片上的提示信息
width：设置图片的宽度
height：设置图片的高度
超链接元素
标签：anchor锚点
属性：href：导航链接跳转的地址
target: _self（跳转到当前的窗口，它会覆盖页面的内容），_blank（跳转到一个新的窗口）
列表元素
无序列表
标签：ul>li (unordered list,list item)
有序列表
标签：ol>li (ordered list,list item)
自定义列表
标签：dl>dt=dd (definition list,definition title,definition data)
元素分类
块元素：独占一行，宽度默认为100%，可以设置宽高，
标签：h1-h6,p,header,section,nav,main,footer,div,ul,il,ol,dl,dt,dd
行元素：不独占一行，宽度由内容决定，不可以设置宽高，
标签：a，span
行内块元素：不独占一行，可以设置宽高，
标签：img,input
三者之间的转换：display:inline,block,inline-block,none
CSS引入
css引入方式
行内样式：
每个标签上通过style属性设置样式
比如：<h1 style = "background-color: aqua;width: 100px;height: 100px;">新闻标题</h1>
内部样式：
在head标签里面添加style标签设置相关的css属性
比如：
<style>
p{
background-color: red;
width: 100px;
height: 100px;
}
<style>
外部样式：
在head标签里面通过link标签引入外部的css文件
比如：<link rel="stylesheet" href="../css/style.css">
注意：三种css引入方式的优先级：遵循 就近原则
css的基本选择器
标签选择器：使用标签为css的选择器
id选择器：每个标签上定义一个id属性，通过id属性的值作为选择器，注意格式：#id属性的值
类选择器：每一个标签上面定义一个class属性，通过class属性的值作为选择器，注意格式：.class属性的值
特别注意：通常id只有一个且唯一一个标识值，一个html的文件里面id的值都是不相同的
通常class的类可以有多个值
字体样式设置
字体大小：font-size
字体颜色：color
字体粗细：font-weigh:bold | bolder | 100-900
字体家族：font-family:'Times New Roman',Times,serif;
字体风格：font-style:italic
文本样式设置
文本装饰：text-decoration:underline | overline | line-through | none
文本对齐：text-align:left | center | right (水平方向)
文本缩进：text-indent:32px
盒子大小设置
盒子的宽度：width
盒子的高度：height
元素浮动
格式：float:left | right
特点：1，块元素独占一行的特性消失
2，释放它所在位置的文档流
3，垂直于浮动前文档流所在的位置向左或向右
父盒子凹陷问题(子盒子浮动之后，父盒子高度为0)
解决方式：1,设置父盒子的高度，占领文档流的位置
2，给父盒子设置 overflow:hidden
清除浮动
格式：clear:left | right | both
盒子模型
外边距：margin
内边距：padding
边框：边框
盒子尺寸计算方式
box-sizing：content-box | border-box
值：content-box（默认）
真实的盒子宽度=内容的高度（conten的高度）
border-box（默认）
真实的盒子宽度=padding+border+内容的高度（conten的高度）
对齐方式汇总
盒子的文本水平方向对齐:text-align:center
子盒子在父盒子里面水平方向对齐:margin:0 auto(前提:子盒子的宽度<父盒子的宽度)
盒子里面的文本在垂直方向居中对齐显示:height=line-height(盒子的高度=盒子里面的行高)
图片的文本水平显示给图片设置属性:verticla-align:middle
背景设置
background-color:背景颜色
background-image:url(图片的相对路径)
background.repeat:曹景图片王复(repeat-x,repeat-y,no-repeat)
background size: xpx Ypx |contain|cover
background·position: Xpx Ypx (X-水平平移，正值向右一定，负值向左移动，Y-上下平移，正值向下一定，负值向上移动)
弹性布局
格式：display:flex（默认主轴是水平轴）
注意：给父盒子设置此属性，子盒子内容进行弹性排列，以主轴为主要排列方式
设置主轴方向：flex-direction: row | column
设置弹性主轴的排列方式：justfy-content : flex-start | flex-end | center | space-between | space-aroud | space-evenly
设置弹性侧轴排列方式：align-items : flex-start | flex-end | center | stretch（注意：拉伸的时候不能设置高度）
设置弹性布局换行：flex-wrap | nowrap
注意：所有的属性设置都是在父盒子上面
设置鼠标悬浮效果
选择器：hover{
//效果设置
}
图片透明度
opacity : 0-1
定位元素
相对定位 position：relative；参考系：盒子定位偏移之前的原来的文档流的位置
绝对定位 position：absolute；参考系：离他最近的祖先定位元素，如果祖先都没有设置定位，是以body可视范围为参考
固定定位 position：fixed；参考系：浏览器窗口
定位偏移：top，left，right，bottom
注意应用场景：父相子绝
扫一扫
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
