前段时间正式开始踏上我的全栈开发工程师之路,为了实现这一目标也为了以后更好的工作,决定重新学习一遍前端开发的基本知识,所谓基础不牢,地动山摇,对于程序猿来讲打好基础是非常重要的。因为之前接触并学习过前端开发的缘故,由于时间过于长久很多东西也已遗忘,这一次学习这部分知识的时候速度会加快一点,并对一些遗忘的知识和重要的知识点做一些笔记,还是那句话好记性不如烂笔头,相信做笔记可以加深自己的印象和理解。
1、浏览器内核
浏览器内核分为渲染引擎和JS引擎两部分,渲染引擎负责取得网页的内容包括HTML、XML等格式的内容并整理讯息;
js引擎负责解析JavaScript,执行js语言,实现网页动态效果等。
如今使用的主流浏览器都使用了不同的内核,这也是导致他们性能和速度不同的主要因素,例如IE浏览器内核为Trident,Firefox内核为Geeko,苹果浏览器Safari内核为webkit,谷歌浏览器Chrome内核为blink。
2、Web标准
- 结构标准:对网页元素进行整理和分类,包括HTML和XML;
- 样式标准:设置网页元素的版式,颜色大小等样式,主要指css;
- 行为标准:使用js进行网页模型的定义和交互的编写,包括DOM和ECMAscript两部分;
3、常用标签和属性
单标签: 直线<hr /> 换行 <br /> 图片 <img />
设置整体链接的打开状态 <base target= "_blank" /> //另外启动新的窗口
链接标签: <herf = "链接地址" />
锚点定位: <a id = # > <herf = "#" />
4、无序列表:
<ul>
<li> liebiao1 </ li>
<li> liebiao2 </ li>
</ ul>
有序列表:
<ol>
<li> zhongguo </ li>
<li> meiguo </ li>
</ ol>
自定义列表:
<dl>
<dt> beijing </ dt>
<dt> changping </ dt>
</ dt>
5、表格
<table width = "500" height = "300" border = "1" align = "center">
<caption> 表格的标题 </ caption> <!-- 表格的标题 -->
<thead> <!-- 表头结构 -->
<tr> <!-- 一行 -->
<th> 单元格内的文字 </ th> <!--一列 表头标签 -->
<th> 单元格内的文字 </ th>
<th> 单元格内的文字 </ th>
</ tr>
</ thead>
<tbody> <!-- 表格主体 -->
<tr>
<td> 单元格内的文字 </ td>
<td> 单元格内的文字 </ td>
<td rowspan = "2"> 单元格内的文字 </ td> <!-- 跨行合并 -->
</ tr>
//合并单元格
<tr>
<td> 单元格内的文字 </ td>
<td> 单元格内的文字 </ td>
</ tr>
</ tbody>
</ table>
表格属性: border:设置表格的边框
cellspacing:边框的宽度
cellpadding:内容与边框的间距
表头标签:<th> </ th> 替换第一行中的<td> </ td>标签
表格结构:<thead> </ thead>
<tbody> </ tbody>
合并单元格:跨行合并:rowspan = "2";
跨列合并:colspan = "2"; 合并之后要删除合并掉的单元格
6、表单和表单域
input控件的用法:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</ head>
<body>
<form action="xxx.php" method="post" name="usermessage"> <!--表单域-->
<!--input标签,这也是一个单标签-->
<lable>用户名:<input type = "text" value = "用户名" /> </lable> <br />
密 码:<input type = "password" maxlength="6" /> <br />
性 别:
<input type = "radio" name="sex" checked = "checked" /> 女
<input type = "radio" name="sex" /> 男 </ br>
<!--单选框 如果是一组,通过相同的name值来实现-->
爱 好:<input type = "checkbox" name="hobby" /> 足球
<input type = "checkbox" name="hobby" /> 篮球
<input type = "checkbox" name="hobby" /> 乒乓球
搜 索:<input type = "button" value="搜索啥" /> <!--普通按钮--> <br />
<input type = "submit" value="提交表单" />
<input type = "reset" value="重置表单" /> <br />
<input type = "image" src=".img" /> <!--图像按钮--> <br />
上传文件:
<input type = "file" multiple /> <!--文件按钮--> <br />
</form>
留言板:
<textarea cols="每行中的字符数" rows="显示的行数" > 文本内容 </textarea>
下拉菜单:
<select>
<option>点击选择您的城市</option>
<option>北京</option>
<option>上海</option>
<option>福州</option>
</select>
</form>
</body>
</html>
7、 lable标签:
用于绑定一个表单元素,当点击lable标签时被绑定的元素获得输入焦点;
textarea文本域
下拉菜单 <select></select>
表单域 <form> </form>
8、HTML5新标签和新增表单属性
header footer nav:导航栏链接 section:定义区域 aside:侧边,定义其所处内容外的内容
datalist:用于输入框中快速选择,与input建立连接
fieldset:可将表单内的相关元素分组打包
placeholder:占位符,当用户输入时里面的文字消失
autofocus:input元素自动获得输入焦点;
multiple:多文件上传;
autocomplete:是否自动补全(1、首先要提交表单 2、表单要有名字)
required:不能为空内容;
accesskey:规定激活元素的快捷键,采用alt+字母的形式。
9、表单综合案例——学生档案
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</ head>
<body>
<form action="xxx.php" method="post" name="usermessage"> <!--表单域-->
<filedset>
<legend>学生档案 </legend>
<lable>姓名:<input type="text" palceholder="请输入姓名" /> </lable> <br />
<lable>手机号:<input type="tel" /> </lable> <br />
<lable>邮箱:<input type="emil" /> </lable> <br />
<lable>所属学院:<input type="text" palceholder="请选择学院" list="xueyuan"/> </lable> <br />
<datalist id="xueyuan">
<option>java</option>
<option>php</option>
<option>js</option>
</datalist>
<lable>出生日期:<input type="data" /> </lable> <br />
<lable>成绩:<input type="number" /> </lable> <br />
<lable>毕业时间:<input type="data" /> </lable> <br />
<input type = "submit" value="提交表单" />
<input type = "reset" value="重置表单" />
</filedset>
</form>
</body>
</html>
10、引入视频和插入音频、播放视频
<!--embed插入多种格式的视频-->
<embed src="www.xxx.com" allowfullscernn="true" width height /> </embed>
<!-- 插入音频 -->
<audio src="bg.mp3" autoplay controls loop="1" /> </audio>
<!-- 播放视频 多种格式的插入-->
<vidoe src="video.mp4" autoplay controls /> </ video>
<vidoe autoplay controls />
<source src="video.mpeg4" />
<source src="video.mp4" />
</video>