关键词：
Web前端
Web前端基础
HTML：是一种编程语言，意思为“扩展标记语言”，可以简单的理解为一个“毛坯房子”
CSS：是层叠样式表，是一种技术，其主要目的是为了帮助美化HTML页面的，可以简单的理解为“装修过的房子”
JS：是一种编程语言，起作用是帮助美化国的页面使得其更加只能，更加人性化，可以简单的理解为“智能家居房”
Jquery: 是js封装后的一个组件，可以用更加简洁的代码使得页面更加美化更加智能更加人性化通用性更强，可以简单的理解为“微型智能家居助手”
HBUlider:是基于eclipse用java开发一款软件，所以在运行的时候要有java的环境，（但是pycharm安装的时候默认是打上勾（自动安装且配置了环境变量）的所以就避免了）
HTML
HTML：超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等 ）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
简而言之：
1.就是一种编写网页的语言
2.且是运行在浏览器端的
3.且是解释（是由浏览器自动解释的）执行的
2.网页的基本结构：
：标识出当前文件是html5,其作用是告诉浏览器不要解释错误，要严格按照W3C标准模式进行解析备注：W3C是一个国际标准组织
网页的基本结构：
头：
主体：
3.网页运行的原理：
html文件—>浏览器解析（Webkit渲染引擎）—>在页面上呈现效果
编程中命名规范
1）不要使用关键字，保留字：因为会产生二义性
2）不要随便的写：例如：a aa aaa
3 ) 尽量避免中文：转码容易出错
4）尽可能的以字母，下划线，$开头
5）尽可能的安照驼峰规范
原则：见名知意，尽可能的规范 假正经
编程书写规范：
因为html的兼容性比较器，但是这并不是意味着我们可以随便写，反之我们更要严格规范要求自己
例如:1).html与.htm虽说效果一样，但是在引擎渲染的时候还是默认先找.html
2）
虽然效果能出来，但是在不同浏览器的时候也是会有差异的
网页的基本结构：
：标识出当前文件是html5,其作用是告诉浏览器不要解释错误，要严格按照W3C标准模式进行解析备注：W3C是一个国际标准组织
网页的基本结构：
头：
主体：
网页运行的原理：
html文件—>浏览器解析（Webkit渲染引擎）—>在页面上呈现效果
HTML常见标签
标题标签
用于来存放标题内容
<h1>...</h1> <!--标题标签-->
<h1>第一章</h1> <!--将第一章设为一级标题-->
段落标签
用来存放正文
<p></p> <!--段落标签：主要用于存放一些内容-->
水平线标签
用来当作网页中的分割线
<hr/> <!--水平线标签--> <!--类似于 -------------- 独占一行-->
有序列表标签
创建一个有序列表
<ol><
li></li>
</ol> <!--有序列表标签-->
无序列表标签
创建一个无序列表
<ul>
<li></li>
</ul> <!--无序列表标签-->
描述标签
用来描述一些图片、视频的标签
<dl>
<dt></dt>
<dd></dd>
</dl> <!--描述标签-->
表格标签
创建一个多行多列的表格
<table align="center" border="2px" bordercolor="green">
<tr>
<td>第一行第一列</td>
<td colspan="2">第一行第二列</td>
<!--<td>第一行第三列</td>-->
</tr>
<tr>
<td rowspan="2">第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<!--<td>第三行第一列</td>-->
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
table 的align属性可以控制左对齐、右对齐、居中对齐等功能
border用来增加边框， bordercolor是设置边框的颜色
colspan：列合并单元格
rowspan: 行合并单元格
表单
格式为：
… 文本框、按钮等表单元素…
表单提交地址：指定提交后，由服务器上哪个处理程序处理
提交方法：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，但是get可以携带参数进行传递且参数大小不能超过2K
扩展知识点：post和get的区别
1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4.get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
form表单中常用的表单元素
<form action="https://www.baidu.com/?tn=62095104_33_oem_dg" method="post">
<table>
<!--单行文本框-->
<tr>
<td>用户名</td>
<td><input type="text" name="nf" value="" /></td>
</tr>
<!--密码框-->
<tr>
<td>密码</td>
<td><input type="password" name="ps" value="" /></td>
</tr>
<!--文本域 多行文本框-->
<tr>
<td>文本域/多行文本框</td>
<td><textarea cols="4" rows="2" name="tx"></textarea></td>
</tr>
<!--单选按钮-->
<tr>
<td>单选按钮：</td>
<td>男<input type="radio" name="ra" value=""/></td>
<td>女<input type="radio" name="ra" value=""/></td>
</tr>
<!--复选框-->
<tr>
<td>复选框</td>
<td>游泳<input type="checkbox" name="ck" value="" />
篮球<input type="checkbox" name="ck" value="" />
足球<input type="checkbox" name="ck" value="" /></td>
</tr>
<!--下拉列表-->
<tr>
<td>下拉框/下拉列表性别</td>
<td>
<select>
<option>---请选择---</option>
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<!--提交按钮-->
<tr>
<td></td>
<td ><input type="submit" name="bt" id="bt" value="提交" /></td>
</tr>
<!--重置按钮-->
<tr>
<td>重置按钮</td>
<td><input type="reset" /></td>
</tr>
<!--普通按钮-->
<tr>
<td>普通按钮</td>
<td><input type="button" name="ta" id="ta" value="按钮" /></td>
<td><input type="hidden" name="ge" id="ge" value="123321" /></td>
</tr>
<!--时间选择器-->
<tr>
<td>日期</td>
<td><input type="week" /></td>
</tr>
</table>
</form>
div分区标签
1、可以在这里写基本的数据信息，当然也可以写其他的标签元素
2、起作用是相当于在页面上开辟了一块区域
<div style="height: 300px;background-color: blue;">可以在div中使用基本数据
<br />
<h1>可以在div中使用其他标签</h1>
<p>我是段落</p>
</div>
span范围标签
1、既可以放基本的数据内容，也可以放其他的标签内容
2、其是作用于一行
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
效果：
我的母亲有 蓝色 的眼睛。
a超级链接标签
<a name="abc" href="http://www.baidu.com">a标签可以实现超级链接</a>
代码效果
在网页中点击一下可以实现页面的跳转
HTML4和HTML5的区别
1.DOCTYPE的声明
HTML4的DOCTYPE声明方式：
HTML5 的DOCTYPE声明方式：
2.指定字符编码：在HTML4中 编码需要有很多的声明，但在HTML5中，写法变得非常简单，我们来看一下代码
3.新增的结构元素（section、article、aside、header、hgroup、footer、nav、figure）
新增的其他元素（video、audio、embed、mark、 progress、 meter、time、ruby、rt、rp、wbr、canvas、command、details、datagrid、keygen、output、source、menu）
新增的input元素的类型（email、url、number、range、Date Pickers）
4.废除的元素
能使用CSS代替的元素（basefont、big、center、font、s、tt、u）等等
只有部分浏览器支持的元素
其他被废除的元素
h5中可以使用框架页，也可以不使用
小结：H5语法更加简洁，标签更加全面，效果更加美好
页面错误调试的几种常见手段
1、直接看源代码
意思为看开发工具中写的源代码，但不是特别明显，因为HTML是解释型语言，一行一行解释，有得自动会解释通，解释不通则会直接跳过
2、查看页面源代码
在网页中右键，查看源代码，会跳转到另一个网页中，显示你网页中的所有代码
3、页面开发者控制台
F12可以快捷打开页面控制台，可以在控制台中查看你所写的源代码，也可以对单个元素进行审查
web前端之css基础总结(代码片段)
Web前端之CSS基础总结(1)一、CSS原理1.HTML的局限性HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。操作html属性不方便HTML里面添加样式带来的是无尽... 查看详情
web前端：html最强总结附详细代码(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结（附上详细代码）Web前端：Bootstrap最强总... 查看详情
web前端基础资料分享(代码片段)
...。本人除了学习考研之外知识之外，还学习了一些Web前端的知识，哈哈哈。当然，我也做了一些相关的笔记。大家如果需要的话，大家可以先去下载eDiary这一款软件，然后私信我ÿ 查看详情
web前端基础资料分享(代码片段)
...。本人除了学习考研之外知识之外，还学习了一些Web前端的知识，哈哈哈。当然，我也做了一些相关的笔记。大家如果需要的话，大家可以先去下载eDiary这一款软件，然后私信我ÿ 查看详情
exp8web基础(代码片段)
原理与实践说明1.实践内容概述Web前端HTML能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。Web前端javascipt理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。Web后端：... 查看详情
web前端-css基础与应用(代码片段)
Web前端-CSS基础Web前端-CSSCSS历史CSS特点简介丰富的样式定义易于使用和修改多页面应用层叠页面压缩CSS工作原理CSS版本区别CSS的基本语法CSS为HTML网页添加样式的三种方法CSS选择器元素/标签选择器id选择器class选择器群组选择器包... 查看详情
20165223《网络对抗技术》exp8web基础(代码片段)
...容目录——Web基础实践说明实践目标基础问答实践内容Web前端：HTMLWeb前端：JavaScriptWeb后端：MySQLWeb后端：PHPSQL注入，XSS攻击测试实验遇到的问题及解决方法实验收获与感想1实践说明1.1实践内容★实验要求（1）Web前端：HTML（0.5... 查看详情
netsec201920165327exp8web基础(代码片段)
NetSec201920165327Exp8Web基础一、本实践的具体要求有：1、Web前端HTML(0.5分)能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。2、Web前端javascipt(0.5分)理解JavaScript的基本功能，理解DOM。编写JavaScri... 查看详情
前端学习html基础(代码片段)
目录引言初识WebWeb标准Web标准的优点初识HTML超文本的含义HTML基本骨架HTML元素标签分类标题HTML标签关系文档类型页面语言HTML常用标签src和href的区别什么是XHTMLHTML写法注意表格简介写法基本标签介绍表格属性合并单元格表格划分... 查看详情
exp8web基础20164303景圣(代码片段)
Exp8Web基础1.实验要求（1）Web前端HTML(0.5分)能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。（2）Web前端javascipt(0.5分)理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规... 查看详情
web前端开发之html语言(代码片段)
文章目录一、前端语言功能介绍（HTML,CSS,JavaScript作用）1.1、HTML介绍1.2、HTML的初始格式1.2.2、初始标签二、标签分类2.1、单标签2.2、双标签三、字符集四、常用HTML基础标签4.1、标题设置4.2、文字设置4.3、段落设置4.4、跑... 查看详情
web前端开发之html语言(代码片段)
文章目录一、前端语言功能介绍（HTML,CSS,JavaScript作用）1.1、HTML介绍1.2、HTML的初始格式1.2.2、初始标签二、标签分类2.1、单标签2.2、双标签三、字符集四、常用HTML基础标签4.1、标题设置4.2、文字设置4.3、段落设置4.4、跑... 查看详情
web前端一文带你吃透html(上篇)(代码片段)
前端学习路线小总结：基础入门：HTMLCSSJavaScript三大主流框架：VUEREACTAngular深入学习：小程序NodejQueryTypeScript前端工程化🍁开始前端之旅吧!一.HTML简介1.什么是HTML？2.HTML标签3.HTML元素4.HTML版本5.Web浏览器6.HTM... 查看详情
2018-2019-220165320《网络对抗技术》exp8：web基础(代码片段)
...5320《网络对抗技术》Exp8：Web基础一、实践具体要求(1).Web前端HTML(0.5分)能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。(2).Web前端javascipt(0.5分)理解JavaScript的基本功能，理解DOM。编写JavaScr... 查看详情
2018-2019-2网络对抗技术20165318exp8web基础(代码片段)
...与实践说明实践内容概述基础问题回答实践过程记录1.Web前端：HTML2.Web前端：javascipt3.Web后端：MySQL基础4.Web后端：编写PHP网页5.最简单的SQL注入，XSS攻击测试实验遇到的问题及解决方法实验总结与体会原理与实践说明1.实践内容概... 查看详情
20164313杜桂鑫exp8web基础(代码片段)
实践说明1.Web前端HTML能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。3.Web后端... 查看详情
exp8web基础————20164316张子遥(代码片段)
一、实践目标1.Web前端HTML 能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt 理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。3.Web后端... 查看详情
2018-2019-2网络对抗技术20165237exp8web基础(代码片段)
2018-2019-2网络对抗技术20165237Exp8Web基础实验目标(1).Web前端HTML(0.5分)能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。(2).Web前端javascipt(0.5分)理解JavaScript的基本功能，理解DOM。编写JavaScript验... 查看详情