前端HTML基础
首先我们要知道HTML 是用来描述网页的一种语言。html是超文本标记语言(Hyper Text Markup Language)的缩写。HTML不是一种编程语言,而是一种标记语言 (markup language)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
网页开发概述
- 以网页技术来说，大致可以分为静态网页和动态网页。
- HTML （HyperText Makeup Language）超文本标记语 言，目前版本为html5。
认识HTML标记
- HTML标记
<标记名称 属性1=”值1” 属性2=”值2” …>组件资料</标记名称> *标记不区分大小写，属性值可以不加引号
- HTML结构
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> 主体内容 </body> </html>
网页的基本组成部分:
1.文档类型
<!doctype html>
建议浏览器使用html5的内核标准来阅读并解析后文
2.文档内容区
<html></html>
3.文档头部内容(对体部内容的提前声明)
<head></head>
4.文档标题
<title></title>
百度等搜索引擎收录起着很大的作用
5.建议浏览器在阅读本文档时以utf-8的编码来阅读
<meta charset='utf-8'>
6.文档体部内容
<body></body>
html5标签注释:
<!-- 代码注释 -->
html颜色:
1 1.英文 2 red 3 4 2.十六进制 5 #ff0000 6 #f00 7 8 3.十进制 9 rgb(255,0,0); 10 11 4.十进制 12 rgba(255,0,0,0.5); 13 14 常用的html5颜色(16进制): 15 1.白色 16 #ffffff 17 18 2.黑色 19 #000000 20 21 3.红色 22 #ff0000
详细理解body主体中各个标签
1、<p></p>段落标签，让内容成段展示
2、标题标签，成段展示，独占一行，加粗字体，更改字体大小（从 1 到 6 依次减小）
<h1>从大到小</h1> <h2>从大到小</h2> <h3>从大到小</h3> <h4>从大到小</h4> <h5>从大到小</h5> <h6>从大到小</h6>
3、特殊的文字样式
<b></b> 粗体 <i></i> 斜体 <u></u> 下划线 <s></s> 删除线 <sup></sup> 上标 <sub></sub> 下标 <em></em> 斜体 <strong></strong> 粗体 <del></del> 这是一个中划线 <address></address>这是一个地址标签。可以用斜体+成段展示模拟
4、无意义块标签和行标签:
1.div
2.span
这两个标签是为了成块展示，规格化，这两个就是容器，其功能 1：分块明确，让整个页面更加结构化； 功能 2：捆绑操作的作用。
5、html中标签实体:
1 < 小于的意思，less than，html编码是< 2 > 大于的意思，great than，html 编码是> 3 空格 4 << « 5 >> » 6 x ×
6、<br>换行符，就是为了换行，还有就是br是单标签。
7、<hr>水平线，也是单标签。
8、文字列表设计
1)无序列表：unorder list 只有 type = ""这一个属性可以改
<ul type="square"> <li>项目符号</li> <li>项目符号</li> <li>项目符号</li> </ul> type的属性值（默认为实心圆disc）有： ircle 空心圆 disc 实心圆 square 实心方块
2)有序列表:
1 <ol> 2 <li>项目符号</li> 3 <li>项目符号</li> 4 <li>项目符号</li> 5 </ol> 6 7 type的属性值（默认为数字格式123）有：1,A,a,I,i 8 可以设置编号的开始序号 start=n（只能是数字）
9、图像
图片标记：<img src="图片路径" />
图片属性：高度：height； 宽度：width； 边框宽度：border； 优先读低分辨率图：lowsrc； 文字标注：alt；鼠标放在图片上时显示说明文字：title
绝对路径： http://www.cnblogs.com/ 或 D:\Downloads
相对路径: ../../a/b.jpg
/表示网站根目录 ~/表示当前应用程序目录
../是上级目录 ./当前目录下
10、超链接标记
标签的功能： 1）超链接 2）锚点 3）打电话，发邮件 4）协议限定符
1 #超链接 2 <a href="http://www.baidu.com" target="_blank">百度</a> 3 <a href="#">百度</a> 4 <a href="javascript:;">百度</a> 5 说明：（1）如果在链接中写网址时必须加上http://，不能直接写www.baidu.com。 6 （2）#表示打开一个空的页面。 7 （3）javascript:;它表示一个真正的空链接。 8 （4）target的属性值有：_blank在单独页面中打开；_parent是在父级窗口打开；_self是在本窗口打开；_top是在上级窗口打开。 9 10 #锚点 11 <div id="link1"> 内容区</div> 12 <a href=“#link1”>点一下，直接到达id为link1的div中</a> 13 14 #打电话发邮件 15 <a href="tel:xxx的电话号码">xxx</a> 16 <a href="mailto:xxx的邮箱">xxx</a> 17 18 #协议限定 19 <a href="javascript:alert('aaa')">点击一下</a>
11、表格
1 <table> 2 <caption>表格标题</caption> 3 <tr> 4 <th>表头1</th> 5 <th>表头2</th> 6 </tr> 7 <tr> 8 <td>列表1</td> 9 <td>列表2</td> 10 </tr> 11 </table> 12 说明：<caption></caption>是表格标题标记，它的属性（如果不写默认显示在表格上边）有align：top,left,right,bottom。 13 <tr></tr>是行。 14 <th></th>是表头标题列，默认字体加粗居中显示 15 <td></td>是数据列。 16 (2)、表格属性 17 border(边框），width(表格宽度），height(表格高度），align(对齐方式left,right,center，bordercolor(边框颜色），bgcolor(背景颜色），cellpadding(单元格中的文字距边框的距离，上边和左边），cellspacing(单元格之间的间距，也就是外边距）， 18 行列属性： 19 高：height； 框颜色：bordercolor； 背景色：bgcolor； 水平对齐：align； 垂直对齐：valign 20 (3）跨行跨列： 21 合并行：rowspan＝"3" 22 合并列：colspan="2"
12、form表单
表单的动作Action:"" 好比写信，这里写的就是收信人的地址 比如http://localhost/index.php
Method:get或post 提交表单的发送方式
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。Post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB， IIS5中为100KB。
5. get安全性非常低，post安全性较高
1 表单标签: 2 <form action='login.php' target='_blank'></form> 3 4 文本框: 5 <input type='text' name='username' value='user1'> 6 7 密码框: 8 <input type='password' name='password' value='123'> 9 10 提交按钮: 11 <input type='submit' value='Ok'> 12 13 重置按钮: 14 <input type='reset' value='Cancel'> 15 16 表单占位: 17 <input type='text' placeholder='请输入姓名:'> 18 19 表单只读属性: 20 <input type='text' readonly> 21 22 表单禁用属性: 23 <input type='text' disabled> 24 25 文本框宽度: 26 <input type='text' size='5'> 27 28 文本框最大长度: 29 <input type='text' maxlength='5'> 30 31 单选框: 32 <label> 33 <input type='radio' name='love' value='linux'> linux 34 </label> 35 <label> 36 <input type='radio' name='love' value='php'> php 37 </label> 38 39 多选框: 40 <label> 41 <input type='checkbox' name='love[]' value='linux'> linux 42 </label> 43 <label> 44 <input type='checkbox' name='love[]' value='php'> php 45 </label> 46 47 下拉菜单: 48 <select name='love'> 49 <option value='linux'>linux</option> 50 <option value='linux'>linux</option> 51 </select> 52 53 多选下拉菜单: 54 <select name='love[]' size='5' multiple> 55 <option value='linux'>linux</option> 56 <option value='linux'>linux</option> 57 </select> 58 59 文本域: 60 <style> 61 textarea{ 62 resize:none; 63 } 64 </style> 65 <textarea name='mess'></textarea> 66 67 提交按钮: 68 <input type="submit" value='Ok'> 69 70 取消按钮: 71 <input type="reset" value='Cancel'> 72 73 文件上传框: 74 <input type="file" name='img'> 75 76 图片按钮: 77 <input type="image" src='submit.gif' width='200px'> 78 79 隐藏框: 80 <input type="hidden" name="id" value='10'> 81 82 按钮: 83 <input type="button" value="不提交表单"> 84 <button>提交表单</button>
提醒：如果是需要提交表单那么就要 在input中写入name属性 不然后端找不到数据
<input type="text" name='username' value='jack'> <input type="text" name='age' value='18'> 提交后 http://localhost/index.php?username=jack&age=18
浏览器
主流浏览器和内核，主流浏览器是有一定市场份额，并且有自己独立研发的内核 浏览器分 shell+内核
| 主流浏览器（必须有独立内核）市场份额大于 3% | 内核 |
| IE | trident |
| Friefox | Gecko |
| Google chrome | Webkit/blink |
| Safari | Webkit |
| Opera | presto |
