小白学Java Web 1 Web前端之HTML标签
2017-03-22 10:28
453 查看
在web入门之前有9篇用来分享前端等基础知识,本宝宝会陆续补上。
前端部分我们需要用到HBuilder开发工具,关于它的安装使用等方法就不多说了,这个东东是我使用过的最顺手的开发工具之一,界面特别人性化,看一眼应该差不多就知
道怎么用,而且附带有比较完备的文字教程,所以使用它并没有什么难的。
一.什么是HTML
HTML(Hyper text markup language )是超文本标记语言,2013年由W3C(万维网联盟)发布了HTML5.0版本,HTML用来编写静态网页。
二.HTML5结构
我们在HBulder工具项目管理器中右键新建一个Web项目,再在里面新建一个HTML文件,我们在右边会看到如下编程窗口:
这就是HTML5的最基本结构。
HTML规范:不区分大小写,但要符合规范,应该使用小写,文件名使用英文,后缀名 :html,xhtml,htm等。
HTML标签一般是一对一对地存在,<标签名 属性1=”属性值” 属性2=”属性值”>文本</标签名>
有的是空标签,<标签名 属性1=”属性值” 属性2=”属性值”/>
三.HTML标签
1.文字标签
<i>斜体 <em>斜体 <b>粗体
<strong>粗体 <u>下划线 <del>删除线
<sup>上标 <sub>下标
<font color=”文字颜色” size=”+/-字号”>文字标签 <!-- --> 注释 空格
接下来我们就可以用这些标签随心所欲的玩了,我们需要把我们要展示的内容放到body的范围之内,下面的内容也是如此,我们最开始要做的就是将这些标签通通的体验一遍,将写好的代码保存后,可以选择浏览器浏览展示我们设计的页面,这里推荐使用Chrome浏览器。
下面是一组随便拿来体验一下文字标签的代码,这写得十分随意,只是举个例子,下面介绍其他标签时就不再写如此low的程序了..
我滴个神,画面果然惨不忍睹···········
2.标题标签
<h1>---<h6> 特征:加粗、占用一行,h1最大,h6最小
例如 下面两行代码的效果是酱个样纸滴
3.段落标签
<p> 段落前后有空行 <br/> 换行
<hr color=”颜色” size=”高度” width=”宽度也可以使用百分比” />水平线,居中
<pre>预格式,所见即所得,字体比正常的小一号 <span>行内元素,不占一行 <div>块元素,占一行
其实这些标签啊,要是在效果上看应该相差不大,比较都是一个段落嘛,咋弄也不能弄出表格的效果是吧
我们毕竟是java学习者,用不到太多h5的东西,知道大概和使用方法即可以了,说来这个h5系列的坑也很深呢,之后我也会在博客里分享的。
这里面有点意思的就是<pre>所见即所得,虽然不实用,哈哈,请看:
4.图片标签
<img src=”图片路径” alt=”加载失败提示的文字” title=”鼠标悬停” width=”宽” height=”高” border=”边框” align=”top/middle/bottom(默
认)/left/right(left,right可以环绕)” />
上面是关于图片标签所能添加的所有属性,带颜色的部分是比较核心的,尤其是红色部分,需要写上你所要展示图片的路径。
说到这个路径,我们最好填写图片的绝对路径。那么绝对路径和相对路径区别在哪里呢?
相对路径:相对于本页面的路径,所以一旦本页面改变路径,则图片路径都不好用了
绝对路径:不考虑本页面在何处,所有路径都从本站点的根路径开始,用"/"表示根路径
5.链接标签
这个标签我们以后会常用了,我们平时浏览网页,不就是不同网址跳来跳去嘛
a) 广域网
<a href=”http://www.baidu.com” target=”_blank” (在新窗口中打开)>百度</a>
b) 本地
<a href=”index.html”>回到首页</a>
c) 发邮件
<a href=”mailto:xxx@xx.com”>发邮件给</a>
d) 下载
<a href=”FeiQ.exe”>下载FeiQ.exe</a>
e) 创建锚点(本页面跳转)
<a name=”top”></a>
<a href=”#top”>跳转到TOP锚点</a>
上述标签应该不难理解,就是点击一下,跳到href后面引号里面的网址呗
可能锚点这个不知道什么意思吧,比如说有的时候你浏览一篇文章太长了,而你可以在目录或者导航界面点击对应内容就会跳转到相应的位置
6.列表标签
a) 有序
<ol type=”1(默认)/a/A/i/I” start=”数字从第几个开始”>
<li></li>
</ol>
b) 无序
<ul type=”disc(默认)/circle/square/none”>
<li></li>
</ul>
c) 自定义
<dl>
<dt>自定义标题</dt>
<dd>自定义描述</dd>
</dl>
使用列表标签会有什么样的效果呢,比如
是不是用起来感觉还不错,上面的三种列表各有不同,自己试一试就知道了。。
7.表格标签
翠花,先上一段代码:
什么?很难看?的确有点吧,不过不要质疑宝宝的审美,比较宝宝也做过稍稍正经点的网页滴
下面是介绍各属性的含义,红色部分为常用属性:
<table border=”边框宽度” bordercolor=”边框颜色” width=”表宽” height=”高度” bgcolor=”背景色” background=”背景图” align=”left/center/right表格在网页中的对
齐” cellspacing=”格和格之间的距离,默认2px” cellpadding=”格和内容之间的距离,默认2px”>
表格不仅仅如此,很多时候我们会遇到合并行或者合并列的情况:
<td rowspan=”合并几行” colspan
bcb0
=”合并几列”>
是不是觉得这个神奇了?这个很简单,在表格中,每个<td>标签都代表一个小格格,在对应的<td>中设置属性即可。
8.表单标签
<form action=”提交到的服务器页面” method=”get/post”>
文本框<input type=”text” name=”” placeholder=”灰色提示” size=”能容纳的英文” maxlength=”能写多少个”/>
密码框<input type=”password” disabled=”disable” name=””/>
单选框<input type=”radio” name=”” value=”” checked=”checked”/>
复选框<input type=”checkbox” name=”” value=”” />
选项框<selectname=”” >
< option value=””>选项</option>
</select>
文本区域<textarea cols=”一行能容纳多少英文” rows=”能容纳几行” name=””> </textarea>
文件按钮<input type=”file” name=””/>
提交按钮<input type=”submit” value=”按钮上文字”/>
重置按钮<input type=”reset” value=”按钮上文字”/>
</form>
是不是看到上面一堆就蒙圈了?这些都是干什么的?其实一个程序就可以了解上边一堆究竟能做什么。
具体作用和注意点见程序中注释。
运行可以看到的结果是:
是不是有点成就感了,这个页面我们经常见到。不过这看起来还是太low,可以借助表格标签让这个表单看起来更加整洁,各位有空可以试试。
本文详细介绍的标签只有这么多,在后面的学习有能遇得到,下面再补充一些标签可以试一试,仅供娱乐,不做过多解释:
a.<table>
<thead>、<tbody>、<tfoot>
tbody可以重复,当遇到大量数据的时候,以thead,tbody,tfoot为单位进行下载刷新
b.<form>
标签
<label for=”username”>用户名</label>
<input type=”text” name=”username”/>
option分组
<optgroup label=”宝马”>
<option value=””>宝马1</option>
<option value=””>宝马2</option>
<option value=””>宝马3</option>
</optgroup>
c.HTML5新增标签
<!-- type=image,点击此图片可以有submit效果-->
<input type="image" src="images/a1.gif"/> <br/>
<!-- date日期 -->
< input type="date"/> <br/>
<!-- month 年月 -->
<input type="month"/> <br/>
<input type="search"/> <br/>
<input type="color"/> <br/>
<input type="email"/> <br/>
<input type="url"/> <br/>
<input type="number" min="1" max="10"/> <br/>
<!-- 音频播放 -->
<audio src="src/OneRepublic%20-%20Counting%20Stars.mp3" controls="controls">
</audio>
<br/>
<!-- 视频播放 -->
<video src="src/movie.ogg" controls="controls">
</video>
前端部分我们需要用到HBuilder开发工具,关于它的安装使用等方法就不多说了,这个东东是我使用过的最顺手的开发工具之一,界面特别人性化,看一眼应该差不多就知
道怎么用,而且附带有比较完备的文字教程,所以使用它并没有什么难的。
一.什么是HTML
HTML(Hyper text markup language )是超文本标记语言,2013年由W3C(万维网联盟)发布了HTML5.0版本,HTML用来编写静态网页。
二.HTML5结构
我们在HBulder工具项目管理器中右键新建一个Web项目,再在里面新建一个HTML文件,我们在右边会看到如下编程窗口:
<!-- 文档符合html5标准,告诉浏览器要以html5的标准来解析此HTML网页 --> <!Doctype html> <html> <!-- html注释 --> <head bgcolor=”页面背景颜色” > <title>网页标题</title> <!-- 设置网页字符编码 --> <meta charset=”utf-8” /> </head> <body> 网页上所显示的内容 </body> </html>
这就是HTML5的最基本结构。
HTML规范:不区分大小写,但要符合规范,应该使用小写,文件名使用英文,后缀名 :html,xhtml,htm等。
HTML标签一般是一对一对地存在,<标签名 属性1=”属性值” 属性2=”属性值”>文本</标签名>
有的是空标签,<标签名 属性1=”属性值” 属性2=”属性值”/>
三.HTML标签
1.文字标签
<i>斜体 <em>斜体 <b>粗体
<strong>粗体 <u>下划线 <del>删除线
<sup>上标 <sub>下标
<font color=”文字颜色” size=”+/-字号”>文字标签 <!-- --> 注释 空格
接下来我们就可以用这些标签随心所欲的玩了,我们需要把我们要展示的内容放到body的范围之内,下面的内容也是如此,我们最开始要做的就是将这些标签通通的体验一遍,将写好的代码保存后,可以选择浏览器浏览展示我们设计的页面,这里推荐使用Chrome浏览器。
下面是一组随便拿来体验一下文字标签的代码,这写得十分随意,只是举个例子,下面介绍其他标签时就不再写如此low的程序了..
<html> <head> <meta charset="utf-8" /> <title>我的第一个html页面</title> </head> <body > <i>我要斜</i> <br/> <em>我要斜</em><br/> <b>我要加粗</b><br /> <strong>我要加粗</strong><br /> <u>我要下划线</u><br /> <del>删除我吧</del><br /> 3<sup>2</sup>=9<br /> 水的分子式:H<sub>2</sub>O<br /> <font color="red">我是红色的</font><br/> <font color="#f00">我也是红色的</font><br/> <font face="黑体">我是黑体</font><br/> <font size="+3">我要变大</font><br/> <font color="green" size="7" face="黑体">我要变绿变大变样式</font><br/> <font color="green" size="7" face="黑体">
<u><i>我要变 <font size="+1">绿</font> 变大变样式</i></u>
</font><br/> <br/> </body> </html>
我滴个神,画面果然惨不忍睹···········
2.标题标签
<h1>---<h6> 特征:加粗、占用一行,h1最大,h6最小
例如 下面两行代码的效果是酱个样纸滴
<h1>标题1 </h1> <h2>标题2 </h2>
3.段落标签
<p> 段落前后有空行 <br/> 换行
<hr color=”颜色” size=”高度” width=”宽度也可以使用百分比” />水平线,居中
<pre>预格式,所见即所得,字体比正常的小一号 <span>行内元素,不占一行 <div>块元素,占一行
其实这些标签啊,要是在效果上看应该相差不大,比较都是一个段落嘛,咋弄也不能弄出表格的效果是吧
我们毕竟是java学习者,用不到太多h5的东西,知道大概和使用方法即可以了,说来这个h5系列的坑也很深呢,之后我也会在博客里分享的。
这里面有点意思的就是<pre>所见即所得,虽然不实用,哈哈,请看:
<pre>举头望明月 低头思故乡 啦 啦 啦 想家啦</pre>我们在程序界面弄成这个德行,在网页中浏览时也是这个德行···
4.图片标签
<img src=”图片路径” alt=”加载失败提示的文字” title=”鼠标悬停” width=”宽” height=”高” border=”边框” align=”top/middle/bottom(默
认)/left/right(left,right可以环绕)” />
上面是关于图片标签所能添加的所有属性,带颜色的部分是比较核心的,尤其是红色部分,需要写上你所要展示图片的路径。
说到这个路径,我们最好填写图片的绝对路径。那么绝对路径和相对路径区别在哪里呢?
相对路径:相对于本页面的路径,所以一旦本页面改变路径,则图片路径都不好用了
绝对路径:不考虑本页面在何处,所有路径都从本站点的根路径开始,用"/"表示根路径
<img src="imgs/logo.jpg" title="我为自己代言" border="1" align="right"/> <img src="/html-test/day1/imgs/logo.jpg" title="我为自己代言" border="1" align="right"/>如上面所示,第一句是相对路径,第二句是绝对路径,绝对路径通俗来说就是把图片所在位置写得更加完整了,不管页面路径如何改都能找到该图片,如果是相对路径在改变页面路径后图片就显示不出来了,因为程序定位不到图片所在的位置了。
5.链接标签
这个标签我们以后会常用了,我们平时浏览网页,不就是不同网址跳来跳去嘛
a) 广域网
<a href=”http://www.baidu.com” target=”_blank” (在新窗口中打开)>百度</a>
b) 本地
<a href=”index.html”>回到首页</a>
c) 发邮件
<a href=”mailto:xxx@xx.com”>发邮件给</a>
d) 下载
<a href=”FeiQ.exe”>下载FeiQ.exe</a>
e) 创建锚点(本页面跳转)
<a name=”top”></a>
<a href=”#top”>跳转到TOP锚点</a>
上述标签应该不难理解,就是点击一下,跳到href后面引号里面的网址呗
可能锚点这个不知道什么意思吧,比如说有的时候你浏览一篇文章太长了,而你可以在目录或者导航界面点击对应内容就会跳转到相应的位置
<a href="5-maoA.html#qu1">第20章</a><br/> <a href="#qu1">第20章</a><br/>点击上面的“第20章”即可跳转到该页面下面的“第20章”的位置。
6.列表标签
a) 有序
<ol type=”1(默认)/a/A/i/I” start=”数字从第几个开始”>
<li></li>
</ol>
b) 无序
<ul type=”disc(默认)/circle/square/none”>
<li></li>
</ul>
c) 自定义
<dl>
<dt>自定义标题</dt>
<dd>自定义描述</dd>
</dl>
使用列表标签会有什么样的效果呢,比如
<ul> <li>我的电脑 <ul> <li>本地磁盘C: <ul> <li>我的文档</li> <li>我的收藏</li> </ul> </li> <li>本地磁盘D:</li> </ul> </li> </ul>
是不是用起来感觉还不错,上面的三种列表各有不同,自己试一试就知道了。。
7.表格标签
翠花,先上一段代码:
3行3列 <table border="10" bordercolor="red" width="500" height="200" cellspacing="10" cellpadding="1" align="center">
<tr bgcolor="aliceblue" align="center" valign="top"> <td bgcolor="blue" align="left" valign="bottom">姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td width="200">张三</td> <td width="75">男</td> <td>18</td> </tr> <tr> <td>小红</td> <td>女</td> <td>17</td> </tr> <tr align="left"> <th>小红</th> <th>女</th> <th>17</th> </tr> </table>这是一组3行3列的表格,每组<tr></tr>可以暂时看做一行,展示结果如下:
什么?很难看?的确有点吧,不过不要质疑宝宝的审美,比较宝宝也做过稍稍正经点的网页滴
下面是介绍各属性的含义,红色部分为常用属性:
<table border=”边框宽度” bordercolor=”边框颜色” width=”表宽” height=”高度” bgcolor=”背景色” background=”背景图” align=”left/center/right表格在网页中的对
齐” cellspacing=”格和格之间的距离,默认2px” cellpadding=”格和内容之间的距离,默认2px”>
表格不仅仅如此,很多时候我们会遇到合并行或者合并列的情况:
<td rowspan=”合并几行” colspan
bcb0
=”合并几列”>
<table border="1" width="500" height="400" border="1" > <tr> <td>1</td> <td>2</td> <td>3</td> <td rowspan="2">4</td> </tr> <tr> <td rowspan="2">5</td> <td rowspan="2" colspan="2">6</td> </tr> <tr> <td>8</td> </tr> <tr> <td colspan="2">9</td> <td colspan="2">10</td> </tr> </table>
是不是觉得这个神奇了?这个很简单,在表格中,每个<td>标签都代表一个小格格,在对应的<td>中设置属性即可。
8.表单标签
<form action=”提交到的服务器页面” method=”get/post”>
文本框<input type=”text” name=”” placeholder=”灰色提示” size=”能容纳的英文” maxlength=”能写多少个”/>
密码框<input type=”password” disabled=”disable” name=””/>
单选框<input type=”radio” name=”” value=”” checked=”checked”/>
复选框<input type=”checkbox” name=”” value=”” />
选项框<selectname=”” >
< option value=””>选项</option>
</select>
文本区域<textarea cols=”一行能容纳多少英文” rows=”能容纳几行” name=””> </textarea>
文件按钮<input type=”file” name=””/>
提交按钮<input type=”submit” value=”按钮上文字”/>
重置按钮<input type=”reset” value=”按钮上文字”/>
</form>
是不是看到上面一堆就蒙圈了?这些都是干什么的?其实一个程序就可以了解上边一堆究竟能做什么。
具体作用和注意点见程序中注释。
<form action="4-A.html" method="get"> <!--文本框--> 用户名: <input type="text" name="uname" id="uname" placeholder="请输入用户名/电话/电子邮箱" maxlength="6" value="Tom" /><br/> <br/> 密码:<input type="password" name="pwd" value="123456" /><br/> <br/> <!--单选按钮 必须name属性值一致才能实现单选效果 checked="checked" 默认被选中 --> 性别: <input type="radio" name="sex" id="sex" value="男" /> 男神 <input type="radio" name="sex" id="sex" value="女" checked="checked"/> 女神<br/> <br/> 爱好: <input type="checkbox" name="aihao" id="aihao" value="eat"/>吃饭 <input type="checkbox" name="aihao" id="aihao" value="sleep" checked="checked"/>睡觉 <input type="checkbox" name="aihao" id="aihao" value="hit"/>打豆豆<br/> <br/> 生日: <!--下拉菜单 select 选项内容及值要放在option中 selected ="selected" 默认选中项 --> <select name="birth-month" id="month"> <option value="1">1月</option> <option value="2" selected="selected">2月</option> <option value="3">3月</option> <option value="4">4月</option> </select> <br/> <br/> 自我评价: <!--多行文本框 textarea rows 行数 cols 列数 readonly="readonly" 当前控件只读不能改 --> <textarea name="info" rows="5" cols="30" > 这家伙懒得什么都没留下 </textarea><br/>
<!--文件域--> 头像上传:<input type="file" name="file" id="file" /><br/> <br/> <!--提交按钮 和form中action一起使用--> <input type="submit" value="提交" /> <!--重置按钮 重新设置表单中元素的默认值--> <input type="reset" value="重新填写" /> <!--普通按钮 配合js完成操作--> </form>
运行可以看到的结果是:
是不是有点成就感了,这个页面我们经常见到。不过这看起来还是太low,可以借助表格标签让这个表单看起来更加整洁,各位有空可以试试。
本文详细介绍的标签只有这么多,在后面的学习有能遇得到,下面再补充一些标签可以试一试,仅供娱乐,不做过多解释:
a.<table>
<thead>、<tbody>、<tfoot>
tbody可以重复,当遇到大量数据的时候,以thead,tbody,tfoot为单位进行下载刷新
b.<form>
标签
<label for=”username”>用户名</label>
<input type=”text” name=”username”/>
option分组
<optgroup label=”宝马”>
<option value=””>宝马1</option>
<option value=””>宝马2</option>
<option value=””>宝马3</option>
</optgroup>
c.HTML5新增标签
<!-- type=image,点击此图片可以有submit效果-->
<input type="image" src="images/a1.gif"/> <br/>
<!-- date日期 -->
< input type="date"/> <br/>
<!-- month 年月 -->
<input type="month"/> <br/>
<input type="search"/> <br/>
<input type="color"/> <br/>
<input type="email"/> <br/>
<input type="url"/> <br/>
<input type="number" min="1" max="10"/> <br/>
<!-- 音频播放 -->
<audio src="src/OneRepublic%20-%20Counting%20Stars.mp3" controls="controls">
</audio>
<br/>
<!-- 视频播放 -->
<video src="src/movie.ogg" controls="controls">
</video>
相关文章推荐
- 【前端开发】HTML标签总结-行标签和块标签
- web前端——html其它常用标签
- web前端与移动开发---html标签的学习及特殊符号
- 前端开发基础学习笔记html标签
- web前端之HTML标签分类
- 前端-HTML常用标签(一)
- 小白学习前端---第二天 HTML的基本属性————1
- 前端小白学习路线之HTML超文本标记语言
- 前端学习笔记之Html标签元素类别
- 前端 | 3 - HTML | 多媒体标签 |
- 读书笔记之html标签的语义的意义——《编写高质量的代码:Web前端开发的修炼之道》
- 前端基础学习之Html标签
- web前端之HTML中a标签锚点
- Effective前端2:优化html标签
- 前端小小小白:HTML是啥?能吃吗?真相在这里,吃货别哭……
- 前端学习--HTML标签温习一
- 我的前端入门之html标签
- 前端基础(5):html语法(4): <br> <td><tr><label>标签
- 初学者小白HTML入门——分帧标签
- 前端学习之HTML基础标签(1)