前端开发
html 概述和基本结构
两种 xhtml 1.0 和 html5
xhtml 1.0是html5之前的一个常用版本，目前很多网站都还在用该版本
用sublime text创建方法：html:xt + tab
html5 是向下兼容的，sublime text创建方法 html:5 + tab 或者！ + tab
两种文档的区别
1. 文档声明和编码声明
2. html5新增了标签元素和元素属性
html文档的规范
xhtml制定的文档规范
1. 所有的标签必须小写
2. 所有的属性必须双引号括起来
3. 所有标签必须闭合 成对标签成对出现，单个标签最好<br />而不是<br>
4. img必须加alt属性(针对图片的描述) （盲人、爬虫等特殊情况需要）
<img src="images/111.ipg" alt="风景图">注释
<!-- 注释的格式感叹号 --><!-- 成对出现的标签 -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>
<!-- 单个出现的标签 -->
<br />
<img src="..." />
<input type="..." />
<!-- 标签之间的嵌套 -->
<p>
<span>...</span>
<a href="...">...</a>
</p>
<div>
<h3>...</h3>
<div>
<span>...</span>
<p>...</p>
</div>
</div>标题标签
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引
段落标签
<p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
</p>
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
换行标签
在代码的段落中插入<br />来强制换行
常用的字符实体
三个 空格 大于号>(greater than) 小于号<(less than)
html块
1、div标签 块元素，表示一块内容，没有具体的语义。
2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧
-
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
-
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html图像
<body>
<img src="头像.jpg" alt="头像">
<img src="C:\Users\Lenovo\Desktop\头像.jpg" alt="头像">
</body>html链接
<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。
<body>
<!-- 跳转到其他网页，网页标题 -->
<a href="http://baidu.com/">宝宝</a>
<a href="http://www.biodiscover.com">生物探索</a>
<a href="http://www.baidu.com">
<img src="images/bg.jpg" alt="http">
</a>
<!-- #缺省值，也可以链接到页面底部 -->
<a href="#">新闻标题</a>
<!-- 不做任何操作 -->
<a href="javascript:;"></a>>
</body>页面内部跳转
<h1 id="biaoti04">标题四</h1>
<a href="#biaoti01">标题一</a>
<a href="#biaoti02">标题二</a>
<a href="#biaoti03">标题三</a>
<a href="#biaoti04">标题四</a>
<p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
<!-- target = "__blank"跳转到新页面，默认"__self"自身跳转 -->
<a href="http://www.baidu.com" title="链接到百度" target="__blank">百度网</a>html列表
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现
无序列表
定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释
<h3>有序列表</h3>
<!-- ol>li*5 -->
<ol>
<li>学习html</li>
<li>学习css</li>
<li>学习JavaScript</li>
</ol>
<h3>无序列表</h3>
<!-- ul>(li>a)*5 ctrl鼠标左键向下连-->
<ul>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
</ul>
<h3>定义列表</h3>
<!-- dl>(dt+dd)*3 tab -->
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>效果：
html表格
table常用标签
table标签：声明一个表格 tr标签：定义表格中的一行 td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性：
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
6、colspan 设置单元格水平合并
7、rowspan 设置单元格垂直合并
传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
1、快速制作用于演示的html页面
2、商业推广EDM制作(广告邮件)
表格常用样式属性
border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格
<h3>产品列表</h3>
<!-- table标签声明表格，border定义边框，宽和高 -->
<table border="1" width="500" height="300">
<!-- tr定义一行row th定义表头一行中的单元格head? td普通单元格 -->
<!-- valign内容垂直对齐方式top/middle/bottom -->
<!-- align水平对齐方式left/center/right -->
<tr>
<th valign="middle">序号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>产品数量</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">苹果</td>
<td>¥5.00</td>
<td>1000</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">橘子</td>
<td>¥4.00</td>
<td>1000</td>
</tr>
</table>
<h3>个人简历表</h3>
<!-- table>(tr>td*5)*6 -->
<table border="1" width="600" height="300">
<tr>
<!-- colspan跨5列，删除其他4列 -->
<th colspan="5" align="left">基本情况</th>
</tr>
<tr>
<td width="18%">姓名</td>
<td width="18%"></td>
<td width="18%">性别</td>
<td width="18%"></td>
<!-- 跨5行，删除其他几行的 -->
<td rowspan="5" width="28%"><img src="./头像.jpg" alt="人物图片"></td>
</tr>
<tr>
<td>民族</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>电子邮箱</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- cellpadding定义单元格内容与边框的距离，cellsapcing单元格之间的距离>
<table border="1" cellpadding="10" cellspacing="10">效果
简历布局
<!-- 制作表格1行4列 -->
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<!-- 第一列人物简要信息，插入表格4行2列 -->
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="260" border="0" cellpadding="0" cellspacing="0" align="center">
<tr height="100">
<td></td>
<td></td>
</tr>
<tr>
<td width="230" align="right"><img src="images/1.jpg" alt="人物图片">></td>
<td width="30"></td>
</tr>
<tr>
<td align="right">王金亮</td>
<td></td>
</tr>
<tr>
<td align="right">1781687xxxx</td>
<td></td>
</tr>
<tr>
<td align="right">wjl31802@126.com</td>
<td></td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<!-- 第三列resume图片 -->
<table border="0" cellpadding="0" cellspacing="0" width="480">
<tr height="75">
<td></td>
</tr>
<tr>
<td><img src="images/resume1.png"></td>
</tr>
</table>
<!-- hr标签画一条线 -->
<hr />
<!-- 表格6行两列 -->
<table border="0" cellpadding="0" cellspacing="0" width="480" height="180">
<tr height="30">
<th colspan="2" align="left"><b>个人基本情况</b></th>
</tr>
<tr>
<td width="50%">姓名：王金亮</td>
<td width="50%">籍贯：河南焦作</td>
</tr>
<tr>
<td>性别：男</td>
<td>身高：170cm</td>
</tr>
<tr>
<td>民族：汉</td>
<td>体重：70kg</td>
</tr>
<tr>
<td>出生日期：1991.11.17</td>
<td>电话：1781687xxxx</td>
</tr>
<tr>
<td>专业：植物保护</td>
<td>现居住地：四川成都</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>效果
<h3>用户注册</h3>
<!-- 表单整体用form标签包起来 action属性定义表单数据提交的地址，
method属性定义提交的方式。 method默认get提交，安全性差，post提交在http协议里，安全性高
-->
<form action="http:www.itcast.com" method="post">
<div>
<!-- label标签定义表单控件的文字标注，input类型为text定义了
一个单行文本输入框 -->
<!-- 为了提高用户体验，lable for="id" -->
<label for="username">用户名：</label>
<input type="text" name="username" id="username">
</div>
<!-- br强制换行 -->
<br>
<br>
<div>
<!-- 用户体验 lable for="id" -->
<label for="pwd">密码：</label>
<!-- input类型为password定义了一个密码输入框 -->
<input type="password" name="pwd" id="pwd">
</div>
<br>
<br>
<div>
<!-- input类型为radio定义了单选框 -->
<label>性别：</label>
<!-- 用户体验 lable for="id" -->
<!-- 性别可以加value="0"，value="1",存到后台比较方便 -->
<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
</div>
<div>
<!-- input类型为checkbox定义了多选框 -->
<label>爱好：</label>
<input type="checkbox" name="like">游戏
<input type="checkbox" name="like">逛街
<input type="checkbox" name="like">睡觉
</div>
<br>
<br>
<div>
<label>籍贯：</label>
<!-- select和option定义下拉框和选项 -->
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河南</option>
<option>四川</option>
</select>
</div>
<br>
<br>
<div>
<!-- input类型为file定义上传文件或上传照片 -->
<label>照片：</label>
<input type="file" name="">
</div>
<br>
<br>
<div>
<!-- textarea定义多行文本的描述 -->
<label>个人描述：</label>
<textarea></textarea>
</div>
<br>
<!-- input类型为submit定义提交按钮 -->
<!-- hidden不在页面显示，帮我们提交数据，从数据库读数据过来，有些数据不用再页面上显示，跟用户在页面写的数据一起传回去 -->
<input type="hidden" name="hid" value="10000">
<input type="submit" name="提交">
<!-- 点击图片也可以提交，但有时会出现bug，向服务器提交两次 -->
<!-- input type="image" name="" src="image/new.png" -->
<input type="reset" name="重置">
<input type="button" name="按钮">
<input type="hidden" name="">
</form>效果：
html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条
<!-- 让链接和窗口关联起来，name="aaa", 链接的target="aaa" -->
<a href="http:www.baidu.com" target="myframe">百度网</a>
<a href="http:www.itcast.com" target="myframe">传智播客</a>
<a href="http:www.qq.com" target="myframe">腾讯网</a><br />
<!-- iframe创建行内框架，scr属性定义地址，frameborder属性定义边框，
scrolling属性定义是否有滚动条 width,height宽高-->
<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no" name="myframe"></iframe>
<iframe src="009html列表.html" width="900" height="500" frameborder="0" scrolling="no"></iframe>效果
