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的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。 与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，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="width: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="width: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
时间： 2024-08-29 07:35:37