前端知识

html    超文本标记语言  前端开发语言
开发一般分为前端开发和后台开发
后台开发主要是编写代码逻辑
前端开发主要是UI界面的显示

前端开发（UI）是写页面的样式、页面排版
js  --> javascript    一种直译式脚本语言
css   层叠样式表  cascading style sheets
HTML 超文本标记语言

普通文件只能记录文字
超文本是除了记录文字，还可以记录图片、链接、视频等
标记：一个人给他取个绰号
HTML 中标记体现在标签上面，里面有不同的标签，分别代表不同的意思
例如：a 标签就是表示链接，img 标签表示图片
F12     开发者工具
HBuilder html 开发者    这个工具的主要作用就是编写html 的客户端工具
客户端的使用：先点击创建一个web 项目，填写项目名称，更改保存目录，创建后找到index.html 双击
html 基本格式
1、html 文件默认是以    .html    结尾
2、html 文件基本结构由 html、head、body 组成
3、标签一般都是成对出现，也有一些标签不是成对出现
4、文本，标签可以写在同一行，文本也没有固定的宽度要求

HBuilder 基本操作
执行是 Ctrl+c
保存是 Ctrl+s
注释是 Ctrl+/
Tab 缩进   选中缩进的内容，可以整体缩进
shift+Tab  向前缩进
[img]file:///E:\2345Downloads\1041432756\Image\C2C\IG6[OER%OGPX[}YY`D7{I5F.png[/img]

file:///E:\2345Downloads\1041432756\Image\C2C\3JXBS35SMLXQ5F7NG$F(JC1.png

图片标签<img src="" alt=""/>
alt 后面可以加文字，鼠标移动过去可以显示
引用图片2种方式：
1、直接引用网上图片资源      <img src="图片网址" alt=""/>
2、引用本地图片 在img中      <img src="本地图片路径" alt=""/>
注意点：在引用本地图片时需要注意图片所在的位置
ⅰ、  ./  :表示当前位置
ⅱ、 ../  :表示上一级目录
ⅲ、 ../..  :表示上上一级目录
ⅳ、  谷歌浏览器不支持 “alt”
ⅴ、
ⅵ、


1、a 标签点击后覆盖原有页面
<a href="[img]file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\[5UQ[BL(6~BS2JV6W}N6[%S.png[/img]http://www.baidu.com">百度一下，你就知道</a>
2、加上target 标签会重新打开一个页面
<a href="[img]file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\8LDO48C$8@[GWU0353$FOVS.png[/img]http://www.jd.com" target=""></a>
3、href 后面加一个#表示死链接
<a href="#"></a>
4、a标签里面加img 图片标签，在web页面上点击图片就会进入网站
<a href="[img]file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\8LDO48C$8@[GWU0353$FOVS.png[/img]http://www.jd.com"><img src="img/(图片全名)" title="这个图片是个链接“/></a>
5、有序列表
<ol></ol>   ===>默认阿拉伯数字升序排列
<ol type="a"></ol>  ===>以英文字母序号排序
6、无序列表
<ul></ul>
7、表格标签
border 表示表格的边框的粗细
align 表示控制表格在网页的位置（left、right、center）
cellpadding 表示表格与内容之间的距离
cellspacing 表示单元格与单元格之间的距离
<table border="1" align="center" cellpadding="10" cellspacing="5" with="200" height="50">第一行 tr 表示行 td 表示列 th 表示表头 是td的加强版会自动居中且加粗</table>
<tr><td>姓名</td><td>班级</td></tr>   (第二行）<tr><th>小邓</th><th>1910</th></tr>（第三行）<tr></tr>
file:///E:\2345Downloads\1041432756\Image\C2C\FZ5I{VIPR4$8CA$@7F%7IWV.png
8、表示跨行
<tr><td>姓名</td><td>薪资</td></tr>
<tr><td>小邓</td><td rowspan="2">12000</td></tr>
file:///E:\2345Downloads\1041432756\Image\C2C\POCC__CY}LZ}V17TV2K%%KO.png
9、表格的跨列
<table border="1" cellpadding="30"
cellspacing="5" align="center">
<!--第一行-->
<tr><td colspan="4" align="center">广州多测师</td></tr>
<tr><td>姓名</td><td>工资</td><td>年龄</td><td>班级</td></tr>
<!--第二行？-->
<tr><td>小邓</td><td>14000</td><td>23</td><td rowspan="2">1910班</td></tr>
<!--第三行？-->
<tr><td>小黄</td><td>15000</td><td>25</td></tr></table>
10、表单标签===>主要用来收集用户输入的信息：
例如：登入、注册、选择商品等
form是一个表单，post表示接口的请求方式
<form action="[img]file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\8LDO48C$8@[GWU0353$FOVS.png[/img]http://www.jd.com" method="post">
<p>用户名：<input type="text" id="username" name="" value="" /></p>
<p>密码：<input type="password" id="userpwd" name="" value="" /></p>
checked表示默认值默认选择男 name必须添加上sex，不然男女性别都可以选择会出现bug,radio表示单选框
<input type="radio" id="" name="sex" value="" checked=""/>男
<input type="radio" id="" name="sex" value="" />女</form>
checkbox表示复选框，支持同时选择多个
<p><input type="checkbox" id="" name="" value="" />广州多测师大学
<input type="checkbox" id="" name="" value="" />深圳多测师大学
<input type="checkbox" id="" name="" value="" />上海多测师大学
<input type="checkbox" id="" name="" value="" />北京多测师大学</p>

<p><select name="" id=""><option value="">请选择您要就读的学校</option>
<option value="">请选择您要就读的学校</option>
<option value="">广州多测师大学</option>
<option value="">深圳多测师大学</option>
<option value="">上海多测师大学</option>
<option value="">北京多测师大学</option>
<option value="">北京大学</option></select></p>

textarea 文本输入框，rows高度，cols宽度
<p><br>自我介绍：</br><textarea= name="" rows="10" cols="30"></p>

上传文件
<p>请选择您要上传的文件：<br/><input type="file" id="" value=""/></p>

button表示按钮
<p><a href="[img]file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\[5UQ[BL(6~BS2JV6W}N6[%S.png[/img]http://www.baidu.com" id="" name="" value="百度二下"/></a></p>

submit会把所有页面填写的信息以post请求的方式提交到前面定义的post—[img]file:///C:\Users\Administrator\AppData\Roaming\Tencent\QQTempSys\8LDO48C$8@[GWU0353$FOVS.png[/img]http://www.jd.com这个网址
reset表示把页面所有填写的信息进行重置
<p><input type="submit" id="" name="" value="提交"/>
<input type="reset" id="" name="" value="重置"/></p>

11、css 层叠样式表
在网页制作是采用层叠样式表的技术，可以更加精确有效的对页面进行布局、字体
颜色、背景等加以控制
css的使用方法：
（1）在标签中添加style属性，style 就是css样式代码
（2）在head 中加style 样式，作用于所有标记的标签
（3）通过外链的方式
第一步：首先创建一个css文件
第二步：在html项目文件中引用第一步新建的css文件，用<link rel="stylesheet" type="text/css" href="文件名的路径”（和插入图片一样）/>
三种方式的优先级：标签中样式优先级最高>head中style属性和外链方式谁出现在最后面就以谁为主

css层叠样式表
i、在body中style属性中添加
ii、body中所有em标签字体颜色都会被作用到
iii、通过外链的方式来控制标签中文本的颜色

12、id选择器
id选择器前面加一个“#”去调用
可以把文件内容比喻一个人，那么id就是这个人的身份证，class就是这个人的家庭住址
<p id='xiaowang' class="yy">广州市多测师技术有限公司</p>
13、class选择器
class选择器前加一个"."调用
14、标签选择器
file:///E:\2345Downloads\1041432756\Image\C2C\@UOW2_FV(%]ZLOJACI34B]6.jpg
15、组合选择器
file:///E:\2345Downloads\1041432756\Image\C2C\$WU3)COM~0]ZSCFHHUKU%ZC.jpg
16、伪类选择器
file:///E:\2345Downloads\1041432756\Image\C2C\XGAB0L}GX`C]0130{2CYEOO.jpg
17、后代选择器
file:///E:\2345Downloads\1041432756\Image\C2C\1H}EZX@LC]%AVQZ3KY9XGTK.jpg
18、字体样式
[img]file:///E:\2345Downloads\1041432756\Image\C2C\V0ZJ15R_4Y@CYE[X18`P%N2.png[/img]