HTML 5&CSS快速入门

2017-06-26 本文已影响260人一只写程序的猿

1.计算机中的文件

二进制文件
文本文件
区别：使用windows记事本打开是否出现乱码

2.网页组成

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

网页一般由下面3部分组成

HTML(HyperText Markup Language) —— 网页具体内容和结构
CSS(Cascading Style Sheets) —— 网页的样式（网页美化的主要模块）
JavaScript —— 网页的交互效果，比如对用户鼠标事件做出响应

1.HTML发展史

HTML发展历史

HTML概念版——概念，没有实施

IETF组织维护HTML——HTML2.0
W3C组织：新的HTML标准
HTML4.01标准出现（里程碑）
HTML 5标准（移动端的流行）

2.理解

超文本标记语言（标记语言不是编程语言）

超文本——核心：文本文件；扩展：可以间接的表示图片、音频、视频等二进制数据
后缀名称：.html .htm
网页文档：开发网页，让其他人可以通过浏览器来访问我们的数据

HTML 5优势

跨平台利用HTML 5编写的应用几乎可以在任何浏览器平台运行使用

开发速度快易用很多功能可以轻易完成
视频和音频支持且移动

当手机浏览器完全支持HTML5那么开发移动项目将会和设计更小的触摸显示一样简单。这里有很多的meta标签允许你优化移动：

viewport: 允许你定义viewport宽度和缩放设置；

全屏浏览器： ISO指定的数值允许Apple设备全屏模式显示；
Home screen icons: 就像桌面收藏，这些图标可以用来添加收藏到IOS和Android移动设备的首页。

3.HTML语法规则

文档声明：html网页的第一行：<!doctype html>表示声明这是一个网页文档，可以通过浏览器进行展示
网页内容：网页中所有的数据写在一对<html></html>标签中
开始标签 <html>
结束标签 </html>
网页属性：用于设置网页的编码、网页的标题等等内容
写在网页中的<head></head>标签中
<meta charset=”utf-8”>声明网页中的字符编码是UTF-8编码
<title>网页标题</title>声明网页的显示标题部分的内容
网页展示数据：打开的浏览器网页中，要查看的所有数据
写在网页中的<body></body>标签中
网页内容区域：页头、页面主体、页脚

<header></header> <section></section> <footer></footer>

常见的标签

标题标签：在网页中，通过加大字号，加粗文本来表示的文本
<h1></h1> ~ <h6></h6>

段落标签：网页中标签一段文本数据的标签
<p>段落内容</p>
分隔线标签：是在网页中，增加一个水平的直线，将不同的内容分离
<hr/>
换行标签：用于在网页中，将文本数据或者其他数据添加一个换行
<br />
视频播放标签：用于将指定的视频内容，在网页中进行播放
<video src=”” controls></video> 视频播放标签
src属性：指定要播放的视频的路径、目录、文件夹/文件
controls属性：用于展示播放器的控制台（播放、暂停、声音、全屏）
autoplay属性：是否自动播放
= 音频播放标签：用于将指定的音频内容，在网页中进行播放
<audio src=””></audio> 音频播放标签
autoplay属性设置自动播放
图片标签：用于展示指定位置的图片
<img src=””/>展示指定位置的图片，网页中常用的图片后缀名有三个
.jpg .gif .png

扩展标签

<b>标签：文本加粗

<i>标签：文本斜体显示
<em></em>标签：文本斜体显示
效果： 文本斜体显示
<u>标签：文本添加下划线
<del>标签：文本添加删除线
效果：~~文本添加删除线~~

表格标签：用来在网页中，通过表格的形式展示内容的

<table></table>表格
<tr></tr>表格中要展示的标题
<td></td> 表格中要展示的数据

合并单元格

横向合并单元格：colspan[跨列]
纵向合并单元格：rowspan[跨行]

自动换行及顶端对齐

表格自动换行:<table style="word-break:break-all; word-wrap:break-all;">
表格顶端对齐：valign="top"

<small>标签

<small> 标签将旁注 (side comments) 呈现为小型文本,即让文本缩小20%进行展示。
免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。
对于由 em 元素强调过的或由 strong 元素标记为重要的文本，small 元素不会取消对文本的强调，也不会降低这些文本的重要性。

HTML用各种标签/标记，来标记内容的
标记好内容之后，要对内容进行修饰【尺寸、位置、大小、颜色】

网页一：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网上转账电子账单</title>

    </head>
    <body>
        <h1>工商银行电子汇款单</h1>
        <table border="1" cellpadding="10" cellspacing="0" >
        <tr>
            <td colspan='2'><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4"><b>收<br/>款<br/>人</b></td>
            <td>户名</td>
            <td>小许</td>
            <td rowspan="4" width="10"><b>付<br/>款<br/>人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>000000000001</td>
            <td><b>卡号</b></td>
            <td>000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
            </tr>
        <tr>
            <td colspan="2"><b>金额</b></th>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写)：壹圆整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间戳</b></td>
            <td><i>2017-06-01-13.00.00.00000</i></td>
        </tr>

        </table>
        <p>票据打印时间：2017-06-01 15:00:12</p>
        <p><del>票据打印单位：江苏徐州业务中心</del></p>
        <p>操作员：大曾</p>
    </body>

</html>

网上转账电子账单

网页二：

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>豆瓣电影</title>
    </head>
    <body>
        <h2>热门电影板块</h2>
        <hr/>
        <table width="800">
            <tr>
                <td><b>最近热门电影</b></td>
                <td>热门</td>
                <td>最新</td>
                <td>豆瓣评分</td>
                <td>冷门佳片</td>
                <td>华语</td>
                <td>欧美</td>
                <td>韩国</td>
                <td>日本</td>
                <td width="100"></td>
                <td>更多>></td>

            </tr>
        </table>
        <hr/>
        <table >
            <tr>
                <td>![](豆瓣电影/movie1.jpg)</td>
                <td>![](豆瓣电影/movie2.jpg)</td>
                <td>![](豆瓣电影/movie3.jpg)</td>
                <td>![](豆瓣电影/movie4.jpg)</td>


            </tr>
            <tr>
                <td>猜火车4.1</td>
                <td>贝尔科实验6.0</td>
                <td>加州公路巡警6.8</td>
                <td>歌儿不绝6.3</td>

            </tr>
            <tr>
                <td>![](豆瓣电影/movie5.jpg)</td>
                <td>![](豆瓣电影/movie6.jpg)</td>
                <td>![](豆瓣电影/movie7.jpg)</td>
                <td>![](豆瓣电影/movie8.jpg)</td>
            </tr>
            <tr>
                <td>明日的我与昨日的我</td>
                <td>速度与激情8</td>
                <td>激素特工</td>
                <td>金刚狼3：殊死一战</td>
            </tr>

        </table>

    </body>
</html>

4.HTML基础操作

1.常见标签

div标签：块标签
ul标签：无序列表标签
ol标签：有序列表标签
dl标签：图文混排列表标签

简单样式：

list-style:none;去掉列表标签前面的序号
list-style-image:url(“abc.png”);使用指定的图片替换列表的序号

form表单标签：表单标签在页面上没有任何展示，专门用来进行数据提交的

2.表单元素标签

表单标签要配合表单元素标签一起使用
表单元素标签主要用与：文本输入框、密码输入框、单选按钮、复选框、下拉列表框、文件选择框各种框框

label用来写输入框的提示信息，
for属性：表示这是哪个标签的提示信息，for的值是另一个标签的id值

文本输入框：<input type=”text”..
密码输入框：<input type=”password”..
提交按钮：<input type=”submit”..

3.API文档

API文档：application program interface(应用程序开发接口)
API文档：对应用程序开发接口的描述文档——说明书
【编程语言：教程文档，向导文档，操作文档，API文档】

HTML API文档：

HTML没有官方的API文档，而是很多开发人员组织起来编写的较为详细API说明文档
通常比较常用的一个文档：DHTML文档（包含了HTML标签描述、CSS样式描述等等）

你可以在编程的过程中，通过API查询自己想要的标签的方法。

通过写一个简单的登录和注册页面来理解具体操作

网页三

<!-- 简单的登录页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
</head>
<body>
    <from action = 'http://www.baidu.com' method='post'>
        <label for='username'>账号</label>
        <input type="text" id='username' name="username" placeholder="请输入账号">
        <br>
        <label for='password'>密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <br>
        <input type="submit" value="登录">
    </from>

</body>
</html>

网页四

<!-- 简单的注册页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#">
        <label for="username">账号</label>
        <input type="text" id="username" name="username" placeholder="请输入账号">
        <br>
        <label for="password">密码</label>
        <input type="password" id="password" name="passwo" placeholder="请输入密码">
        <br>
        <label for="gender">性别</label>
        <input type="radio" id="gender1" name="gender">男
        <input type="radio" id="gender2" name="gender">女
        <input type="radio" id="gender3" checked="true" name="gender">待定
        <br>
        <label for="fav">爱好</label>
        <input type="checkbox" value="LOL" checked>英雄联盟
        <input type="checkbox" value="WZRY">王者荣耀
        <input type="checkbox" value="SWXF">守望先锋
        <input type="checkbox" value="DOTA">DOTA2
        <br>
        <label for="headerImg">头像</label>
        <input type="file" id="headerImg">
        <br>
        <label for="address">地址</label>
        <select id="address" name="address">
            <option value="SH">上海</option>
            <option value="BJ">北京</option>
            <option value="SZ">深圳</option>
        </select>
        <br>
        <label for="introduction">自我介绍</label>
        <textarea rows="10" cols="80"></textarea>
        <br>
        <input type="button" value="普通按钮">
        <button>H5 普通按钮</button>
        <input type="reset" value="重置">
        <input type="submit" value="注册">
    </form>
</body>
</html>

regist.html

4.超链接标签

<a href="http://www.baidu.com" style="font-size:32px;">百度</a>

a超链接标签
href属性，表示要打开的网络地址

可以指向一个网络地址
可以指向一个本地文件

<!-- 超链接的打开方式 -->
<a href="http://www.baidu.com" target="_blank">新的打开方式:百度</a>
这里的target属性是_blank,指的是从新的空白页打开一个网页

备注：web项目开发时常见的文件名称
网站首页：index.html / index.htm / main.html / main.htm / default.html / default.htm
登录页面：login.html / login.htm / signin.html / signin.htm
注册页面： regist.html / register.html / signup.html

5.CSS样式操作的三种方法

1.元素内嵌样式

<li style="width:800px;color:orange;font-weight:bold;"> 只要我人生的程序不终止，你的名字一直都是我的心事 </li>
优点：操作方便，易于理解;
缺点：如果样式内容太多，就会让一个简单的标签变得非常的臃肿，不利于代码的维护。

2.文档内嵌样式

样式写在网页中的<style>标签中，将样式代码集中起来进行管理

<head>
  <style>
      #info{color:blue;font-size:18px;font-weight:bold;border:#069 1px     dashed;}
  </style>
</head>
<body>
  <ol>
    <li id="info">
定义一个变量：我们的相爱时间<br>
如若我们之间是真爱<br>
那么从我们相爱的那一秒起，我们将无限循环，执子之手，与子偕老</li>
  </ol>
</body>

优点：将我们的HTML标签和CSS代码进行了分离，方便我们对HTML代码或者CSS样式进行修改;
缺点：HTML代码和CSS代码还是在一个文件中

3.外部引用

外部引用样式

同一文件夹里写一个demo.css文件
#desc{font-size:22px;color:red;font-family:"楷体" }
demo文件中代码
<head>
    <link rel="stylesheet" type="css" href="demo03.css">
</head>
<body>
  <ol>
    <li id="desc">遍历整个世界，只为找到你。<br>当我发现你是我的真爱时，<br>
        那么你就是我要找寻的人。</li>
  </ol>
</body>

三种样式操作：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>样式操作</title>
    <link rel="stylesheet" type="css" href="demo03.css">

    <style >
        #info{color:blue;font-size:18px;font-weight:bold;border: #069 1px dashed}
    </style>

</head>
<body>
    <p style="font-size: 26px">
        <b>程序员的三行情诗</b>
    </p>
    <hr>
    <ol>
        <li style="width:800px;color:orange;font-weight:bold;">只要我人生的程序不终止，你的名字一直都是我的心事</li>
        <br>

        <li id="info">定义一个变量：我们的相爱时间<br>如若我们之间是真爱<br>那么从我们相爱的那一秒起，我们将无限循环，执子之手，与子偕老</li>
        <br>
        
        <li id="desc">遍历整个世界，只为找到你。<br>当我发现你是我的真爱时，<br>
        那么你就是我要找寻的人。</li>


    </ol>
</body>
</html>

三种样式操作

6.CSS标签选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签选择器</title>
    <style>
        /*通配符选择器*/
        *{padding: 0;margin: 0;color:green;}/*padding表示内边距，margin表示外边距*/
        /*class选择器*/
        .intro{color:blue;font-size: 22px;}
        /*标签选择器*/
        p{color: red;}     
        /*id选择器*/
        #choice{color:orange;font-size: 28px;}
    </style>


</head>
<body>
    <p>使用标签选择器</p>
    <p>标签选择器，可以通过标签名称来选择所有的该名称的标签</p>
    <p>直接在css代码中，写标签的名称，用来修饰网页中一些特殊标签的样式</p>
    <p>请谨慎使用，选择范围太大</p>
    <hr>
    <span id="choice">id选择器</span>
    <span>id选择器通过在CSS代码中，使用符号"#name",name指的就是标签的id属性名</span>
    <span>id选择器，只会选择唯一的一个标签，用来修饰网页中一些标签的样式</span>
    <hr>
    <div class="intro">class选择器</div>
    <span class="intro">class选择器，通过符号".name"，name指代的标签class属性值</span>
    <b class="intro">class表示类型的意思</b>
    <hr>
    <div>通配符选择器：*,可以选择页面中所有的标签</div>
    <div>慎重使用，一般情况下，使用*来清除页面中的标签的边距</div>

</body>
</html>

标签选择器

7.其他选择

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>其他选择器</title>
    <style>
        /* 1. 其他选择器*/
        /* 群组选择器：可以将多个基本选择器，使用逗号进行分割，然后添加统一的样式*/
         p,span,div,#choice,.intro{color:red;} 
        /* 子标签选择器:修饰的是当前标签的直接子元素，不会影响孙子元素; */
         #list > li{color:orange;font-weight:bold;} 
        /* 包含选择器：修饰当前标签中指定的所有被包含的元素*/
        /* #list li {color:blue;font-weight:bold;} */

        /* 2. 选择器的优先级 */
        /*标签选择器修饰input,样式也是有优先级，如class选择器的优先级就没有id选择器高*/
         input,#username{border:none;border-bottom:solid 2px #888;}
        .username{border-bottom:solid 2px red;} 
    
        /* 3. 属性选择器 */
        /* 完整属性 */
        /* input[type="password"]{border:solid 1px red;} */
        /* input[type^="pass"]{border:solid 1px blue;} */
        [type^="pass"]{border:solid 1px red;}

        /* 4. 伪类选择器 是在后面添加冒号，然后添加一个关键词，来选择特殊的标签*/
        /* 慎重使用 ，通常情况下，可以通过id/class/标签选择器完全替代*/
        /* #list li:nth-child(2){color:red;} */
        #list li:hover{color:red;} /* 鼠标滑过的时候会高亮*/
    </style>
</head>
<body>
    <p>使用标签选择器</p>
    <p>标签选择器，可以通过标签名称来选择页面中所有的该名称的标签</p>
    <p>直接在css代码中，写标签的名称，然后在后面的大括号中添加样式</p>
    <p>慎重使用，选择范围太大</p>
    <hr/>
    <span id="choice">id选择器</span>
    <span>id选择器通过在CSS代码中，使用符号“#name”，name指的就是标签的id属性值</span>
    <span>id选择器，只会选择唯一的一个标签，用来修饰网页中一些特殊标签的样式</span>
    <hr/>
    <div class="intro">class选择器</div>
    <span class="intro">class选择器，通过符号".name"，name指代的是标签的class属性值</span>
    <b class="intro">class表示类型的意思</b>
    <hr/>
    <div>通配符选择器：*，可以选择页面中所有的标签</div>
    <div>慎重使用，一般情况下，使用*来清除页面中的标签的边距</div>

    <ul id="list">
        <li>尚未配妥剑</li>
        <li>转眼便是江湖</li>
        <li>愿历尽风帆</li>
        <li>归来仍少年</li>  
        <ul>
            <li>不要停止奔跑</li>
            <li>不要回顾来路</li>
            <li>来路无可眷恋</li>
            <li>值得期待的只有远方</li>
        </ul>
    </ul>


    <hr/>
    <form action="">
        <input id="username" class="username" type="text" placeholder="请输入账号"><br />
        <input type="password" username="password" placeholder="请输入账号"><br />
    </form>
</body>
</html>

其他的标签显示

8.其他样式

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
box-shadow属性的参数设置取值：

-阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

-X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>常见样式</title>
    <link rel="stylesheet" href="">
    <style>
        *{margin:0;padding:0;}
        #container{
            /*内容样式*/
            color:white;
            font-size:40px;
            font-family:"楷体";
            font-weight:bolder;
            text-align:center;
            line-height:300px;
            text-shadow: 10px -10px 10px red;
            /*尺寸样式*/
            width:1050px;
            height:300px;
            border:solid 2px orange;
            border-bottom:10px solid red;
            border-radius:10px;
            box-shadow:5px 5px 3px #888;

            background:pink;
        }
        #container a{color:white;
            text-decoration:none;
        }
        #th{width:1027px;height:515px;padding:10px;border:solid 10px #888;border-radius:5px;}
        #th img{width:1027px;height:515px;border-radius:5px;}
    </style>
</head>
<body>
    <div id="container">
        听说粉色会令人遐想...<a href="http://jandan.net/ooxx">煎蛋网</a>
    </div>
    <div id="th">
        ![](girl.jpg)
    </div>
</body>
</html>

常见样式的显示

9.block，inline和inline-block概念和区别

1.概念

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

2.block，inline和inlinke-block细节对比

display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。