html和css的常用标签及练习_css常用标签大全-优快云博客

1.html
html：显示数据
结构

<html>
	<head>
		<title></title>
	</head>
	<body>
		hello！
	</body>
</Html>

<h>设置标题 h1----h6

<img> 图片

<a> 超级链接

<table>
<tr>
<td><th>

列表
自定义 dl dt dd
有序 ol li
无序 ul li

表单
action 表示提交之后的后台处理程序的名称
method：get/post
method="post"只有此一种情况是post请求，其余的请求方式都是get
get和post请求区别：
get请求，数据时在url上传递的
不安全，数据大小 1kb 4kb
post请求，数据时通过体部传递
安全，数据量大的时候

<form action="" method="">
<input type="hidden" name="id" value="0001">

 编号：<input type="text" name="id" value="0001" disabled/><br>
    姓名：<input type="text" name="name" placeholder="请输入姓名："><br>
 密码：<input type="password" name="pw"/><br>
邮箱：<input type="email" name="email"><br>
 性别：<input type="radio" name="sex" value="0" checked>男 
     <input type="radio" name="sex" value="1">女
     <br>
 爱好：<input type="checkbox" name="like" value="下棋">下棋
     <input type="checkbox" name="like" value="弹琴">弹琴
     <input type="checkbox" name="like" value="书法" checked>书法
     <input type="checkbox" name="like" value="画画">画画
     <br>
  建议：<br><textarea rows="10" cols="20"></textarea><br>
 城市：<select name="city">
 	    <option value="default">请选择。。。</option>
 		<option value="1001" selected>北京</option>
 		<option value="1002">上海</option>
 		<option value="1001">北京</option>
 		<option value="1002">上海</option>
 	</select>
 	<br>
 	<input type="file" name="file"><br>
 <input type="submit" value="注册">
 <input type="reset" value="重置">
 <input type="button" value="按钮">
</form>

css ：层叠样式表
作用：美化页面(网站)

使用的三种方式：
内嵌式

	<p style="">
style

<style>
	p{
		color:red;
		
	}
</style>
	<p>dddd</p>

引入外部的文件*.css

p{
	color:red;
		
}
    <link rel = ""  href="">

选择器定义及使用
1.元素选择器

 选择器的名称是html的标签名{

	样式的集合；
            color:red;
            font-size:12px;
}
  使用：匹配html的元素

2.类选择器（重复使用）

.类名{
	
}
使用：<p class="类名">

3.id选择器（使用一次）

#id名{
	
}
使用：<p id="id名">

4.后代选择器（子孙选择器）

.div1 p{
	font-size:20px;
	color:#0000ff;
}

5.子选择器

.div1>p{
	font-size:20px;
	color:#0000ff;
}

6.分组选择器

.div1,p,#p1{
	font-size:20px;
	color:#0000ff;
}

7.匹配第一个兄弟元素

div + p

8.匹配后边的所有兄弟元素

div ~ p

盒子模型

内容+内边距+边框+外边距
div{
	width:200px; 设置宽度
	height:200px; 设置高度
	padding:10px; 内边距 

	padding:10px 10px 10px 10px; 上右下左
            padding:10px 10px 10px; 上 左右 下
            padding:10px 10px; 上下 左右
	padding:10px;上下左右

	border: 10px solid red;  边框
	margin: 50px; 外边距
}

块级元素和行内元素

块级元素的特点：
独立一行，可以设置宽高，内外边距的上下左右边距

<div> <p> <li>

行内元素的特点：
可以在一行显示多个元素,宽高对行内元素不起作用，
外边距的上下不起作用

<a>  <span> (<input> <img>)

文本样式

div{
		width:200px;
		height:200px;
   		font-family: "隶书";
   		font-size: 30px; 文字大小
   		color:#ffffff;   文字颜色
   		text-align:center;  水平对齐方式
   		line-height:200px;   垂直对齐方式
   		background-color: blue;  背景颜色
   		
   }
   a{
   		color:#000000;
   		text-decoration: none;    设置没有下划线
   }
   
   li{
   		list-style: none;    设置没有符号
   }

背景颜色（透明色）
background-color: rgba(255,0,0,0.5)

背景图片

    background-repeat: no-repeat;
	background-position:bottom right;
	background-image: url("images/study_computer_img1.png");

浮动
文档流：按顺序显示组件
脱离文档流：飘起来