本文详细介绍了HTML结构和CSS表现，包括HTML5的语义化标签、音频视频标签、表单新特性，以及CSS3的选择器、布局新特性、文本和边框样式。此外，还探讨了浮动、定位、盒子模型以及HTML5和CSS3的新增内容，如弹性盒布局、响应式设计和REM单位。
文章目录
HTML结构
作用：–有哪些内容组成
一、标签（标记、元素）
-
基本标签
- <!DOCTYPE html> //HTML5标准,文档声明标签 <html lang="en"> //语言为英文的; zh-CN中文,ja-jp日文;可以给搜索引擎译中 <meta charset="UTF-8"> //字符集,用UTF-8万国码密码本编码解码为0101 - 文本标签 <h1>一级标题</h1> ...自带加粗，独占一行，默认间距 - 段落标签 <p>段落文本内容</p> 段落之间有间距 - 换行 <br/> - 水平线 <hr/> - 文本加粗 <b>加粗内容</b>; <strong>强调内容</strong> - 倾斜 <i></i>; <em></em> - 删除线 <s></s>; <del></del>; - 扩展 下划线 <u></u> 下标 <sub></sub> 上标 <sup></sup> -
htmltagwrap插件- alt+w --> < p>< p>
-
Auto Rename Tag插件- < XX></ XX>前后对应自动修改
-
Live Sever插件- 实时修改页面
-
open in browser插件- 在浏览器中显示
-
<标记 属性= “属性值”></标记>
<标记 属性= “属性值” />
属性 属性值 备注 width “600” 宽度 align “left\right” 居中/左/右 color “green\blue” 颜色 -
-
< div></ div> 无具体意义，但能划分区域(< div>*3)
-
< span style=“color=XX”> 没有实际意义，当文本独立修饰的时候，内容有多宽就占用多宽的空间距离，不改变格式
-
注释：ctrl+/ 即<! ---->
-
回车：ctrl+enter
二、列表，表格，表单
1、列表
- 无序列表
（li里面可以随便放标签，但ul里面只能放li；默认生成黑色实心圆；还有空心圆、正方形、无）
<ul type="disc/circle/square/none">
<li>无序列表</li> <li>无序列表</li>
</ul>
–快捷键ul>li{aaa}*3 回车
- 有序列表
（li里面可以随便放标签，但ol里面只能放li；数字自动生成）
<ol type="1/a/A/i/I",start="4"> 开始标记从第四个开始
<li>有序列表</li> <li>有序列表</li>
</ol>
- 自定义列表
<dl>
<dt>图片1</dt>
<dd>文字1</dd>
</dl>
<dl>
<dt>图片2</dt>
<dd>文字2</dd>
</dl>
–快捷：dl>dt{111}+dd{444}
2、图片
先将所需图片放入总文件的图片文件夹下
<img src="imggg/XXX.gif> “img图片文件夹下的XX图片”
“./表当前路径下的XXX.gif” “…/表上一个文件夹的内容”
| 图片标签下的属性 | 属性值 |
|---|---|
| title | 鼠标悬停上去之后的提示信息 |
| alt | 图片不显示之后（加载失败）的提示信息 |
| width | 200px |
| height | 200px |
3、超链接–实现不同页面的跳转
< a href=“已有网站/自己的html路径”> 内容、img </ a>
| 属性 | 属性值 | 备注 |
|---|---|---|
| title | XXX | 鼠标悬停的提示信息 |
| target | _self 默认值”当前页面“ | 规定在何处打开文档 |
| _blank “新窗口打开” |
4、table表格
<table>
<tr>
<td>11</td><td>22</td>
</tr>
<tr>
<td>333</td><td>444</td>
</tr>
</table>
–快捷：table>(tr>td)*2---------可直接设置第一行每个单元格的宽度
| 属性 | 备注 |
|---|---|
| width、height | (总表格、单元格)宽度、高度(px或百分比) |
| border | (表)外边框线的宽度 |
| bordercolor | (表)边框的颜色 |
| bgcolor | 背景颜色 |
| cellspacing | (表)单元格与单元格之间的间距 |
| cellpadding | (表)单元格与内容之间的间隙 |
| align=“left\right\center” | (文字、表格)水平对齐 |
| valign=“top\middle\bottom” | (文字)垂直对齐 |
| Colspan=“2” | 合并的单元格的列数，必须给td 横着来占 |
| Rowspan=“4” | 合并的单元格的行数，必须给td 竖着来占 |
5、表单1 --收集用户信息给后端input
<form method="get\post" action="向何处发送表单数据">---js
用户信息：<input type="text" placeholder="请输入你的用户名" name="username">
<br>
密码：<input type="password" placeholder="请输入你的密码">
<br>
<input type="submit" value="登录"> 点击提交信息到action指定的地址--后端地址
==<button type="submit">登录</button>
</form>
----type=“text文本框”、“password密码框”、“submit提交框”、“button按钮框”、"reset重置框"
CSS表现
作用：决定页面是怎么样子的，横向纵向？怎么布局？–布局 配色 定位 做动画等
一、CSS语法
1.外部样式表
-
CSS样式–选择符h3和声明{}，声明–属性和属性值
-
声明内容放在{}中，属性和属性值用：连接，属性有多属性值时，不分先后空格隔开
-
每条声明用；结束
①<!-- 直接在html中嵌入CSS，最好放在head中 --> <style> h3{ color: blue;} h2{ color: brown; } </style> ②<!--另外新建一个css，直接将CSS样式放在css文件中--> h3{ color: blue;} h2{ color: brown; } <!-- 在html中使用CSS样式，head(最好使用link，兼容性更好些)--> <link rel="stylesheet" type="text/css" href="css/index.css> 或者<style> @import url(css/index.css); </style>
2.行内样式表
③类似与span，<h3 style=“color: blue;”;>
----样式属性的优先级：就近原则
②外部样式link <①外部样式直接 <③行内样式
改变最高优先级：XX:XXX !important;
3.选择器
（1）标签选择器
div、h1、p、strong、tr、ol{}
（2）类选择器
<style>
.aaa{
background-color: aqua; }
.bbb{
}
</style>
<h5 class="aaa bbb">xnfjdfsdk</h5>
（3）id选择器
<style>
#box1{
background-color: aqua; }
#box2{
}
</style>
<h5 id="box1">xnfjdfsdk</h5> 唯一id
（4）通配符选择器
作用：清除所有元素的默认边距值和填充值
*{
margin:0; 外边距
padding:0; 内边距
}
（5）群组和后代(包含)选择器
①群组选择器
div,.box1,h1{
---中间逗号
background-color:yelliw;
}
<div>dhjka</div>
<h5 class="box1">xnfjdfsdk</h5>
<h1>dsf</h1>
②后代选择器
div h1{
---中间空格
background-color:yelliw;
}
<div>
<h1>dhjka</h1>
</div>
（6）伪类选择器–也可用于盒子.box:hover{}
<style>
a：link{
属性：属性值;}超链接的初始状态
a：visited{
属性：属性值;}超链接被访问后的状态
a：hover{
属性：属性值;}鼠标悬停时状态（一般情况下都要另外定义）
a：active{
属性：属性值;}鼠标按下时超链接被激活时的状态
</style>
<a href="已有网站/自己的html路径> 内容、img </a>
注意：四者的顺序不能改，不然样式被覆盖失效
（7）选择器的权重
—多选择器且有属性冲突：(!important)
元素选择器 <Class选择器 <id选择器 <包含选择器(权重之和比较) <行内样式
二、CSS核心属性
1.css文本属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| font-size | 字体大小 | 分辨率：像素px(浏览器默认16px，设计图常用12px) |
| font-family | 字体 | 宋体，仿宋，楷体， 微软雅黑……（连续时用逗号隔开） |
| color | 颜色 | color:red; color:#ff0; color:rab(255,0,0); 0-255 |
| font-weight | 加粗 | font-weight:bolder(更粗的)/bold(加粗) /normal(常规) |
| font-weight:100-900; 400正常 600-900加粗 | ||
| font-style | 倾斜 | italic(斜体字) /oblique(倾斜的文字) /normal(常规显示) |
| text-align | 文本水平对齐 | left; right; center; （justify;水平2端对齐，但是只对多行起作用） |
| line-height | 文字行高 | 100px; (line-height)=(height)时可实现单行文本垂直居中 |
| text-indent | 首行缩进 | 可以取负值；该属性只对第一行起作用(XX:2em==&emsp$emsp) |
| letter-spacing | 字符间距 | 文字或字符之间的间距 |
| word-spacing | 单词间距 | 英文单词之间的间距 |
| text-decoration | 文本修饰 | none 没有、under下划线、overline上划线、over-through删除线 |
| font | 文字简写**** | font是style weight font-size/line-height family的简写 |
| font:italic 800 30px/80px “宋体”；顺序不能改变 |
2.css列表属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| list-style-type | 列表符合样式 | disc(实心圆)、circle(空心圆)、square(实心方块)、none(去符号) |
| XX-image | 将图片设置为列表符合样式 | list-style-image:url(img/1.jpg)； |
| XX-position | 列表项标记(type、image)的放置位置 | outside；默认值列表的外面 inside；列表的里面 |
| list-style | 简写 | XX：none;去除列表符号；顺序可变 |
简写/复合写：list-style: none inside url(img/VS.png);
3.css背景属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| background-color | 背景颜色 | XX：red；rgb(0,0,0); |
| XX-image | 背景图片 | XX-image:url(img/1.jpg)； |
| XX-size | 图片大小 | px px、XX% XX%、 cover(扩展到足够大，会被裁掉一些)、contain(最大尺寸，盒子有留白) |
| XX-repeat | 图片的平铺 | no-repeat/repeat/repeat-x/repeat-y; |
| XX-position | 图片的定位 | XX: 水平位置(right/center/left) 垂直位置(top/center/bottom)；可为负值 |
| XX-attachment | 图片的固定、滚动 | scroll(默认滚动)/ fixed(固定，固定在浏览器窗口的位置里，固定之后就相当于浏览器窗口了，与盒子无关–不在盒子范围时不显示); --视觉差demo |
| background | 简写 | 可以只取一个值，其他的默认值显示(会覆盖)；size只能单独使用；空格隔开；顺序可以换 |
4.css边框属性–盒子模型
5.css浮动属性–盒子水平排列
-
作用：定义网页中其他文本如何环绕该元素显示；让竖着的东西横着来(该样式浮动，后面的顶替原先位置，会依次排序)
float:left;元素靠左浮动
right;元素靠右浮动
none;不浮动
-
清浮动
若前多者浮动完将后者挡住，要将其挡住内容重新显现出来，位置下移–计算高度差线：
①写固定高度(即已知前面的高度来固定前多者整体的高度)
②清浮动 --只是改变元素的排列方式，该元素还是漂浮着的，不占据文档位置
clear: none; 允许前面有浮动对象 –即放在后者样式中
:right; 不允许右边有浮动对象
:left; 不允许左边……
:both; 不允许有浮动对象
③在两者中间(即后者前面加一个空盒子，不设宽高，clear:both;)
<div class="box1"></div> <div class="box2"></div> <div style="clear:both;"></div> <div class="box2"></div>④bfc，让浮动元素计算整体高度
.cc{ overflow:hidden;} <div class="cc"> <div>aa</div> <div>bb</div> </div>
三、盒子模型
1、内边距（内容与边框之间的距离）
–背景色会蔓延到内边距–不支持负值
padding
最低0.47元/天 解锁文章
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
