Web前端-HTML基础
Web前端
- Web前端基础
- HTML
- 编程中命名规范
- 网页的基本结构：
- 网页运行的原理：
- HTML常见标签
- 标题标签
- 段落标签
- 水平线标签
- 有序列表标签
- 无序列表标签
- 描述标签
- 表格标签
- 表单
- form表单中常用的表单元素
- div分区标签
- span范围标签
- a超级链接标签
- HTML4和HTML5的区别
- 页面错误调试的几种常见手段
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>
代码效果
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前端-HTML基础相关推荐
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- html怎么在线安装,web前端零基础学习教程，如何安装HTML编辑器！
原标题:web前端零基础学习教程,如何安装HTML编辑器! HTML 编辑器推荐: 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: Notepad++:http ...
- Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
- Web前端技术基础实验报告三之超链接与多媒体文件应用
目录 Web前端技术基础实验报告 实验题目:超链接与多媒体文件应用 实验目的:熟悉超链接与多媒体文件的插入的相关标签 实验内容 : 实验过程及结果 Web前端技术基础实验报告 实验题目:超链接与多媒体 ...
- 现代前端技术解析：Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...
- web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格 文章目录 web前端开发基础--在网页中使用表格 前言 一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码 前言 本篇主要 ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
最新文章
- 解决 centos7 最小化安装之后不能正常联网问题
- Redis之Hash数据结构
- cpp判断输入为数字_猜数字小程序带你C语言入门
- Kubernetes天生对多云策略的支持
- 网页复选框设置只能选一个_男生在密室呆一个月, 只能选手机或者女人, 结果太现实...
- sql server 2008 数据库可疑的解决步骤
- nginx解决浏览器跨域问题_使用nginx解决浏览器跨域
- 企业软件开发商 Atlassian 紧急修复不慎泄露的0day，IBM Aspera 软件或受影响
- python 输出 2到n的素数 附源码 注释超详细。。。
- 卡巴斯基终生免费使用方法
- flash读取程序 msp430_MSP430 flash的操作
- 如何快速实现告警短信的通知方式？
- 研究论文：Uniswap V3中的无常损失
- 如何用一台普通相机拍照红蓝立体3D图片
- 阿里云上的ssh反向代理
- history命令和FHS介绍
- 日本行，一些随笔和照片
- aardio - 小窍门及注意事项收集贴
- 关于Ai打开图片，颜色变色问题
- 港科夜闻｜香港科技大学史维校长及汪扬副校长出席“一流大学建设系列研讨会--2021”暨中国大学校长联谊会线上会议...