在编程的世界里,有很多的语言。各自的语言结构不同也就意味着他们直接存在着差异。
比如我前面介绍的Java为后端语言,因为它本身为强类型语言。在每次的编程中都会很严谨。所以稳定性会比较高。所以常常用作大型服务器的后端语言,如互联网巨头阿里巴巴。
——————————我是华丽的分割线———————————
开始介绍前端web语言
web前端开发:用于开发用户界面(用于展示数据的网页)
在前端的世界里,有着这么几个好兄弟
HTML(主体页面),JavaScrip(网页脚本),css(样式和定位)
——————————————————————————————
后端人通常使用的框架工具:jQuery(js框架,简化js开发),bootstrap、layui(网页框架)
——————————————————————————————
网页的编写:
HTML:Hyper(超)Text(文本)Makup(标记)Language(语言)
普通的文本:只能在里面存入普通的文字描述
HTML:除了可以进行普通的文字描述,还可以进行多媒体的描述(图片,视频,音频等等)描述,网页的组成是由很多个不同的标记组成的。
标记:是具有固定格式的代码,同事具有一定的固定意义
普通格式:修饰被包含的内容,都包含开始标记<标记名>和结束标记</标记名>
<标记名 属性=“值” 属性=“值” 属性=“值” …> 被修饰的内容 </标记名>
<a href="" target="_blank" class=" ">装修建材</a>
特殊格式:只用于实现某种功能,而不具有内容的修饰作用
<标记名/>
说了这么多,那咱们开始写第一个网页把,差点忘记介绍网页的编写工具
简单来说,常用的有这么几种:
1.HBuilder:https://www.dcloud.io/hbuilderx.html
2.Adobe Dreamweaver:https://pan.baidu.com/s/1Og_7moIpT93irhXQY9mmww
提取码:otl8
3.Sublime Text :https://pan.baidu.com/s/16eUuA-gECrKrTrY4pVJmIQ
提取码:7hmo
某云不限速软件(亲测可用):http://pandownload.com/
4.TXT文本编辑器:桌面鼠标右键txt,在编写完成后改后缀围殴html即可。
————————————————————————————————
第一个网页(我使用的HBuilder):
1.准备好浏览器,开发工具
2.新建HTML文件(以.html结尾的文件)
网页测试:在源文件鼠标右键选择打开方式选择浏览器或者鼠标左键按住拖拽到浏览器图标上即可打开网页
1.常用的网页标记:
图片标记:用于在网页插入一个图片
注意我下面的说明!
<img src=”图片地址” alt=”图片不能正常显示时的文本” width=”图片宽度” height=”图片高度”/>
提示: alt=”图片不能正常显示时的文本” width=”图片宽度” height=”图片高度”为可选项,其余为必写项
src:用于设置网页的来源地址
alt:用于在图片不能显示时在标记位置显示的文本,图片正常显示时该文本不会显示
width:用于设置网页图片的宽度,值为像素值,单位为px,如:width=”200px”,显示结果是一种占比效果
height:用于设置网页图片的高度,值为像素值,单位为px,如:height=”200px”,显示结果是一种占比效果
<img src=" timg.jpg" alt="美女图片" width="500px" height="200px"/>
布局标记-表格标记,其实现必须通过表格的行和单元格组成,默认是无边框
表格标记:<table>
行标记:<tr>,行在表格中
单元格标记:<td>,单元格在行中
每个table中放入几个同级的tr决定表格有几行
每个tr中放入几个同级的td决定表格每行有几列
在表格中显示的内容都是放在表格的td中
表格标记常用属性:width(宽度)height(高度),
border(边框,值为数字)
align:用于设置表格在网页中水平方向显示位置,默认是left,值还有:right,center(居中),如果在tr和td标记中使用该属性,表示当前行或当前单元格中的内容的水平对齐方式
网页中用于接收用户输入可见文本的框一般都是文本框:
参考代码:
<input type=”text”/>
设置文本框大小,不能通过普通属性方式,而是通过定义样式属性
style=”width:宽度像素;height:高度像素”
<input type="text" style= "width:542px;height:34px;"/>
定义按钮:
参考代码:
<input type=”button” value=”按钮显示文本”/>