HTML学习总结
语法技巧
HTML结构
<!doctype html> 定义文档类型
<html></html>网页根元素
网页头部区(描述区)<head></head><body></body>网页主体内容区，显示在网页的内容都要写在body里
HTML语法
常规标记:<标记属性=“属性值”属性=“属性值1属性值2”></标记>空标记:<标记 属性=“属性值”属性=“属性值1 属性值
文本标签
文本标题:<h1></h1>
段落: <p></p >
加粗:<b></b>、<strong></strong>
倾斜: <i></i>、<em></em>
下划线: <u></u>、<ins></ins>删除线:<s></s><del></idel>上标:<sup></sup>
下标: <sub></sub>
按原文显示，保留空格和换行符: <pre></pre>转义字符: © 版权、 空格、< <、> >
超链接标签
使用场景
下载: 下载zip压缩文件
锚点:回到顶端<h1id="back">我是顶端</h1>网站链接。
背图片标签
<img src=""alt=">
列表标签
无序列表:
<ul>
<li></i>
中</ul>有序列表:<ol>
<li></i>
</o>
自定义列表:<dl>
<dt></dt>
<dd></dd>
</dl>
cellspacing 单元格之间间距，建议在css中设置cellpadding 单元格内边距，建议在css中设置·align=”水平对齐方式left 左对齐(默认值)
right 右对齐
center 居中对齐
·v-align=”垂直对齐方式
top 顶对齐bottom 底对齐
middle 居中对齐(默认值)
baseline 基线对齐
colspan="合并的单元格数”合并列，横向合并rowspan="合并的单元格数”合并行，纵向合并·rules="添加分割线
none 没有分割线 (默认值)cols 列之间的分割线
rows 行之间的分割线
all 行和列之间的分割线groups 组织间的分割线
Css学习总结
1.引入方式
CSS: 层叠样式表给HTML标签美化(设置样式)CSS引入方式:
内嵌试: (嵌入在HTML内)
css写在style标签中，style标签写在在head标签中，title标签下边。标签选择器{属性名:属性值;)确员美化对应对象
属性: color
font-size字号(数值后要加px像素)background-color背景颜色
width:600px; height:400px;
外联式 :
CSS写在一个单独的.css文件中 (需要在head标签中通过link标签在网页中引入Xx.css
行内式:(在标签的同一行进行)CSS写在标签的style属性中
类选择器
结构: .类名{CSs属性名: 属性值)
作用: 通过类名，找到页面中所有带有
这个类名的标签，设置样式。
A1.所有标签上都有class属性，class属性的属性值称为类名 (类似于名字)2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头3.一个标签可以有学个类名，用空格隔开 (一个标签内容需要更改多个属性)4.类名可以重复，一个类选择器可以同时选中各个标签:
id选择器:
#id属性值{Css属性名:属性值;)1.同上
id属性值类似于身份证号码，在一
个页面中是唯一的，不可重复
一个标签上只能有一个id属性值4.一个id选择器只能选中一个标签<divid="属性值”>同类选择器类名
通配符选择器
*css属性名:属性值)
作用: 找到页面所有的标签设置样式
清除标签默认的margin和padding属性可以用*0
2.CSS用户字体和文本样式:
font-size: 字号 (默认16)
font-weight:加粗(正常400;加粗700font-style:是否倾斜 italic
font-family:字体 (微软雅黑 (黑体、宋体、楷体等)
字体: 无衬线字体: sans-serif
文字笔画粗细均习;
网页中大多采用无衬线字体;
常见该系列字体: 黑体、Arial
Afont复合属性
font: style weight size family;各属性间用空格隔开)
eg: font:italic 700 66px 楷体,
省略:可以省略前两个style、weight.
字号和字体不可省略 !
文本缩进:
text-indent:数字+px;或数字+em;(lem=当前标签的font-size大小)
文本水平对齐:内容居中
text-align: center居中对齐
包括:文本、图片img、span标签、a标签、input标签等;
!(让文本水平居序，text-align属性给文本所在标签设置，即文本的父元素)margin: Oauto;标签div、p、h(大盒子)水平居中
内容垂直居中: 设置行高属性值= 目身高度属性值
文本修饰:
text-decoration: underline下划线
text-decoration: none去除下划线 (超链接用)
text-decoration: e-through删除线
text-decoration: line-through删除线行高:
line-height: 数字+px; 或数字;
表font-size的倍数*网页精准布局时line-height:l;可取消上下间距，
与font连写:
font: style weight size/line-height family;
女div用来网页布局，一个页面可能用无数次，所以使用iv尽量使用类名挖制样式!
今复合选择器
后代选择器: 空格
选择父元素后代中满足条件的元素语法: 选择器1 选择器2[) 空格后代包括: 儿子、孙子、重孙子...子代选择器: >
语法: 选择器1>选择器2 {css子代只包括儿子
并集洗择哭
3.并集选择器
作用: 同时选择多组标签，设置相同的样式;
语法: 选择器1，选择器2 {css]
注意!并集选择器中每组可以是基础选择器或复合选择器; 每组选择器一行一
个，提高代码可读性
女交集选择器: 紧挨着
作用: 选中页面中同时满足多个选择器的标签
语法: 选择器1选择器2 {css结果: (既又原则) 找到页面中既能被选择器1选中又能被选择器2选中的标签，设置样式。
hover伪类选择器
作用: 选中鼠标悬停在元素上的状态
语法: 选择器: hover {css)
!伪类选择器选中的元素的某种状态
emmet语法
作用: 简写语法，快速生成代码
1661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
