html和css的常用标签及练习

1.html
html:显示数据
结构

<html>
	<head>
		<title>title>
	head>
	<body>
		hello!
	body>
Html>

设置标题 h1----h6

图片

超级链接

<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 :层叠样式表
作用:美化页面(网站)

使用的三种方式:
内嵌式

	

""> style


	

dddd

引入外部的文件*.css

p{
     
	color:red;
		
}
    ""  href="">

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

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

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

2.类选择器(重复使用)

.类名{
	
}
使用:

3.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{
         
    		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");
    

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

    你可能感兴趣的:(css,html,html5)