HTML入门经典

舒畅 · 发表于 2017-6-22 08:19:00

HTML
　　一、HTML基础(树干)
　　1、基础概念：
　　1.1、html全称：hyper text markup language
　　中文：超文本标记语言
　　1.2、注释： 快捷键：Ctrl+?
　　1.3、整体页面设置：  <!DOCTYPE html> : 定义文档类型
　　2、HTML中头部(head)的应用
　　2.1、网页名标签
　　<title>显示上方标题</title>:表示标题

<title>显示上方标题</title>

　　2.2、<meta charest=“UIF-8"> :字符编码集，万国码，防止乱码出现
　　2.3 引用标签：
　　Link：引用外部资源

　 <link rel="stylesheet" href="css/com.css">


　　2.4 样式标签
　　Style：引用页面中的样式

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>F32班</title>
<style>
.text1{  background-color: black;
}
</style>
</head>
<body>

<div  class="text1">引用样式</div>
</body>
</html>
　　3、HTML中主体(body)的应用
　　3.1标签分为2类(对写CSS样式有用)：
　　块级元素：
1. <p>:表示段落
2. <div>:表示区域
3. <h>:表示标题
4. <ul>:表示无序列表
5. <ol>:表示有序列表
6. <li>:表示列表项目
7. <dl>:表示定义标签
8. <dt>:表示列表中的定义项目
9. <dd>:表示列表中的定义条目
10. <pre>:定义预格式化的文本
11. <hr>:表示水平线
12. <table>:表示表格
13. <thead>:表示表头
14. <tbody>:定义表格正文
15. <tfoot>:定义表头页脚
16. <th>:定义表格单元格
17. <tr>:表示表格行
18. <td>:表示表格列
19. <caption>:表示表格外部标题
20. <form>:表示表单
　　行内元素：
1.<span>:跨越多个字符
2.<img>:表示网页中的图片（特殊的行内元素，可以设置宽高）
3.<a>:表示链接
4.<blockquote>:表示引用
5.<q>:表示引用
6.<cite>:表示引用
7.<strong>:表示强调字体
8.<b>:表示字体加粗
9.<br>:表示换行
10.<em>:表示斜体
11.<i>:表示斜体
12.<input>:表示输入
13.<label>:表示input元素定义标签
14.<select>:表示单选和多选菜单
15.<textarea>:表示多行文本输入
　　快级元素和行内的区别：行内元素是根据内容有多少就占多少，快级标签是不管多少都会占一行。
　　 3.2常用标签应用：
　　表单中的标签：form、input、select、lable、textarea
　　用于格式的标签：<br />、<hr /> 、<h1-6></h1-6>
　　列表标签：ul、li、ol、dl、dt、dd
　　表格标签：table(<thead>、<tbody>、<tr>、<td>、<th>)
　　布局标签：div、span
　　引用、跳转外部标签：a(文字跳转)、meta(页面跳转)、link(引用外部资源)
　　3.3 标签的应用
　　1.  img:表示图片

<body>
<img src="miqi.jpg"，alt="米奇"/>
</body>
　　2.  P:表示段落

<p>赠人玫瑰，手有余香
</p>
　　3.a:表示超链接

<a href="http://www.baidu.com">点击这个链接去百度
</a>
　　4.h:标题标记

<h1>1级正文标题</h1>
<h2>2级正文标题</h2>
<h3>3级正文标题</h3>
<h4>4级正文标题</h4>
<h5>5级正文标题</h5>
<h6>6级正文标题</h6>
　　
      5.序列标签

ul:表示无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
ol:表示有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ol>
dl:表示定义列表
<dl>
<dt>美人鱼</dt>
<dd>是一种鱼</dd>
</dl>
　　
6.pre:预格式文本

<pre>
很多       很多
</pre>
　　7.引用：

blockquote:表示引用(长引用)
<blockquote>举头望明月</blockquote>

q:有引号的引用
<q>青出于蓝而胜于蓝</q>
　　8.span:跨越多个字符

<p>
没什么<span>遗憾</span>
</p>
　　9.div:区域划分

<div>
<p>感谢天感谢地</p>
</div>
　　10.strong和b:表示语气强调

<strong>你的地盘你做主</strong>
<b>我的地盘我做主</b>
　　11.em和i:表示斜体

<em>土耳其卖土豆</em>
<i>吃了一斤土豆</i>
　　12.br:表示换行

<em>土耳其卖土豆</em>  </br>  <i>吃了一斤土豆</i>
　　13.hr:表示水平线
<hr/>
　　14.abbr:表示一个缩写形式

<p>
<abbr title="笔记本电脑">笔记本<abbr>
</p>
　　15.cite:表示引用
<cite>静夜思</cite>是谁写的
　　16.figure：表示定义

<figure>
<img src="" alt="米奇"/>
<figcaption>米奇</figcaption>
</figure>
　　17.video:视频

<video>
<source src=""/>
</video>
　　18.audio:音频

<audio>
<source src=""/>
</audio>
　　19.table:表示表格

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2" width="100" cellpadding="20">

<caption>计算机</caption>
<tr>

<th colspan="4" align="" >计算机</th>
</tr>
<tr>
<td colspan="4" align="right" >18.5</td>
</tr>
<tr>
<td>AC</td>
<td>+-</td>
<td>%</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>x</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
<td>=</td>
</tr>
<tfoot>
<tr>
<td>2016年8月10号</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1-1</td>
</tr>
</tbody>
<thead>
<tr>
<td>78</td>
</tr>
</thead>
</table>
</body>
</html>

7.thead:表示表格表头
<thead>
<tr>
<td>表头
</td>
</tr>
</thead>
8.tbody:表示表格身体部分
<tbody>
<tr>
<td>身体</td>
</tr>
</tbody>
9.tfoot:表示表格的页脚
<tfoot>
<tr>
<td>页脚</td>
</tr>
</foot>
10.th:定义表格表头，且表头显示粗体
<table>
<tr>
<th>表头粗体</th>
</tr>
</table>
　　colspan:横向合并

<table>
<tr>
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
　　rowspan:纵向合并

<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
　　20.form：表示用户输入的表单
<form  action="外部的链接路径" method="get/post">
</form>
method:用于向action 的链接发送数据的HTTP方法。
注意：post比get安全性高
　　21.input：标签数据输入文字，用户输入数据

<form  action="外部的链接路径" method="get/post">
用户名：<input type="text" maxlength="11" value="请输入用户名"/>
密码：  <input type="text" maxlength="6" placeholder="请输入密码"/>
<input type="button" value="登录按钮"/>
<button>登录按钮</button>
<input type="reset" value="重置"/>
<input type="submit"value="提交"/>
<input type="file" />:文件的选择
</form>
　　注意：

   1.value和placeholder的区别：
   value：直接显示在文本框中，需要用户自己删掉
   placeholder:用户输入时，自己消失
   2.<input type="button" value="登录">和<button>登录</button>区别
   <input type="button" value="登录">：登录按钮不会自动发送请求
   <button>登录</button>：登录按钮会自己发送请求
　　22.radio:代表单选框

男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>

<label for="man">男</label>
<input type="radio" name="sex" id="man"/>
<label ror="woman">女</label>
<input type="radio" name="sex" id="woman"/>
　　checkbox:代表多选框

网红1<input type="checkbox" name="gif"/>
网红2<input type="checkbox" name="gif"/>
　　23.导航

<nav>
<a href="#">新闻</a>
<a href="#">八卦</a>
<a href="#">9卦</a>
<a href="#">大卦</a>
<a href="#">黄马褂</a>
</nav>
　　二、CSS样式(修饰)：
　　1、style和class
　　1.1、style的三种存放位置(从高到低)
　　(1)标签属性(在属性中加style)
　　(2)html头部
　　(3)单独的CSS文件
　　优先级：标签属性最高，不管html头部和CSS文件是否存在，绝对以标签属性为准。
　　html头部和单独的CSS文件是继承关系，如果样式不同便会相互继承，但当 html头部和单独的CSS文件样式相同时html头部优先级比单独的CSS文件高。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<link rel="stylesheet"href="csstest.css"/>
<style>
.color{  background-color: black;
color: aliceblue;
}
</style>
</head>
<body>


<div>直接设置样式</div>
<hr />


<div  class="color">引用样式</div>
<hr />


<div class="color2">引用样式文件</div>
</body>
</html>
　　2、CSS选择器：用于选择不同样式进行引用

<style>
/*通配所有标记*/
*{
margin: 0;
padding:0;
}
p{
background-color:red;
border: 5px solid green;
font-size: 30px;
font-weight: 900;
width: 50px; ;
}
/*a标记没有被访问时和样子*/
a{
color: black;
}
a:link{
color: black;
/*font-size: 30px;*/
}
/*a标记访问之后的样子*/
a:visited{
color:gainsboro;
}
/*移入的样子*/
a:hover{
color: blueviolet;
}
/*点击时的样子*/
a:active{
font-size: 20px;
}
/*指根元素*/
:root{
background-color:palevioletred;
}
table{
background-color:blue;
border: 20px solid  yellow;
}
/*空*/
table td:empty{
background-color: gainsboro;
}
/*获取焦点*/
input[type="text"]:focus{
border:5px  solid darkmagenta;

}
input[type="text"]{
border:20px  solid darkmagenta;
display: block;
width: 20px;
/*height: 30px;*/

}
/*元素选取*/
::selection{
background-color: darkgreen;
color: green;
}
/*id*/
#testp1{
background-color:green;
font-weight: 900;

}
/*伪元素*/
.box1{
width: 200px;
border: 1px solid red;
}
/*第一个字*/
.box1 p:first-letter{
font-size: 50px;
}
.box1 p:first-line{
background-color: yellow;
}
.a1{
font-size: 50px;
}
/*在链接的前面*/
.a1:before{
content: "我是前面";
}
/*在链接的后面*/
.a1:after{
content:"你在我后面";
}
/*第4排*/
ul li:nth-child(4){
background-color: yellow;
}
/*第一行*/
ul li:first-child{
background-color: yellow;
}
/*最后一行*/
ul li:nth-last-child(1){
background-color: yellow;
}
/*基数*/
ul li:nth-child(2n+1){
background-color: red;
}
ul li:nth-child(odd){
background-color: aqua;
}
/*偶数*/
ul li:nth-child(even){
background-color: blue;
}
</style>
　　3.选择器的优先级
!important>内嵌>id>伪类/属性/class>元素/伪元素>通配符

<style>
<div class="box">
<p id="p1" >
<span class="span1">你好</span>
</div>
优先级：
.box #p1 .span1{
color:green;
}
>
.box #p1 span{
color: yellow;
}
>
#p1 span {
color:red;
}
>
div p span {
color:green;
}
>
span{
color: blue;
}
</style>
　　如果加!important优先级升级

span{
color: blue !important;
}
这时候就该显示蓝色。
　　
3、DIV样式设置
　　3.1、基本设置(在style中设置属性)常用：
　　类型：设置字体颜色等

<style>
/*类型设置*/
.type{
font-saze:12px;             /*字体大小设置*/
color: red;                /*字体颜色*/
text-decoration: none; /*没有下滑线*/
}
</style>
　　背景：设置页面背景等

<style>
/*背景设置*/
.background
{
/*当背景颜色和图片同时设置时，你要知道这是两层，背景颜色在图片的下面*/
background-color: red;                   /*背景颜色*/
background-image: url("image/111.PNG");  /*背景图片*/
background-repeat: no-repeat;          /*背景图片不重复*/
background-position: 22px/*(水平位置)*/ 22px/*垂直位置*/;
/*会根据你写X和Y的坐标，去到图片坐标显示的地方*/
height: 139px;                            /*背景高度*/
width: 100px;                            /*背景宽度*/
}
</style>
　　边框:用于设置DIV或span的边框

<style>
/*边框设置*/
.cheek
{
border: 1px solid red;
/*用于设置边框属性，选项有三个：边框粗细类型颜色*/
}
</style>
　　
图片替换技术：两种方法：
　　1. 利用行高替换

<h1 class="way1">
<a href="http://taibao.com">淘宝</a>
</h1>
<style>
.way1{
width:154px;
height:30px;
border:1px solid blank;
background:url("../img.11.jpg") no-repeat;
overflow:hidden;
}
.way1 a{
line-height:100px;
display:block;
}
</style>
　　2.利用首行缩进：

<h1 class="way2">
<a href="http://taibao.com">淘宝</a>
</h1>
<style>
.way2{
width:154px;
height:30px;
border:1px solid blank;
background:url("../img.11.jpg") no-repeat;
text-indent:-500px;
overflow:hidden;
}
.way2{
display:block;
}
</style>
　　雪碧图：只访问一张图片

<div class="sprite"></div>
<style>
.sprite{
weith:54px；
hight:72px;
border:1px solid blank;
background:url("");
background-position:-54px 157px;
“向左和上平移都为-”
}
.sprite:hover{
background-position:-168px -57px;
}
</style>
　　渐变：

1.向右线性渐变
background：linear-gradient(to right,red,yellow);
2.垂直渐变
background:linear-gradient(90deg,yellow,red);
3.径向渐变
background：linear-gradient（pink,#58a）;
4.transform:translate( ):平移
transform:translate(30px,50px);
5.transform:rotate():旋转
transform：rotate（45deg）;
6.transform：scale（）：放大缩小
transform：scale（1，0.5）；
7.放慢的一个动画：  transition: all linear 2s;
8./*兼容前缀，谷歌，火狐，微软，欧朋*/
-webkit--transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-ms-transituon:all linear 0.5s;
-o-transition:all linear 0.5s;
　　animation:yangjing 3s infinite 动画效果：

.box3{
width: 100px;
height: 100px;
background: red;
animation: yangjing 3s 2;
}
@keyframes yangjing {
/*第一种*/
/*from{*/
/*background: red;*/
/*}*/
/*to{*/
/*background: gold;*/
/*}*/
/*第二种*/
20%{
width: 300px;
border-radius: 50%;
background: purple;
}
30%{
width: 400px;
height: 150px;
border-radius: 20px/30px;
background: green;
}
40%{
width: 100px;
height: 100px;
background: powderblue;
transform: rotate(45deg);
}
60%{
background: darkgoldenrod;
}
80%{
border-radius: 50%;
}
100%{
background: orangered;
}
}

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] HTML入门经典

扫码加入运维网微信交流群