html 和 css 代码总结

最新推荐文章于 2024-06-25 22:00:00 发布

Hyman-ya

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量1.3k

点赞数 4

分类专栏： css基础文章标签： css

本文链接：https://blog.csdn.net/m0_55170432/article/details/115661649

版权

本文详细总结了HTML和CSS的基础知识，包括HTML常用标签、表格、列表和表单，以及CSS的选择器、复合选择器、Emmet语法、属性书写顺序等。深入探讨了CSS的背景、元素显示模式、浮动与清除、定位等内容，还有CSS3的新增特性如边框圆角、阴影、过渡、动画等，并涉及移动端开发中的Flex布局和响应式设计。

摘要由CSDN通过智能技术生成

----------------------- HTML ---------------------

！tab （快速生成框架）
在标签中，必须写

----------------------- HTML 常用标签 ---------------------

1. 排版标签

<html>                                          根标签，最大的标签
<head>                                          网页头部显示内容
<title></title>                                 文档标题
<hx></hx>                                       标题标签
<p></p>                                         段落换行标签
<hr />                                          水平线标签
<br />                                          换行标签
<div></div>                                     用来布局的，只能放一个
<span></span>                                   用来布局的，可以放好多个span
<b></b>和<strong></strong>                      文字加粗标签,推荐使用strong
<i></i>和<em></em>                              文字斜体标签，推荐使用em
<s></s>和<del></del>                            文字加删除线显示，推荐del
<u></u>和<ins></ins>                            文字加下划线显示，不赞成使用u

2. 图像标签

img scr= 该语法中src属性用于指定图像文件的路径和文件名

scr =""     		<img src="./" alt="">	    
				    <img src="../" alt="">
alt =""             图像不能显示时的替换文本
title=""            鼠标悬停图片上时显示的内容
width=""            设置图像的宽度
height=""           设置像素的高度
                    高和宽只需要设置一个就可以，会等比例缩放
border=""           设置图片边框 后面会使用css来做，这里只要记住这个单词就好了

3. a 链接标签

		<a href="跳转目标">文本或图像</a>
		<a href="demo.html"内部链接 </a>
		
		<a href="#"> 空连接</a> 点击链接 会回到顶部 有一个刷新的效果
		<a href="javascript:;"> 空连接</a> 这样不会跳转刷新	

		<a href="网址"> <img src="文件名" /> </a> 图像链接
		<a href="" target="_blank"> 文本或图像 </a> 
		//默认是_self，_blank是在新窗口打开

4. base 标签
2. base可以 设置整体链接的打开方式
3. base写到<head></head>之间`
4. 把所有的连接都默认添加target="_blank" （在新的链接打开）

		<base target="_blank">   // 在新的链接打开

5. pre 标签预格式化文本 （基本不用）

<pre>
     不需要段落和换行标签了， 可以对空格和空行， 进行控制
</pre>

6. 特殊字符（理解）

空格符：&nbsp
大于号：&gt
小于号: &lt

----------------------- HTML 表格 table ---------------------

1. 创建表格

table 用来定义一个表格标签
caption 表格标题
thead 用于定义表格的头部。用来放标题之类的东西
tbody 用于定义表格的主体。放数据本体
tfoot 放表格的脚注之类
tr 标签用来定义表格中的行，必须嵌套在table标签中
th 表头单元格标签
td 用来定义表格中的单元格，必须嵌套在标签中

	<table>
		<caption>我是表格标题</caption>
		<thead>表格的头部，标题之类</thead>:用于定义。用来放的东西。
		<tbody>表格的主体。放数据本体</tbody>:
		<tfoot>表格的底部</tfoot>
		<tr>  // tr 放在 thead tbody tfoot 里面
			<th>表头单元格标签</th>
			<td>单元格内的文字</td>
		</tr>
	</table>

2. title 表格属性
9. border：设置表格的边框，默认参数为0，这时不显示表格，可以改为1
10. height: 高
11. width: 宽
12. align: 水平对齐方式三种方式：left左,center中,right右
13. cellspacting: 单元格与单元格之间的距离，一般设置为0
14. cellpadding: 内容与单元格边框的距离

经常有个说法，三参为0，border cellpadding cellspacing为0

3. 合并单元格（难点）

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数“
合并单元格顺序（先上后下先左后右的顺序）
合并单元格三部曲
1.先判断是跨行还是跨列合并
2.根据先上后下先左后右的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量
3.删除多余的单元格

---------- HTML 列表标签不需要写table ----------

1. ul li 无序列表

2. ol li 有序列表

3. dl li 自定义列表

4. form 表单域

 <form action="url地址" method="提交方式" name="表单名称">
 	各种表单控件
 </form>
 
属性      值               用处      
action	 url地址值		用于指定接收并处理表单数据的服务器程序的url地址
method	 get/post		用于设置表单数据的提交方式，其取值为get或者post
name	 名称			用于指定表单的名称，以区分同一个页面中的多个表单

5. 表单域中的 input 控件（重点）

属性      	属性值		描述
		 	text	    单行文本输入框 	昵称，用户名
			password	密码输入框		密码，输入内容不可见
			radio		单选按钮			单选，性别 加入这个代码就可以了
			checkbox 	复选框			多选，爱好 
type		button		普通按钮			就是普通按钮，你给他什么提示，他就显示什么，请输入ID
			submit		提交按钮			不需要value来提示，默认就是提交，提交注册，确认注册
			reset		重置按钮			 重置所填，重置已经输出的内容
			image		图像形式的提交按钮 把文字替换成图片按钮，imsge是不带s的
			file		文件域			 上传文件按钮
			hidden      隐藏域    可以当变量来用 不是给用户用的 是给程序员用的   

accept(file的) "image/png,image/jpg"  可以指定 用户选择什么类型的文件
name		用户定义		控件的名称		 自己定义控件的名称，除了单选和复选其他不能重复
value		用户定义		input控件中的默认文本值	value后面填写默认提示内容
size		正整数		input控件中在页面显示的宽度
checked	    默认选择		表示那个单选或者复选按钮一开始就被选中了

补充几个属性:
placeholder 输入的内容不需要删除（submit 按钮没有该属性）
maxlength这个用于设置输入的最大个数,比如游戏ID名称和设置的最大密码个数
**** 可以当变量来用不是给用户用的是给程序员用的

6. label 标签（理解）

1.绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
<label> 
	用户名： <input type="radio" name="username" value="请输入用户名"
 </label>

2.第二种比较常用的 用法for属性规定label与哪个表单元素绑定
分两个步骤:看下面代码
<label for="nc">昵称：</label> 	
<input type="text或者其他都可以" id="nc" />
for=“x”,然后后面input也加上id=“x”

理解：当鼠标点击label标签里面的文字时，光标会定位到指定的表单里面点击文字，会直接和点到框框里时一样的效果

7. textarea控件（文本域）

<textarea > 文本内容 </textarea>
ols=“每行中的字符数”
rows"显示行数"实际开发不用

8. select下拉列表

option 里面的下拉选项
里面的属性 selected = "selected"时，当前选项即为默认选项

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option selected="selected">选项3</option>
</select>

----------------------- CSS 基础选择器---------------------

标签选择器 p、div
类选择器(class)以及多类名 .class
ID选择器 #id
通配符选择器 *

----------------------- CSS 复合选择器 --------------------

后代选择器 ul li { 样式声明 }
子选择器 div > p { 样式声明 }
并集选择器 ul,div { 样式声明 }
伪类选择器—链接伪类选择器

        1.未访问的链接 a:link 把没有点击过的{
   访问过}链接选出来*/
        a:link {
     }
        
        2.选择点击过的链接 a:visited */
        a:visited {
     }
        
        3.选择鼠标进过的链接变成蓝色 a:hover */
        a:hover {
     }

        4.选择鼠标正在按下还没松开的那个链接 a:active */
        a:active {
     }

        /5.注意事项：必须要顺序书写，LVHA的顺序，  先 link visited hover active */