HTML 5&CSS快速入门

727 阅读20分钟

#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>标签中
  • 网页内容区域:页头、页面主体、页脚

`

`

常见的标签

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

扩展标签

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

**表格标签:**用来在网页中,通过表格的形式展示内容的

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

合并单元格

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

自动换行及顶端对齐

表格自动换行:

表格顶端对齐: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查询自己想要的标签的方法。

通过写一个简单的登录和注册页面来理解具体操作
####网页三
登录页面 账号
密码

![login.html](http://upload-images.jianshu.io/upload_images/6078268-609af6d5d43f3bc0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####网页四
注册页面账号
密码
性别待定
爱好英雄联盟 王者荣耀 守望先锋 DOTA2
头像
地址 上海 北京 深圳
自我介绍
H5 普通按钮 ```

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.元素内嵌样式

`

  • 只要我人生的程序不终止,你的名字一直都是我的心事

  • ` **优点:**操作方便,易于理解; **缺点:**如果样式内容太多,就会让一个简单的标签变得非常的臃肿,不利于代码的维护。

    ###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元素可以设置marginpadding属性。

    • display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 inline元素的marginpadding属性,水平方向的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的同行特性。