HTML和CSS归档基础知识
前端好久没看找了资料归档了下，HTML和CSS基本东西，深入请下载***w3cschool.CHM***
1，HTML基本标签
<!DOCTYPE html><!-- 文档类型 -->
<!-- 注释 --> <!-- -->
<html><!-- 超文本标记语言hyper text mark language -->
<head>
<!-- 字符集标签，不写容易浏览器解析后出现乱码 -->
<meta charset="UTF-8">
<title>文本标签</title>
align="left" <!-- 键值对形式，键="值"(值一定要用引号裹起来) -->
</head>
<body>
<!-- 文本标签 -->
<br/><!-- 换行 -->
<h1>标题标签</h1><!-- 标题标签 h1-->
<p>段落标签</p><!-- 段落标签 p -->
<hr color="red" width="200" size="10" align="left"/> <!--一条水平线-->
<b>加粗</b><!-- 加粗-->
<i>斜体</i><!-- 斜体 -->
<font>字体</font> <!-- 字体标签-->
<center>居中</center><!-- 居中标签-->
<img src="image/图片.jpg"/><!-- 图片标签 -->
<ol > <!--有序列表-->
<li>列表1</li>
<li>列表2</li>
</ol>
<ul > <!--无序列表-->
<li>列表1</li>
<li>列表2</li>
</ul>
<a href="http://www.baidu.cn">点我</a> <!--超链接-->
<div>块级标签</div><!-- 块级标签,每一个div占整行 -->
<span>行内标签</span><!-- 行内标签,在一行 -->
<table ><!-- 表格 --><!-- 两行六个单元格 -->
<tr><!-- 行 -->
<th>姓名</th><!-- 单元格 -->
<th>年龄</th>
<th>爱好</th>
</tr>
<tr><!-- 行 -->
<td>张三</td><!-- 单元格 -->
<td>18</td>
<td>篮球</td>
</tr>
</table >
</body>
<footer>脚</footer>
<html>
2，form表单格式案例
2,<!-- form表单
form：用户输入数据，它采集用户数据
* action：指定提交的URL
* method:指定提交方式（常见有get和post）
* 表单项中的数据要想被提交：必须指定其name属性,不然提交时无键值对参数
-->
<form action="#" method="get/post">
用户：<input type="text" name="用户"><br> <!-- input标签内的属性（键值对形式） -->
密码：<input name="密码"><br>
<input type="submit" value="提交" >
<input type="radio" name="gender" value="female" checked>男<!-- 单选按钮 -->
<input type="checkbox" name="hobby" value="shopping"> 爱好<!-- 多选按钮 -->
<input type="file" name="file"><!-- 文件选择 -->
<input type="hidden" name="id" value="aaa"> <!-- 隐藏域 -->
<input type="color" name="color"><!-- 取色器 -->
<input type="date" name="birthday"><!-- 生日 -->
<input type="datetime-local" name="birthday"><!-- 生日 -->
<input type="email" name="email"><!-- 邮件 -->
<input type="number" name="age"><!-- 年龄 -->
<select name="province"><!-- 复选 -->
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option>
</select>
<textarea cols="20" rows="5" name="des"></textarea><!-- 文本域 -->
<input type="submit" value="登录" ><!-- 提交 -->
<input type="button" value="按钮" ><!-- 按钮 -->
<input type="image" src="img/regbtn.jpg"><!-- 图片 -->
</form>
3，内联样式
3,<!--
内联样式
* 在标签内使用style属性指定css代码
-->
<div style="color:red;">hello css</div>
<div style="color:red;"></div>
4，内部样式
4,<!--
内部样式
* 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
<head>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
5，外部样式
5, <!--
外部样式
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
-->
<head>
<link rel="stylesheet" href="css/a.css"><!-- 在head标签内，定义link标签，引入外部的资源文件 -->
<style>
@import "css/a.css"; <!-- 定义css资源文件。 -->
</style>
</head>
<body>
<div>hello css</div>
<p>不要愤怒</p>
</body>
<!-- div{
color:green;
}
p{
color: red;
font-size: 30px
} -->
6，选择器
6，<!-- 基础选择器
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
* 语法： 标签名称{}
* 注意：id选择器优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
-->
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
.cls1{
color: blue;
}
div{
color:green;
}
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">世界很美好</div>
<div class="cls1">世界很美好</div>
<p class="cls1">世界很美好</p>
</body>
7，扩展选择器
7，<!-- 扩展选择器 -->
<head>
<style>
div p{
color:red;
}
div > p {
border: 1px solid;
}
input[type='text']{
border: 5px solid;
}
a:link{
color: pink;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<div>
<p>界美好与你环环相扣</p>
</div>
<p>界美好与你环环相扣</p>
<div>aaa</div>
<input type="text" >
<input type="password" >
<br> <br> <br>
<a href="#">界美好与你环环相扣</a>
</body>
8，Css属性
8，<!-- Css属性 -->
<head>
<style>
p{
color: #FF0000;
font-size: 30px;
text-align: center;
line-height: 200px;
/*
border 边框
*/
border: 1px solid red;
}
div{
border: 1px solid red;
/*
尺寸
*/
height: 200px;
width: 200px;
/*
背景
*/
background: url("img/logo.jpg") no-repeat center;
}
</style>
</head>
<body>
<p>界美好与你环环相扣</p>
<div>世界美好与你环环相扣</div>
</body>
9，盒子模型 css属性
9，<!-- 盒子模型 ，css属性-->
<head>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*外边距*/
/* margin: 50px; */
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
/*
设置盒子的属性，让width和height就是最终盒子的大小
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
</body>