这篇博客详细介绍了HTML和CSS的基础知识，包括常用标签、文本和图像处理、表格、列表、表单、CSS选择器、布局、浮动、定位、CSS3新特性等。通过学习，读者可以掌握网页设计的基本技能，从创建简单的网页到实现复杂的样式效果。
常用标签
- 标题标签：
<h1></h1> - 段落标签：
<p></p> - 换行标签：
<br/> - 盒子标签：
<div></div> - 小盒子标签：
<span></span>
文本格式化标签
- 加粗：
<strong></strong><b></b> - 倾斜：
<em></em><i></i> - 删除线：
<del></del><s><s/> - 下划线：
<ins></ins><u></u>
图像标签
<img src="路径" alt="替换文本" title="提示文本" width="宽度" height="高度" border="边框粗细">
超链接标签
<a href="跳转目标url" target="弹出方式"></a>- target：
_self(当前窗口)_blank(新窗口) - 锚点链接：
href=#id
特殊字符
- 空格：
- 小于号：
< - 大于号：
>
表格标签
- 定义表格的标签：
<table></table> - 定义表格中的行：
<tr></tr> - 定义表格中的单元格：
<td></td> - 表头单元格标签：
<th></th>
表格标签属性：
- align(对齐方式)：
left(左对齐)center(居中)right(右对齐) - border(有无边框)：
1(有边框)""(无边框,默认) - cellpadding(单元边沿与内容之间的空白)：
默认1像素 - cellspacing(单元格之间的空白)：
默认2像素 - width(表格的宽度)：
像素或百分比
表格结构标签：
- 表格的表头：
<thead></thead> - 表格的主体：
<tbody></tbody>
合并单元格：
- 跨行合并：
rowspan="合并单元格的个数" - 跨列合并：
colspan="合并单元格的个数"
列表标签
- 无序列表：
<ul><li></li></ul> - 有序列表：
<ol><li></li></ol> - 自定义列表：
<dl><dt></dt><dd></dd></dl> - 去掉li前面的项目符号(小圆点)：
list-style: none;
表单标签
- 定义表单域：
<form></form> - action：[url地址] 接受处理表单数据的服务器url
- method：[提交方式] get、post
- name：[名称] 表单的名称
表单控件：
- input表单元素：
<input type="属性值" name="元素的名称" value="元素的值" checked="checked" maxlength="最大长度"/> - checked：
checked(首次加载被默认选中) - type属性：
button：可点击按钮checkbox：复选框(name相同)file：输入字段和“浏览”按钮，供文件上传hidden：隐藏的输入字段image：图像形式的提交按钮password：密码字段radio：单选按钮(name相同)reset：重置按钮submit：提交按钮text：单行的输入字段
- 元素定义标签：
<label for="绑定的表单元素的id"></label> - 下拉列表：
<select><option selected="selected"></option></select> - selected：
默认选中项 - 多行文本输入框：
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>
CSS基础选择器
- 标签选择器：
标签名 {
属性：属性值
}
- 类选择器：
.类名 {
属性：属性值
}
- id选择器：
#id名 {
属性：属性值
}
- 通配符选择器：
- {
属性：属性值
}
CSS文字属性
- 字体系列：
font-family - 字体大小：
font-size - 字体粗细：
font-weight- normal：默认值，不加粗的
- bold：定义粗体，加粗的
- 100~900：400=normal，700=bold
- 文字样式：
font-style- normal：默认值
- italic：斜体
- 字体复合属性：
font：font-style font-weight font-size/line-height font-family必须保留font-size和font-family
CSS文本属性
- 文本颜色：
color- 预定义的颜色值：red green blue
- 十六进制：#FF000 #FF6600 #FFFFFF
- RGB代码：rgb(255,0,0)
- 对齐文本：
text-align- left：左对齐(默认值)
- right：右对齐
- center：居中对齐
- 装饰文本：
text-decoration- none：默认，没有装饰线
- underline：下划线
- overline：上划线
- line-through：删除线
- 文本缩进：
text-indent- px：像素值
- em：当前元素1个文字的大小
- 行间距：
line-height- px：像素值
- px：像素值
CSS引入方式
- 外部样式表：
<link rel="stylesheet" href="css文件路径">
Emment语法
- 生成多个相同标签：
div*3 - 生成父子级关系的标签：
ul>li - 生成兄弟关系的标签：
div+p - 生成带有类名或者id的标签：
div.one div#two - 生成带有顺序的标签：
div.$*3 - 生成内部有内容的标签：
div{内容}
CSS复合选择器
- **后代选择器：**元素1是父级,元素2是后代
元素1 元素2 {
属性：属性值
}
- **子选择器：**元素1是父级,元素2必须是亲儿子
元素1>元素2 {
属性：属性值
}
- **并集选择器：**同时为元素1和元素2定义相同的样式
元素1,元素2 {
属性：属性值
}
- 伪类选择器：
- 链接伪类选择器：
- a:link (选择所有未被访问的链接)
- a:visited (选择所有已被访问的链接)
- a:hover (选择鼠标指针位于其上的链接)
- a:active (选择活动链接，鼠标按下未弹起的链接)
- a:hover{
- 链接伪类选择器：
属性：属性值
}
- :focus伪类选择器 (用于选取获得焦点的表单元素，一般用于input)：
- input:focus{
属性：属性值
}
CSS元素显示模式
** CSS元素类型：**
- 块元素：
<h1>~<h6><p><div><ul><ol><li>…- 独占一行，高度、宽度、外边距、内边距都可以控制，文字类元素里不能使用块级元素
- 行内元素：
<a><strong><b><em><i><del><s><ins><u><span>…- 一行可以有多个，高宽无法直接设置，行内元素只能容纳文本或其他行内元素
- 行内块元素：
<img/><input/><td>- 和相邻行内元素在同一行但是之间有空白缝隙，高度、宽度、外边距、内边距都可以控制
** 元素显示模式转换：**
- 转换为块元素：
display:block; - 转换内行内元素：
display:inline; - 转换为行内块元素：
display:inline-block; - 单行文字垂直居中的方法：让文字的行高等于盒子的高度
CSS背景
背景颜色：background-color
- transparent：透明，默认
背景图片：background-image
- none：无背景图，默认
- url：背景图像地址
背景平铺：background-repeat
- repeat：横纵平铺，默认
- no-repeat：不平铺
- repeat-x：横向平铺
- repeat-y：纵向平铺
背景图像固定：background-attachment
- scroll：背景图像随对象内容滚动
- fixed：背景图像固定
背景图片位置：background-position
- length：百分数|由浮点数字和单位标识符的长度值
- position：top | center | bottom | left | center | right 方位名词
背景复合写法：background:color image repeat attachment position
背景色半透明：background:rgb(0,0,0,0.3) 最后一个参数是透明度，取值范围在0~1
CSS三大特性
重叠性：样式冲突，就近原则
继承性：子标签会继承父标签的某些样式(text-、font-、line-、color)
优先级：
- 继承或*
0,0,0,0 - 元素选择器
0,0,0,1
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
