小白学Java Web 1 Web前端之HTML标签

来源：互联网发布：js 正则替换日期字符串编辑：程序博客网时间：2024/05/18 13:27

在web入门之前有9篇用来分享前端等基础知识，本宝宝会陆续补上。

前端部分我们需要用到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="imgs/logo.jpg" title="我为自己代言"  border="1" align="right"/><img src="/html-test/day1/imgs/logo.jpg" title="我为自己代言"  border="1" align="right"/>

如上面所示，第一句是相对路径，第二句是绝对路径，绝对路径通俗来说就是把图片所在位置写得更加完整了，不管页面路径如何改都能找到该图片，如果是相对路径在改变页面路径后图片就显示不出来了，因为程序定位不到图片所在的位置了。

5.链接标签

这个标签我们以后会常用了，我们平时浏览网页，不就是不同网址跳来跳去嘛

a) 广域网

b) 本地

c) 发邮件

d) 下载

<a href=”FeiQ.exe”>下载FeiQ.exe</a>

e) 创建锚点(本页面跳转)

<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>

b) 无序

</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”>

表格不仅仅如此，很多时候我们会遇到合并行或者合并列的情况：

<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.表单标签

文本框<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>

tbody可以重复，当遇到大量数据的时候，以thead,tbody,tfoot为单位进行下载刷新

b.<form>

标签

option分组

</optgroup>

c.HTML5新增标签

<input type="image" src="images/a1.gif"/> <br/>

< input type="date"/> <br/>

<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>

1 0