使用Hbuilder和HTML基本标签
Hbuilder的使用和HTML基本标签
上一篇说了HTML的入门:使用txt文件写一个简单的网页.本篇介绍一下HTML编写的软件使用,编写工具中常见的有EditPlus和nodePad++,本人感觉前者还是比较好用的.
开发者工具中webStom最好用,但是收费,不适用于一般人使用.Hbuilder是一个很好的软甲,完全满足一般开发者的需求,并且免费使用,现在培训机构都在使用这个软件…
Hbuilder的基本介绍
对于Hbuilder的安装,网络上有很多教程,这里就不介绍了.
首先,新建工程–>web工程–>在工程下新建HTML文件–>选择HTML5(默认)生成即可,发现结构自动生成了…
设置字体大小快捷键:Ctrl + 滑轮
这里做一下声明,只需概要了解:
DOCTYPE:这是HTMl的声明,声明是一个H5版本的文件,如果不写,以混合形式渲染.
meta:网页中设置网页信息的标签(就是一个标签);其属性有name,可以多个值(后面讲name的作用);charset:编码格式,中国地区,默认UTF-8
基本标签
px:像素单位,显示器为很多肉眼难以见到的小灯组成,一个小灯就是一像素,像素越高,灯就越多,画质也就越好
属性值:一些标签中的属性设置,有些属性不需要就可以不写.
这里介绍一下文中使用的基本标签,内容不能一一列举,只写常用的:
- Hr: 水平分割线,在网页上显示一条分割线,它拥有的属性: 长度:width;线高:size,范围1~7;颜色:color;单位为px,例如width=“600px”;
- H*:标题标签,范围1~6;
- b 或 strong: 都为字体加粗
- i 或em: 都为字体倾斜
- span 或 label : 都为文本标签
- br: 换行,在网页设计中需要使用
才能达到换行的效果,否则会都显示在一行,使用快捷键Shift + 回车,后面的/可有可无.
一号标题
二号标题
六号标题
加粗
还是加粗
倾斜
还是倾斜
文本区域1
换了个行
制表符
在html设计中,不能显示出一些非字符的操作,例如空格,打印一大串的空格,在网页上只显示一个空格的位置,还有大于号小于号等,避免与代码中的<>符号冲突,也需要用制表符,这里只写这几个常用的.
- 空格:
- 大于号>: >
- 小于号<: <
空格的使用 空格的使用
大于号 >
小于号<
超链接
网页中有很多超链接,用过点击某个事件,实现跳转另一个网页的操作.
超链接一般使用A标签,如:
作用:点击跳转指定的URL地址
href为超链接;https为网络协议(了解即可,不深究)
href的属性:
- “#”:跳转为本页面,(实现不跳转操作)
- “JavaScript:void(0)”:不跳转,禁用事件(点击无效)
Target:设置跳转的打开方式,默认值为_self,操作为在当前选项卡打开页面;
_blank操作为在新的选项卡中打开网页
当前位置打开百度
新选项卡位置打开百度
图片标签
图片与文本不同,不能普通输入,这里使用img标签,首先将需要用到的图片拷贝到img文件夹下,如果没有就自己建一个
属性介绍:
src:引用图片的地址,使用的快捷键Alt+ / 就可以显示
width:图片的宽度
heigth:图片的高度(一般情况下一width只使用一个就行,否则图片失帧,不好看)
border:图片外边框大小
完整代码:
基本标签的使用
一号标题
二号标题
六号标题
加粗
还是加粗
倾斜
还是倾斜
文本区域1
换了个行
空格的使用 空格的使用
大于号 >
小于号<
当前位置打开百度
新选项卡位置打开百度
效果图:
以上为Hbuilder的基本操作和一些基本标签的介绍和使用,下一篇将介绍列表和表格使用