头皮发麻的HTML课时一

　　话说我都不知道有多少天没有更新我的随笔了，不过我忽的一下发现到灵魂深处的罪孽；好吧，不扯淡了，其实就是自己懒得外加上HTML这个东西又实在是很重要，所以良心发现把我自己所学的给记录下来，我会尽量的写的详细点，方便自己回忆，或者是哪些踩了*运翻到了我博客的老爷们提供一些关于HTML相对来说用点用的东西；本篇主要记录HTML和CSS的用法，至于前面没有做笔记的Python基础我会尽量补上来。

　　在记录HTML之前，我们先来了解一下HTML格式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
上面我写了一段裸露的HTML格式，<html></html>将整个代码给括了起来，<head></head>里面写的就是头部信息，当然了解HTML的人知道大部分的头部信息<head>是不会在浏览器中显示
的。这里我再插插上一嘴，不关什么语言都有自己的解释器，HTML也不会例外，HTML的代码是供浏览器解释的。下面我们就来了解下HTML头部会有哪些东西，同时我也会讲HTML的内容给解释
清楚。

一、HTML头部

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <!-- 页面标签,默认字符编码为utf-8 -->

     <meta charset="UTF-8">

     <!--页面跳转-->

     <meta http-equiv="refresh" content="5; Url=http://www.baidu.com" />

     <!--关键字-->

     <meta name="keywords" content="开发者" />

     <meta name="description" content="个人博客" />

     <!--页面图标-->

     <link rel="shortcut icon" href="123.jpg" />

     <title>Title</title>

 </head>

 <body>

 </body>

 </html>

　　现在，我解释下上面的格式，和每行的意思：

　　首先大家需要明白<head></head>这种属于标签；<meta>也属于标签，但是他和前面的还有一些不太一样，这种属于自闭和标签，目前大家记住他就行了，到后面写一写也就明白了。

　　<meta http-equiv="refresh" content="5; Url=http://www.baidu.com" />:<meta />是一个标签我就不再重复了，http-equiv=""是这个标签的属性，=
号后面就是这个属性的值，就和当初我们学Python的时候一样，但是这里的值是有意义的，比如这个就是刷新的意思；content也是这个标签内的属性，他的意思就是5s刷新一
次，后面的Url当然也是属性，这个标签的总体意思就是，这个页面5s后会刷新，然后跳转到URL里面写好的地址中；

　　<meta name="keywords" content="开发者" />就是我用红色框花上的；

　　<meta name="description" content="个人博客" />name="description" 为网站的接受，说通俗点就是为了让某度搜索到你

　　<link rel="shortcut icon" href="123.jpg" /> : rel="shortcut icon"就是上面的图标，后面的为这个图片的路径

二、HTML中body部分（一）

　　2.1纯洁的div标签和span标签

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div>苍井空</div>

     <span>小泽</span>

     <span>丽花美凉</span>

 </body>

 </html>

　　这里咱们涉及了两个标签，一个是div，一个是span；他们两都是白板（纯洁的），如果你里面不加东西就什么都作用不会起，如果你把我这一段来出来运行了你会发现到一个现象，就是两个span标签的东西是连这的。这是怎么回事呢？这里就是标签的性质不同了。

　　首先标签分为两类，一个是块级标签，另一个是内连标签；块级标签的特性是：他会占用父级标签的全部，而span标签是属于内联标签，他们的内容会相互连接，不会占用父级标签的100%。

　　2.2：a标签p标签和br标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>妹子<br />加微信</p><p>妹子加微信</p><p>妹子加微信</p>

    <a href="http://www.baidu.com">百度</a>

    <a href="#">点不动</a>

</body>

</html>

　　"p"标签是用来标记段落的，br标签是用来分割的，a标签是用来跳转的

　　2.3：列表标签:ol和ul

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--标题-->

 <ul>小电影

     <!--标签-->

     <li>中国的</li>

     <li>美国的</li>

     <li>日本的</li>

 </ul>

 <ol>小电影

     <li>中国的</li>

     <li>美国的</li>

     <li>日本的</li>

 </ol>

 </body>

 </html>

2.4.input系列

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>

    <!--test:普通文本框，value为框内的默认值，name为传入后端的k值-->

    用户名：<input type="text" value="alex" name="username" /> <br />

    <!--type为password为密码输入-->

    密码：<input type="password" value="asdf" name="pwd" /> <br />

    <!--目前只需知道submit是一个提交按钮，value是按钮的名字-->

    <input type="submit" value="submit提交"  /> <br />

    <!--redio是小圆点，value是发送到后端是值，name如果相同互斥，checked=checked为默认值-->

    <input type="radio" name="123" value="n" checked="checked" />男 <br />

    <input type="radio" name="123" value="l" />女 <br />

    <!--checkbox为多选框，value为后端对应值-->

    <input type="checkbox" value="12" />man

    <input type="checkbox" value="11" />woman

</div>

</body>

</html>

2.5.其他input系列

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--上传文件-->

 <input type="file" name="2222" />

 <!--网页中提交-->

 <input type="button" value="button提交" />

 <!--重置-->

 <input type="reset" value="重置" />

 <div>

     <!--下拉框，multiple为多选，selected="selected"为默认选项-->

     <select name="city" multiple >

         <option value="1">BeiJing</option>

         <option value="2" selected="selected">ShangHai</option>

     </select>

 </div>

 </body>

 </html>

2.6.其他标签

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <!--src为图片所在路径-->

 <img src="123.jpg" alt="美女" title="this good gril" /> alt为图片加载不出是显示的文字，title为鼠标悬停上的文字

 <!--HTML还有很多其他的标签，后面等遇到的时候在仔细说-->

 </html>

三、CSS选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <!--标签选择器-->

     <style>

         /*选中所有a标签*/

         a{

             color: red;

         }

     </style>

     <!--id选择器-->

     <style>

         /*选择所有id为i1*/

         #il{

             color: blue;

         }

         /*class 选择器*/

         /*选择所有class=c1的*/

         .c1{

             color: yellow;

         }

         /*属性选择器 important为优先级最高*/

         /*[n="1"]{

             color: #dddddd; !important;

         }*/

         /*div下面的子子孙孙*/

         div p{

             color: darkmagenta;

         }

         /*div下面的儿子*/

         div>p{

             color: #dddddd;

         }

         /*组合选择器*/

         .c3 .c4{

             color: #61fdff;

         }

         /*鼠标悬停显示字体颜色*/

         .cla:hover{

             color: aqua;

         }

     </style>

 </head>

 <body>

 <!--演示部分-->

 <div>

     <a href="http://www.baidu.com">给你看看宝贝</a>

 </div>

 <!--abc是我自定义的一个标签，为了不和别的标签重复-->

 <abc id="il">hope is good thing</abc>

 <br />

 <dbc class="c1">and best thing</dbc>

 <br />

 <!--孙子系列-->

 <div>

     <div>

         <p>You're best</p>

     </div>

 </div>

 <!--儿子系列-->

 <div>

     <p>

         BBBBBBBBBBBB

     </p>

 </div>

 </body>

 </html>

四、CSS基础使用

4.1.CSS的基本使用

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             /*此处的作用就让边框从定格开始*/

             margin: 0;

         }

         .w{

             height: 48px;width: 980px;background-color: #61fdff;

             /*0就是上下是0，auto是左右自动居中，pandding也是一样*/

             margin: 0 auto;

             /*居中*/

             text-align: center;

         }

         .header{

             /*高度48像素*/

             height: 48px;

             /*背景颜色*/

             background-color: bisque;

             /*字体颜色*/

             color: silver;

             /*使内容自动居中，其中line-height==height*/

             line-height: 48px;

         }

     </style>

 </head>

 <body>

     <div class="header">

         <div class="w">

             LOGO

         </div>

     </div>

     <div class="body"></div>

 </body>

 </html>

头皮发麻的HTML课时一

备注：上图标注的地方为body{margin:0;}的作用

4.2.CSS边距

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .c2{

             background-color: #dddddd;

             padding: 10px;

             border-left: 3px solid transparent;

         }

         .c2:hover{

             border-left: 3px solid rebeccapurple;

         }

     </style>

 </head>

 <body>

     <!--高度为200px，线框为1px，实线，红色(border是边框)-->

     <div style="height: 200px;border: 1px solid red;"></div>

     <!--padding是内边距，在后边会做介绍-->

     <div style="background-color: #dddddd;border-right: 3px solid rebeccapurple;padding: 10px;">

         搜索数据

     </div>

     <div class="c2">

         搜索数据

     </div>

 </body>

 </html>

4.3.CSS边距

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <!--margin外边距-->

     <div style="margin: 50px;background-color: rebeccapurple;color: white;">

         鼻子

     </div>

     <!--padding内边距-->

     <div style="padding: 50px;background-color: rebeccapurple;color: white;">

         鼻子

     </div>

 </body>

 </html>

4.4.CSS位置

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .tip{

             /*fixed将事务固定在屏幕上的某一个位置*/

             position: fixed;

             /*离底部未300px*/

             bottom: 300px;

             right: 0;

         }

         .ab{

             /*absolute相对事务*/

             position: absolute;

             bottom: 10px;

             right: 0;

         }

         .rel{

             position: relative;

             height: 300px;

             width: 300px;

             background-color: rebeccapurple;

         }

         .abs{

             position: absolute;

             top: 0;

             right: 0;

         }

     </style>

 </head>

 <body>

     <div class="rel">

         <div>

             <div class="abs">asdf</div>

         </div>

     </div>

     <div style="background-color: #dddddd;height: 2000px;"></div>

     <div class="tip">返回顶部</div>

     <div class="ab">返回顶部</div>

 </body>

 </html>

4.5.CSS浮动

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         body{

             margin: 0;

         }

     </style>

 </head>

 <body>

     <div style="height: 48px;background-color: brown;line-height: 48px;">

         日本的

         <!--这里说一下“a”标签为内联标签，意思就是内容不自动换行-->

         <a>苍老师</a>

         <a>小泽玛</a>

         <a>立花</a>

     </div>

     <br/>

     <div style="background-color: rebeccapurple;">

         <!--float为浮动，lefe让他向左边浮动-->

         <div style="float: left;background-color: green;">内容一</div>

         <div style="float: left;background-color: green;">内容二</div>

         <div style="float: right;background-color: green;">内容三</div>

         <div style="clear: both;"></div>

     </div>

     <div style="height: 48px;background-color: brown;line-height: 48px;">

         <!--上下居中&ndash;&gt;line-height-->

         python流弊

     </div>

     <br/>

     <div style="height: 48px;background-color: brown;text-align: center;">

         <!--test-align-->center为居中-->

         php垃圾

     </div>

 </body>

 </html>

4.6.CSS布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         body{

             margin: 0;

         }

         .w{

             width: 980px;

             margin: 0 auto;

         }

         .left{

             float: left;

         }

         .right{

             float: right;

         }

         .pg-header{

             height: 48px;

             background-color: brown;

             color: white;

             line-height: 48px;

         }

         .pg-header .menus a{

             padding: 0 10px;

             /*是标签具有内联标签的属性--->也就是内容不换行*/

             display: inline-block;

             /*使内联标签具有块级标签的属性*/

             /*display: block;*/

         }

         .pg-header .menus a:hover{

             background-color: bisque;

         }

     </style>

 </head>

 <body>

     <div class="pg-header">

         <div class="w">

             <div class="menus left">

                 <a href="#">菜单一</a>

                 <a href="#">菜单一</a>

                 <a href="#">菜单一</a>

                 <a href="#">菜单一</a>

             </div>

             <div class="menus right">

                 <a href="#">登录</a>

                 <a href="#">注册</a>

             </div>

         </div>

     </div>

     <div class="pg-body">

         <div class="w">

             asdka;sdfjk;alsd

         </div>

     </div>

 </body>

 </html>

　　到此HTML和CSS基础已经大致说完了，后边我会把JS和jQuery的基础写进博客；以及相关的中文文档地址放入博客中，大家也可以一起学习。

秒客网

头皮发麻的HTML课时一

一、HTML头部

二、HTML中body部分（一）

三、CSS选择器

四、CSS基础使用

相关文章