html 就像一个裸体的人
css 就像是人穿的衣服
js 就像是人做的动作
一.网页文件HTML的构成
1.对应规则的选择,就如同我们写python时#!/usr/bin/env python3.5 这么一段代码一样,在HTML我们要先声明选择哪个对应规则
<!DOCTYPE html>
2.<html></html> 整个结构的声明
3.在<html></html>体内声明脑子<head> </head>
4.在<html></html>体内声明身体<body> </body>
整体的范例如下:
<!DOCTYPE html> # 对应规则
<html lang="en"> # 整体html结构的声明,比喻成一个人
<head> # html的脑子的声明(就像人脑子,脑子里有哪些内容,你看不到,你能看到的是脑门,也就是标题),这里定义了整个html的一些设置参数,比如编码格式
</head>
<body> # html的肉体的声明,这里需要添加各种器官,比如手,脚,胸.在html中就是各种标签
</body>
</html>
二.HTML结构之 head 头部(这是官方叫法,虽然用脑子来形容更为贴切,但官方就是叫头部)可以定义哪些东西?
一些常用的或者说我们应该知道的:
1. 设置编码
<head>
<meta charset="UTF-8"> 设置编码,这种是设置编码的简化方式
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 设置编码,这种是普通方式,看起来比较复杂,我们就要做它设置编码的复杂方式,效果一样.
<meta http-equiv="Refresh" Content="30"> # 设置刷新时间
<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" /> # 设置刷新并跳转到www.baidu.com页面
<meta name="keywords" content="星际2,专访,拳力公司"> # 设置关键字
<meta name="description" content="博客园是一个面向开发者的知识分享社区"/> #设置描述文字
<meta http-equiv="X-UA-Compatiable" content="IE=EmulateIE7" /> # 设置以IE7的规则来渲染页面.但是一般情况下不指定,而是默认设置最新的模式.
<meta http-equiv="X-UA-Compatiable" content="IE=edge" /> # 设置默认以最新的模式来渲染html文件,即使你浏览器中选择了以IE7或者IE8来渲染此html文档,它也以最新的模式来渲染.
<title>HTML学习第一天</title> # 浏览器标签页显示
<link rel="icon" href="favicon.ico" > # 标签旁显示的小图标
<!--欠大家的四个配置说明-->
<!--1. css 文件-->
<!--2. css 代码块-->
<!--3. js 文件-->
<!--4. js 代码块-->
</head>
2. 刷新和跳转
我们知道在nginx中可以设置跳转,但是运维不知道页面也可以 做自动跳转的.同时也可以设置刷新
<meta http-equiv="Refresh" Content="30"> # 设置刷新时间
<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" /> # 设置刷新并跳转到www.baidu.com页面
3. 关键词
我们在百度里搜索关键字里时就是查找head头部设置的关键字信息匹配,所以这个关键字设置应该算很重要
<meta name="keywords" content="星际2,专访,拳力公司">
4. 描述
例如：cnblogs
<meta name="description" content="博客园是一个面向开发者的知识分享社区"/> #设置描述文字
5. X-UA-Compatible
<meta http-equiv="X-UA-Compatiable" content="IE=EmulateIE7" /> # 设置以IE7的规则来渲染页面.但是一般情况下不指定,而是默认设置最新的模式.
<meta http-equiv="X-UA-Compatiable" content="IE=edge" /> # 设置默认以最新的模式来渲染html文件,即使你浏览器中选择了以IE7或者IE8来渲染此html文档,它也以最新的模式来渲染.
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了统治地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE6版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对基于旧IE浏览器版本设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页
这里扩展一个知识点:
我们看<html></html>,<head> </head>,<body> </body>这些标签都是有开头<head>有结尾</head>,而<meta>只有开头没有结尾.
像这种<meta>没有结尾标签的html称之为自闭合标签.那么你会想,html会有多少种自闭合标签,这记起来得多复杂!!!有需要写闭合标签的,有的不需要.
其实不要担心,html中自闭合的没几个,不到10个常用的,会了这几个常用的99.99%的网站都能搞定.
除了上面5种<meta>属性设置在head头部中是常用的,还有两个标签也常用:
6. 标签
<title>Title</title> 这个就是我们在浏览器中显示的标签头
7. 图标
<link rel="icon" href="favicon.ico" > 这个就是标签旁边所显示的小图标
至此你以为掌握了上面7个常用的标签就OK了,错,还有4个最最常用的,比上面7个更重要,分别是:
8. css 文件
9. css 代码块
10. js 文件
11. jss 代码块
上面这四种配置先不讲,等学到css 和 js在一点一点说明白.
三 HTML标签之标签分类
标签的统一叫法:
1.标签
2.属性名 = "属性值"
<link rel="icon" href="favicon.ico" > # rel="icon"即 属性名 = "属性值"
学之前,先对标签进行分类:
标签一般分为两种：块级标签 和 行内标签(内联标签)
a、span、select,lable,input,form,img 等 行内
div、h1、p 等 块级标签
和符号
怎么查看一个标签属于块级标签还是行内标签,通过开发者界面,点元素,会发现点上去占一整行为块级标签.
常用标签:
<div></div> 在块级标签里最最常用的标签,这个标签什么东西都没有,它只是一个很纯的块级标签.正因为它太纯了,所以我们可以通过给它加css,来创造自定义格式的标签.
<span></span> 最行内标签里最最常用的标签. 和div一样,只是它不是块级标签,它是很纯的行内标签.
<a></a> 联接标签,常用
<p></p> 段落标签,常用
<h1></h1> 标题标签,常用
<h6></h6> 标题标签,常用
...
在body中除了标签,还有些常用符号:
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
只要记住一个"空格符号"
常用标签详解:
1. 标签的包含 一个标签可以包含其他标签,其他标签显示的范围受这个标签的属性设置限制.
<body>
<div style="200px;border: 1px solid red;">
<div>11111111111<br/>2222222222<br/>3333333333333</div>
<div>ssdfsdfsdfsdfsfsaasdfasdfjsfksdfljsdflksldkfjlsdkfjlsdfkjlsdfjlsdfksldfkjsldfjslfjsldfkjsldkfsldfkjsldfkjslf</div>
</div>
</body >
这段代码为了测试 标签可以包含的特性,但是实际测试下来,该自动换行的时候却没有换行,是不是我们的结论是错的呢.当然不是,是因为浏览器的原因,我们可以通过设置body的css来让他不管用什么浏览器,该换行的时候都换行,
把 <body> 添加样式后的代码如下:<body style="word-break: break-all">略</body>
同样 style="word-break: break-all"这个也可以加到 <div style="200px;border: 1px solid red; word-break: break-all"> 效果一样
2. <p></p> 段落标签,常用
3. <br></br> 行标签,常用
4. <a> </a>
超链接标签,特别重要,特别常用.
<a href="http://www.baidu.com"><p>百度</p></a> 这种写法在当前标签下进行跳转
<a href="http://www.baidu.com" target="_blank">百度</a> 这种写法在新标签进行跳转.
不仅可以跳转到网络地址,还可以跳转到本地文件,假设我们在当前目录下有一个文件s2.html,那么就可以写成:
<a href="s2.html" target="_blank">百度</a> 这种写法在新标签进行跳转.
还有一个重要的功能:锚.
我们在看小说的时候,有目录,点击目录就可以跳转到目录页面.在网页上就是用a标签的锚来做的.
例子:<a href="#t61" target="_blank">锚点</a>
我们看到 #t61 ,其中#是重中之重,#表示,一点击它当前的屏幕显示标签id等于t61的那个标签.
<a href="#tt" target="_blank">看第二章</a>
<div style="height: 2000px;第一章</div>
<div id='tt' style="height: 2000px;background-color: green">第二章</div> #这里要给id
ps : a标签不能被其他标签伪造,所以a标签一定要会.
标签的id就像人的身份证,id是不能重复的.
对上面的知识进行一次小结:
我们看到好多标签,而标签里又有好多 属性='属性值',那么我们会觉得,难道每一个标签都有自己的属性吗?
那么我们就顺下:
id,style,name所有标签都可以定义的属性
a,target href 特殊的标签a,target和href属性是a标签特有的,而div和p标签都没有的属性
img, title src
上面的内容暂时先这么纪录,接下来还有公共的属性,和特殊的标签
5. <img> 标签,自闭和标签
<img src="33333.jpg" > 同样可以定义id和syle
<img title="图片文件的说明" src="33333.jpg" > title属性是鼠标点到这个标签时显示的说明文字
img里面就这两个重要的.
可以通过设置style设置图片的像素
6. <h*></h*>标签 ,h1 - h6 标题标签,从大到小
7. <select> </select> 下拉框标签
普通用法:
<select name="" id=""> select中配合option标签配合使用
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
有滚动条的,可以显示多个的:
<select name="" id="" size="10"> select标签的size属性可以设置一次显示几个
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
有滚动条,且可以多选的例子:
<select name="" id="" size="10" multiple="multiple"> select标签 multiple属性添加后就可以多选了
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
给选项进行分组:
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
接下来我们来学习input系列的标签,大概有下面几个:(都是特别重要的!~!)
8. input:checkbox <input type="checkbox"> 复选框,小方框
9. input:radio <input type="radio"> 单选框,小圆圈
10. input:text <input type="text"> 文本输入框
11. input:password <input type="password"> 密码输入框
12. input:button <input type="button" value="文字"> 按钮,value值是按钮上的字,如"确认"
13. input:submit <input type="submit" value="sub"> 同上,也是按钮,有区别:
14. input:file <input type="file"> 浏览文件的按钮
这几个input标签,都是自闭合的.其实不用刻意去记,因为编辑器会默认补全,如果不是自闭和会自动加</xx>,如:<div></div>
而自闭和的 就在标签结束时加一个反斜杠如 <mata xxxx xxxx />
用法说明:
8. checkbox
9. radio
<p>男: <input name="gender" type="radio"></p>
<p>女: <input name="gender" type="radio"></p>
raido类型的input标签name属性有一个特性,如果name属性相同的raido类型的input标签互斥,只允许一个被选中.
所有的标签都可以定义name,但是在radio中有特殊的作用
10. text
11. password
12. button
13. submit
如果input标签不在 form标签里面,button和submit类型是一样的,如果在form标签中
14. file
15. <form> </form> 用来承载需要提交的数据的标签
如果页面有数据需要提交到后台,我们提交哪些数据,比如登陆,我们就只需要提交用户名和密码
一般情况下,我们从页面提交数据到后台,首先要把要提交的数据放到一个标签中,这个标签就是<form></form> ,而提交是不是要有一个确认按钮,那么就是input:submit和input:button
下面我们就看看这两个标签的区别
如:
<form action="http://www.baidu.com"> # 定义了action属性,是说你form标签里的内容要提交到哪里,这里就是提交到百度
<div> # 可以添加div标签,来修饰text,但是提交的内容只是text里的内容
主机名:<input type="text">
</div>
<input type="button" value="but提交"> # 测试发现,在form标签中,你点击"but提交"按钮没有反应,说明它只是一个按钮,没有提交的功能
<input type="submit" value="sub提交"> # 在form标签中,"sub提交" 具有提交表单的作用
</form>
那么问题来了,如果一个form中有很多提交的内容,那么比如有主机名,ip地址,端口,用户名.那提交到后台应该是什么格式,后台最方便识别.答案是字典.
那么怎样把提交的内容弄成字典呢?使用input标签里的name属性.
<form action="http://www.baidu.com">
<div>主机名:<input name='hostname' type="text"></div>
<div>IP地址:<input name="ip_addr" type="text"></div>
<div>端口:<input name="port" type="text"></div>
<div>用户名:<input name="user" type="text"></div>
<input type="button" value="but提交">
<input type="submit" value="sub提交">
</form>
上面所有的input标签都定义了name属性,当你一旦在页面上点击"sub提交"按钮,那么浏览器就把form标签里的input标签内容转换程字典格式,具体如下:
{
"hostname":"你输入的主机名",
"ip_addr":"你输入的IP地址",
"port":你输入的端口,
"user":"你输入的用户名"
}
16. textarea标签 多行输入框
<textarea>2222</textarea> 为多行文本框里默认是2222
那么文本框是不是也可以有默认值,有用value属性<input type='text' value="33333">
17. label标签,其实功能上没有卵用,我们用它 就是为了增加用户使用的时候的便利
相当于让一个文本和标签建立一个对应关系,点击文本就相当于点了标签.
比如单选标签, 如果不用label用户鼠标必须点到圆框内.
而使用了label,可以将 "性别男" 和后面的圆圈对应起来,即我鼠标点击到文本性别男的时候,后面的圆圈就被选上了.
那么看下代码是怎么实现的:
<label for="cb1">婚否</label>
<input id="cb1" type="checkbox">
用的就是 label标签的for属性,和input的id属性
18. html的列表ul ol dl
<h2>ul演示</h2>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<h2>ol演示</h2>
<ol>
<li>wwwww</li>
<li>oooooo</li>
</ol>
<h2>dl演示</h2>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dd>内容2</dd>
<dd>内容2</dd>
</dl>
网页上显示:
ul演示
1111
2222
ol演示
1 wwwww
2 oooooo
dl演示
标题1
内容1
内容1
内容1
标题2
内容2
内容2
内容2
19. table标签 是html中非常常用的,很重要
<table border='1'> 给表格加上边框border='1'
<thead> 表头越难过thead标签
<tr> 行用tr标签
<th>第一列</th> 表头中的列用th标签
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td> 表身中的列用td标签
<td>h2</td>
<td>h3</td>
</tr>
<tr>
<td>hh1</td>
<td>hh2</td>
<td>hh3</td>
</tr>
</tbody>
</table>
html中的table就像是office excel,所以excel能做的合并单元格,table标签应该也可以做到.
行上合并单元格
<tbody>
<tr>
<td colspan="2">h1,h2</td> 属性colspan='2'说明此行在水平方向占两列
<td>h3</td>
</tr>
<tr>
<td rowspan="2">hh1,hhh1</td> 属性rowspan="2"说明此列在垂直方向占两行
<td>hh2</td>
<td>hh3</td>
</tr>
<tr>
<td>hhh2</td>
<td>hhh3</td>
</tr>
</tbody>
table 我们就暂时记住这两个.还有一个,就是不声明thead和tbody标签.直接写行
<table>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
</tr>
</table>
这个是简单写法,老师推荐使用标准写法,这样方便查看.
20. fieldset标签,这是最后一个要讲的常用标签
此标签的功能就是有个框,可以在边框上写字,其他没什么作用,并且也不常用,但是要知道.
<fieldset>
<legend>登陆</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
总结:
1.标签
上面的常用标签,重要程度有几个最常用的,并且我们在前端提交数据的内容也就是这些数据
input系列
select
textarea
form
接着是我们布局要会的:
div
span
还有三个常用的:
a
img
table
以上这9个是必须要会的.
H,ul,li,ol,dl,p,br,hr 知道就行
2.属性
公共属性: id,name(一般只是提交数据),style,css
各个标签的特有属性:
input:text,password
<input type='text' values='123'>
* values
input:button,submit
<input type='submit' values='内容'>
* values
input:checkbox
<input type='checkbox' checked='checked'> 默认选中
* checked
input:radio
<input name='内容' type='raido' /> name属性互斥
<input name='内容' type='raido' />
* checked
* name
input:file
<input type='file'>
如果想要题交文件,需要在其所在的form标签里添加特殊的两个属性 enctype='multipart/form-data' method='POST'
也就是说上传文件的时候不是对自己标签有要求,而是对form标签有要求.
如:
<form action='....' enctype='multipart/form-data' method='POST'> 这两个属性的意思是把文件进行分块上传,并且是以POST方式
<input type='text'/>
<input type='file'/>
</form>
================================================
form
<form action='' enctype='multipart/form-data' method='POST'>
要提交的所有标签
</form>
* action
* enctype
* method
textarea
<textarea name='xxx'></textarea>
=================================================
select
<select>
<option value='9' selected='selected'>ff</option> selected属性默认选择哪个值
</select>
* selected
* option,value,提交数据时,value
value属性,当select在form标签中,如果你选择ff,点击提交,提交到后台的不是ff而是对应的value='9'
table:
table,
thead,tbody
tr:行
td:列
合并单元格,colspan,rowspan