第一章
<html>
<!--解释器-->
<!DOCTYPE html>
<head>
<!--字符集-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--刷新跳转-->
<meta http-equiv="Refresh" Content="3600;Url=http://baidu.com"/>
<!---->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!---->
<link rel="shortcut icon" href="mi.ico" type="image/x-icon"/>
<title>第一章</title>
</head>
<body>
<!--段落-->
<p></p>
<!--换行-->
<br/>
<!--分割线-->
<hr/>
<!--大于号小于号-->
< >
<!--a 标签-->
<a href="http://baidu.com" target="_blank">baidu</a>
<!--a 标签锚点功能-->
<h1 id='name'>第一章</h1>
<a href="#name">第一章</a>
<select>
<!--<select size=2>展示多少个元素-->
<optgroup label='中国'>
<option>上海</option>
<option>北京</option>
</optgroup>
<optgroup label='JP'>
<option>东京</option>
</optgroup>
</select>
<br/>
<hr/>
<!--input-->
<input type='checkbox' checked='checked'>checkbox</input><br/> <!--checked='checked' 默认-->
<input type='radio'name='相同的name'>radio1</input><br/> <!--name='相同的name' 实现多选项的互斥功能--->
<input type='radio'name='相同的name'>radio2</input><br/>
<input type='password' checked='checked' placeholder="123456">password</input><br/>
<input type='button' value='确认'>button</input><br>
<input type='file'>file</input>
<!--表单-->
<form action='https://www.sogou.com/web' method='GET'>
<input type='text' name='query' />
<br/>
<input type='submit' value='提交' />
</form>
<!--textarea-->
<textarea></textarea>
<!--label 名称与输入框相关联-->
<label for='我的名字'>账号:<input id='我的名字' type='text'></label>
<!--ul ol dl -->
<ul> <li></li></ul> <!--不排序-->
<ol><li></li></ol> <!--排序-->
<dl><li></li></dl> <!--自定义-->
<!--表格-->
<table border='1'>
<tr>
<td>第一列</td>
<td>第二列</td>
<tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<tr>
</table>
<!--fieldset-->
<fieldset>
<legend>登录</legend>
用户：<br/>
密码：
</fieldset>
<hr/>
<!--上下-->
<div style="background-color:red;height:45px;width:900px"></div>
<div style="width:900px;margin:0px auto"> <!--左右-->
<div style="background-color:green;height:500px;width:200px;float:left">qqq</div>
<div style="background-color:blue;height:500px;width:700px;float:left">qqqq</div>
</div>
</body>
</html>
标签
<div></div> 块级标签
<span></span> 内敛标签
居中 和取消div 的边距
stype="margin:0px auto;"
CSS
三种css的引用方式
-
在html标签中通过 style =""
<head>
<style>
.ss{
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="/css/old.css">
选择器类型
-
标签选择器
div{ background-color:red; width:100px; } 多个标签使用同一个样式 p，div{ } -
calss 选择器
.d1{ } <div class='d1'></div> -
id 选择器
#id01{ } <div id="id01"></div> -
关联选择器 div下的h1 标签
div h1{ } -
类型选择器
input[type='txt']{ width:100px; hight:100px; }
css属性
-
background-color
background-color:red; -
background-image
background-image:url("https://img.alicdn.com/bao/uploaded/i3/2107975731/O1CN01B42Ix71sCqSO6MS64_!!2107975731.jpg_600x600.jpg"); background-repeat:no-repeat; background-position:-130px -100px; opacity: unset; //透明度-
是否重复平铺
background-repead:no-repead; 不重复 background-repead:repead-x; x轴重复 background-repead:repead-y; y轴重复 -
移动图片显示位置
background-position:100px 100px; x坐标 y坐标 原点在右上角 -
-
border 边框样式
-
margin 外边距
margin-top:10px; margin-bottom:10px; -
padding 内边距
padding-top:10px; padding-bottom:10px; -
display
display:none; display:block; 内敛标签转换为块级标签 display:inline 块级别标签转换内敛标签 -
cursor 伪造一个指针状态
cursor: pointer; cursor: wait; cursour:help; -
position
https://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html
position:static; position:relative; position:absolute; position:fixed; //相对固定