Html-css笔记
1Html
超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
1.1简介
1.1.1语言概述
在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Web）。
Web页面也就是通常所说的网页，在这里不作区分.
1.1.1.1规范标准
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
1.1.1.2标记语言
HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点------就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。
1.1.2整体结构
一个网页对应于一个HTML文件，HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。 标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。
1.1.2.1标记符
标记符说明该文件是用HTML来描述的。它是文件的开头，而则表示该文件的结尾，它们是HTML文件的始标记和尾标记。
1.1.2.2头部标记符
这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符，它用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。
1.1.2.3文档标题
页面主体内容描述：
标记网页的开始；
标记头部的开始；
头部元素描述，如文档标题等；
标记头部的结束；
标记页面正文开始；
页面实体部分；
标记正文结束；
标记该网页的结束；
当然，如果不使用以上基本框架结构，而直接使用在实体部分中出现的标记符，在浏览器下也可以解释执行。
1.1.3字符集
在网页中除了可显示常见的ASCII字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，如：；二是键盘上没有的字符。
HTML字符可以用一些代码来表示，代码可以有2种表示方式。即字符代码（命名实体）和数字代码（编号实体）。字符代码以&符开始，以分号结束，其间是字符名；数字代码也以&符开始，以分号结束，其间是#号加编号。
1.2标签
1.2.1字体
<font color="#00000"size="5" face="微软雅黑">你好HTML</font>
1.2.2图片
<img src="img/1.jpg" width="200px" height="200px" >
1.2.3音乐
<audio src="music/纯音乐 - 危险警告.mp3" controls autoplay> loop="-1">
1.2.4视频
<video scr = "video/094351.mp4" controls autoplay></video>
1.2.5 标题
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
1.2.6超链接
<a href="http://www.baidu.com" target="_self">百度一下</a>
1.2.7表格
<table border="1" width="500px" height="500px" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>学校</th>
</tr>
<tr>
<!--colspan 跨列合并-->
<th colspan="2">张三</th>
<th>西安</th>
<th>交大</th>
</tr>
<tr>
<th>李四</th>
<th>25</th>
<th>上海</th>
<!--rowspan 跨行合并-->
<th rowspan="2">复旦</th>
</tr>
<tr>
<th>李四</th>
<th>19</th>
<th>北京</th>
</tr>
</table>
1.2.8目标连接的打开方式
<a href="#" target="#top">回到顶部</a>
1.2.9表单的提交方式
<form action="" method="GET">
<input type="text" name="username">
<br>
<input type="password" name="password">
<br>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<input type="checkbox">篮球
<input type="checkbox">篮球
<input type="checkbox">篮球
<input type="checkbox">篮球
<input type="checkbox">篮球
<br>
<input type="button" value="提交">
<br>
<input type="date">
<br>
<input type="file">
<br>
<input type="color">
<br>
<input type="hidden" name="id" value="123">
<input type="email">
<br>
<input type="search">
<input type="submit" value="注册">
</form>
1.2.10列表
无序<ul style="list-style:circle;">
<li>首页</li>
<li>产品</li>
<li>联系我们</li>
<li>电话</li>
<li>无序</li>
</ul>
<hr color="red">
有序<ol>
<li>首页</li>
<li>产品</li>
<li>联系我们</li>
<li>电话</li>
<li>有序</li>
</ol>
1.2.11段落
<p>
Google 帐号<strong>相册更多</strong> 搜索 地图 YouTube Play 新闻 Gmail 通讯录 云端硬盘
日历 Google+ 翻译 相册更多 登录隐私权条款设置广告商务Google 大全
Google 帐号 搜索 地图 YouTube Play 新闻 Gmail 通讯录 云端硬盘
日历 Google+ 翻译 相册更多 登录隐私权条款设置广告商务Google 大全
</p>
1.2.12字体
<u>文字</u>
<i>文字</i>
<del>文字</del>
<b>文字</b>
1.2.13框架
<frameset rows="15%,*">
<frame src="Html.html"></frame>
<frameset cols="15%,*">
<frame src="03.html" name="left"></frame>
<frame src="Html.html" name="right"></frame>
</frameset>
</frameset>
1.2.14行内框架
<iframe src="04.html" width="650px"height="500px"></iframe>
1.2.15导航栏
<nav>
<a href="#" class="a">首页</a>
<a href="#" class="a">新闻</a>
<a href="#" class="a">小米之家</a>
<a href="#" class="a">米粉</a>
</nav>
1.2.16下拉菜单
<select width="60px">
<option value="">+</option>
<option value="">-</option>
<option value="">*</option>
<option value="">/</option>
</select>
1.2.17行内下拉菜单
<input type="text" list="mylist"/>
<datalist id="mylist">
<option value="+">
<option value="-">
<option value="*">
<option value="/">
</datalist>
1.2.18注释
<!--（注释的内容）-->
2 css
2.1简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2.1.1发展历史
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有"层叠"丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或"层叠"作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
同年，W3C组织(World WideWeb Consortium)成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成，成为w3c的推荐标准。
1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
2.1.2语言特点
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
2.1.2.1丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力;允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2.1.2.1易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
2.1.2.3多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
2.1.2.4层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
2.1.2.5页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。
2.1.3技术应用
网站
在HTML文件里加一个超级链接, 引入外部的 CSS 文档。这个方法最方便管理整个网站的网页风格, 它让网页的文字内容与版面设计分开。只要在一个CSS文档内(扩展名为 CSS) 定义好网页的风格,然后在网页中加一个超级链接连接到该文档,那么网页就会按照在CSS文档内定义好的风格显示出来。
2.1.4语言评价
层叠样式表(Cascading Style Sheet，CSS)有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从(X)HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。
2.2css的三种形式
2.2.1行内样式表
<font style="font-size:20px;
color:red;
font-family: '微软雅黑';">
Hello World
</font>
2.2.2内部样式表
<style>
img{
width:100px;
height:100px;
}
</style>
2.2.3外部样式表
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/indes.css" />
2.3选择器
2.3.1父子选择器
ul{
width: 300px;
height: 50px;
border: 1px solid red;
list-style: none;
}
ul>li{
width: 300px;
height: 50px;
border: 1px solid green;
float: left;
}
2.3.2包含选择器
p img{
width: 400px;
height: 400px;
}
#img{
width: 300px;
height: 400px;
}
2.3.3组合选择器
#div,#img1,#p1{
width: 300px;
height: 300px;
border:1px solid red;
3.3.4属性选择器
input[type="text"]{
background: red;
2.3.5元素选择器
img{
width: 300px;
height: 300px;
}
div{
width: 610px;
height: 600px;
border: 1px solid red;
margin-left: 500px;
margin-top: 200px;
}
2.3.5伪类选择器
<style>
div{
width: 200px;
height: 200px;
background: red;
}
div:hover{
background: green;
}
input:focus{
background: gold;
}
a:visited{
color: red;
}
a:active{
color: chartreuse;
}
</style>
2.4css的盒子模型
<style>
body{
margin:0 ;
}
div{
width: 400px;
height: 400px;
border:1px solid red;
margin-left: 300px;
margin-top: 100px;
}
p{
border:1px solid red;
width: 290px;
height: 290px;
margin-left: 50px;
margin-top: 50px;
padding-left:10px ;
padding-top: 10px;
}
</style>
3455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
