HTML

html的操作思想：

　　网页中有很多数据 且不同的数据可能需要不同的显示效果 使用标签把需要操作的数据封装起来,然后通过修改标签的属性值实现标签内数据样式的变化。

标签

01.文字标签(修改文字的样式)：<font></font>

属性:

　　size 文字大小 取值范围1-7 超出7 默认还是7

　　color 文字颜色 两种表示方式：

　　　　1> 英文字母 red green yellow blue white black gray .......

　　　　2> 使用十六进制数 #ff00ff (可以通过工具实现不同的颜色)

---

02.注释标签：Java注释有几种？3种

　　html的注释：<!--  html的注释  -->

---

03.标题标签：<h1></h1>  <h2></h2>  .......  <h6></h6> 

　　从h1到h6,大小依次变小,同时会自动换行。

---

 04.水平线标签：<hr/>

属性：

　　size="5"  表示线条的厚度 以像素作单位 内定为2;取值范围1-7 超出7 默认还是7

　　color="red"  设定线条的颜色(两种表示方式) 

　　align="LEFT"  设定线条置放位置 可选择：left；right；center 三种设定值

　　width="70%"  设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%

---

05.特殊字符：页面中特殊字符的显示,需要进行转义操作

　　

---

 06.列表标签：

　　<dl></dl> 表示列表的范围

　　　　在<dl>里面,<dt>上层内容</dt> 

　　　　在<dl>里面,<dd>下层内容</dd> 

　　<ol></ol> 表示有序列表的范围

　　属性：type  设置排序方式 1(默认方式)  a  i ......

　　　　在<ol>里面,<li>具体内容</li> 

　　<ul></ul> 表示无序列表的范围

　　属性：type  设置排序方式 空心圆circle   实心圆disc  实心方块square  默认disc

　　　　在<ul>里面,<li>具体内容</li> 

---

 07.图像标签：主要用来插入图片于网页中<img/>

　　src="logo.gif"  表示图片来源路径，接受 .gif, .jpg 及 .png 格式，若图片与html文件在同一目录下则 只需写上图片名称，否则 必须加上正确的路径，相对或绝对均可。

　　width="100" height="50" 设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小，以免失真，若需要改图片大小最好使用图像编辑工具。

　　alt="一张美女图片"  用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示(有些浏览器下没有效果)。

　　border=2  图片边框厚度

　　lowsrc="pre_logo.gif"  设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。

　　hspace=5 vspace=5  设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间， vspace是设定图片上下的空间，高度采用 pixels 作单位。 

　　align="top"  调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为 bottom。还支持 texttop, baseline, absmiddle, absbottom， 

　　texttop　　表示图片和文字依顶线对齐，
　　baseline　　 表示图片对齐到目前文字行底线值，
　　absmiddle　　 表示图片对齐到目前文字行绝对中央，
　　absbottom　　 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

---

 08.超链接标签

　　<a href="链接到资源的路径" >显示在页面上的内容</a>

　　属性：

　　　　href="index.html"   链接的地址

　　　　target="_top"   设定链接打开的方式,默认在当前页打开。可选值为： _blank, _parent, _self, _top, 框窗名称。

　　　　　　target="框窗名称"　　 只运用于框架中，若被设定 则链接将显示于“框窗名称”之框窗 中，框窗名称是事先由框架标记所命名。

　　　　　　target="_blank" 或 target="new" 　　在新的浏览视窗中打开链接

　　　　　　target="_parent"  　　将链接的画面内容，当成文件的上一个画面。

　　　　　　target="_self" 　　在当前浏览视窗中打开链接。(内定值)

　　　　　　target="_top" 　　　　将框架中链接的画面内容，显示在没有框架的视窗中。（即除去了框架)

　　　　name="hello"   这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部链接　要使用两次 <A> 链接标记。一个使用参数 name 事先在文件中埋下一参考点，另一个使用参数 href 连到这个参考点。通常被称为定位跳转链接

　　　　　　<a name="test"></a>
　　　　　　<a href="#test">本页的内部链接</a>

---

09.表格标签：可以对数据进行格式化 使之显示的更加清晰

　　<table></table>   表示表格的范围

　　　　在table里面 <caption></caption>   表示表格的标题

　　　　在table里面 <tr></tr>   　　表示表格中的行

　　　　　　在tr里面 <td></td>  　表示单元格

　　　　　　使用 th 也可以表示单元格：唯一不同的是<TH>所标示的单元格中的文字 是以粗 体出现,并且居中显示。通常用于表格第一列以标示 栏目。其参数 设定请参考<TD>。 当然若为<TD>所标示的储存格中的文字加上 粗体标记<B>和居中参数 便等如<TH>的效果。

　　　　　　

table属性：

　　width="400" / height="100" 表格宽度/高度，接受绝对值（如 80）及相对值（如 80%）。

　　border="1" 表格边框厚度，不同浏览器有不同的内定值，故请指明。

　　bordercolor="#FF00FF" 表格边框颜色，NC 与 IE 有不同的效果

　　cellspacing="2" 表格内部单元格之间的间隙    一般设置为“0”

　　cellpadding="2" 文字与格线的距离

　　align="CENTER" 表格的摆放位置（水平），可选值为： left, right, center

　　valign="TOP" 表格内字画等的摆放位置（垂直），可选值为： top, middle, bottom

　　background="myweb.gif" 表格纸，与 bgcolor 不要同用。

　　bgcolor="#0000FF" 表格底色，与 background 不要同用

　　bordercolorlight="#00FF00" 表格边框向光部分的颜色『只适用于 IE』

　　bordercolordark="#00FFFF" 表格边框背光部分的颜色 使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

　　cols="2" 表格栏位数目，只是让浏览器在下载表格时 先画出整个表格而己。

tr属性：

　　align="RIGHT" 该行内所有单元格水平方向的摆放位置，可选值为： left, center, right。

　　valign="MIDDLE" 该行内所有单元格垂直方向的摆放位置，可选值为： top, middle, bottom。

　　bgcolor="#0000FF" 该行所有单元格底色

　　bordercolor="#FF00FF" 该行所有边框颜色 『只适用于 IE』

　　bordercolorlight="#808080" 该行所有边框向光部分的颜色 『只适用于 IE』

　　bordercolordark="#FF0000" 该行所有边框背光部分的颜色; 使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

 td属性：

　　width="48%" / height="400"  该单元格的宽度/高度，接受绝对值（如 80）及相对值（如 80%）。

　　合并单元格：

　　　　colspan="5"  该单元格向右打通的列数。跨列

　　　　rowspan="2"  该单元格向下打通的行数。跨行

　　align="RIGHT"  该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。

　　valign="BOTTOM"  该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

　　bgcolor="#FF00FF"  该单元格底色

　　bordercolor="#808080" 该单元格边框颜色 『只适用于 IE』

　　bordercolorlight="#FF0000" 该单元格边框向光部分的颜色『只适用于 IE』

　　bordercolordark="#00FF00" 该单元格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

　　background="myweb.gif" 该单元格　纸，与 bgcolor 任用其一

　　

 

<body>

    <!-- 列表标签 -->
    <dl>
        <dt>河南省</dt>
        <dd>郑州市</dd>
        <dd>开封市</dd>
        <dd>洛阳市</dd>
        <dd>南阳市</dd>
    </dl><hr/>
    
    <!-- 有序列表 -->
    <ol type="i">
        <li>人事部</li>
        <li>市场部</li>
        <li>研发部</li>
        <li>销售部</li>
    </ol><hr/>
    
    <!-- 无序列表 -->
    <ul type="circle">
        <li>人事部</li>
        <li>市场部</li>
        <li>研发部</li>
        <li>销售部</li>
    </ul><hr/>
    
    <!-- 定位跳转链接 -->
    <a name="test">定位跳转参考点</a>
    <pre>
    《木兰花令·拟古决绝词》
    人生若只如初见,何事秋风悲画扇. 
    等闲变却故人心,却道故人心易变.
    骊山雨罢清宵半,夜雨霖铃终不怨.
    何如薄幸锦衣郎,比翼连枝当日愿. 
    
    其二 《浣溪沙》
    谁念西风独自凉?萧萧黄叶闭疏窗,
    沉思往事立残阳.被酒莫惊春睡重,
    赌书消得泼茶香,当时只道是寻常.
    </pre>
    <br/><br/>
    
    <!-- 图片标签 -->
    <img src="/javaDemoWeb/image/001.jpg" alt="一张美女图片" />    <!-- 绝对路径 -->
    <img src="../image/002.png" alt="一张美女图片" />            <!-- 相对路径 -->
    
    <!-- 列表标签的使用 -->
    <dl>
        <dt><img src="../image/003.jpg" /></dt>
        <dd>一口价：49.00</dd>
        <dd>全国包邮！真爱巧克力</dd>
    </dl>
    <pre>    &copy;2018  懿达科技版权所</pre>
    <hr/>
    
    <!-- 定位跳转链接 -->
    &nbsp;<a href="#test">点击跳转到指定的参考点</a><hr/><br/>
    
    <!-- 表格标签 -->
    <table border="1" width="860" cellspacing="0">
        <!-- <caption>表格的标题：人员信息</caption> -->
        <tr><td colspan="3" align="center">表格的标题：人员信息</td></tr>    <!-- 跨列操作colspan -->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        
        <tr align="center">
            <td>张三</td>
            <td>21</td>
            <td rowspan="2">男</td> <!-- 跨行操作rowspan -->
        </tr>
        
        <tr align="center">
            <td>王桂花</td>
            <td>28</td>
            <!-- <td>女</td> -->
        </tr>
    </table><hr/><br/>
    
</body>

---

 10.表单标签

提交数据到服务器,这个过程可以使用表单标签实现！

<form></form> 定义一个表单的范围

属性：1、action 提交到地址 默认提交到当前页面

　　　2、method 表单的提交方式；常用的有两种：get  post 默认为get请求

 　　　　get和post的区别？

　　　　　　1，get请求 地址栏会携带提交的参数信息,安全级别较低；post不会携带(存在于请求体里面),安全级别较高

　　　　　　2，get请求由于都在地址栏中显示,有数据大小的限制；post请求没有限制

,　　  3、enctype  做文件上传时 才需要这个属性

　　输入项：输入内容或选择内容的部分；大部分的输入项使用<input type="输入项的类型" />;在输入项里面需要有一个name属性(表单提交到服务器中的参数值，用 ?...&...拼接)

 　　　　普通输入项：<input type="text" />

　　　　 密码输入项：<input type="password" />

 　　　　单选输入项：<input type="radio" name="sex" value="nv" />女

　　　　 　　必须的属性：name  name的属性值必须要相同

　　　　　　　　　　　　必须有一个value值

　　　　　　实现默认选中的属性： checked="checked" 

　　　　 复选输入项：<input type="checkbox" name="love" value="ym" />羽毛球

　　　　　　 必须的属性：name  name的属性值必须要相同　

　　　　　　　　　　　　必须有一个value值

　　　　　　实现默认选中的属性： checked="checked" 

　　　　 文件输入项（文件上传时用到）：<input type="file" />

　　　　 下拉输入项(不是在input标签中的)：

　　　　　　<select name=" ">

　　　　　　　　<option value="０＂>　请选择　</option>

　　　　　　　　<option value="＂>　</option>

　　　　　　　　<option value="＂>　</option>

　　　　　　　　<option value="＂>　</option>

　　　　　　</select>

　　　　　　下拉输入框的默认选中属性：selected="selected"

　　　　　文本域：<textarea cols="6" rows="8"></textarea>

　　　　　隐藏项（不会显示在页面上，但是存在于ｈｔｍｌ代码中）：<input type="hidden" />

　　　　　提交按钮：<input type="submit" value="注册" />

 　　　　  使用图片做提交操作：<input type="image" src="图片路径" />

 　　　　  重置按钮(回到所有输入项的初始状态)： <input type="reset" value="重置注册" />

　　　　   普通按钮(和js一起使用的)： <input type="button" value=" " />

<body>
    
    <!-- 表单标签 -->
    <form action="labelTest.html" method="post">
        
        姓&nbsp;&nbsp;&nbsp;名：<input type="text" name="name" /><br/>
        手机号：<input type="text" name="phone" /><br/>
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd" /><br/>
        性&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="nv" />女 &nbsp; <input type="radio" name="sex" value="nan" checked="checked" />男<br/>
        爱&nbsp;&nbsp;&nbsp;好：<input type="checkbox" name="love" value="pp" />乒乓球&nbsp;
            <input type="checkbox" name="love" value="ym" />羽毛球&nbsp;
            <input type="checkbox" name="love" value="l" checked="checked" />篮球&nbsp;
            <input type="checkbox" name="love" value="z" />足球<br/>
        文&nbsp;&nbsp;&nbsp;件：<input type="file" name="wj" /><br/>
        籍&nbsp;&nbsp;&nbsp;贯：
        <select name="jg">
            <option value="bj">北京市</option>
            <option value="hn" selected="selected">河南省</option>
            <option value="sd">山东省</option>
            <option value="zj">浙江省</option>
        </select><br/>
        自我介绍：<textarea name="jieshao" rows="3" cols="20"></textarea><br/>
        隐&nbsp;藏&nbsp;项：<input type="hidden" name="yc" /><br/>
<!--         <input type="submit" value="注 &nbsp;&nbsp; 册" /> -->
        <input type="image" src="../image/submit.png" /><br/>
        <input type="reset" value="重置注册" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="普通按钮" />
    </form><hr/><br/>
    
</body>

---

 11.使用表单标签 实现注册页面(案例)

<body>
    <h2>注册博客园账号</h2>    
    <form action="labelTest2.html" method="post">
        <table width="100%" cellspacing="0">
            <tr>
                <td align="right" width="100">注册邮箱：</td>
                <td><input type="text" name="mail" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>您可以使用<a href="#">账号</a>注册或<a href="#">手机号</a>注册</td>
            </tr>
            <tr>
                <td align="right">创建密码：</td>
                <td><input type="password" name="pwd" /></td>
            </tr>
            <tr>
                <td align="right">真实姓名：</td>
                <td><input type="text" name="realname" /></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td><input type="radio" name="sex" value="nan" checked="checked" />男&nbsp;<input type="radio" name="sex" value="nv" />女</td>
            </tr>
            <tr>
                <td align="right">生日：</td>
                <td>
                    <select name="year">
                        <option selected="selected" value="1990">1990</option>
                        <option value="1991">1991</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="1994">1994</option>
                        <option value="1995">1995</option>
                    </select>年
                    <select name="month">
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03" selected="selected">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                    </select>月
                    <select name="day">
                        <option value="01">01</option>
                        <option value="09">09</option>
                        <option value="12">12</option>
                        <option value="18" selected="selected">18</option>
                        <option value="24">24</option>
                        <option value="37">37</option>
                    </select>日
                </td>
            </tr>
            <tr>
                <td align="right">我现在：</td>
                <td>
                    <select name="status">
                        <option value="school" selected="selected">正在上学</option>
                        <option value="work">已经工作</option>
                        <option value="free">自由职业</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><img src="../image/yanzm.png" width="80"><a href="#">看不清,换一张</a></td>
            </tr>
            <tr>
                <td align="right">验证码：</td>
                <td><input type="text" name="yanzm" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="image" src="../image/zhuce.png" /></td>
            </tr>
        </table>
    </form>
</body>

---

 12.HTML中其它的常用标签

 

 

 

 

 

<b>这个文本是加粗的</b>

<strong>这个文本是加粗的</strong>

 

<em>这个文本是斜体的</em>

<i>这个文本是斜体的</i>

 

<big>这个文本字体放大</big>

<small>这个文本是缩小的</small>

 

这个文本包含_下标

这个文本包含^上标

 

<!-- 如何在 HTML 文件中写地址 -->

<address>

　　Written by <a href="mailto:webmaster@example.com">Jon Doe</a>

</address>

 

<!-- 如何实现文字的缩写 -->

<abbr title="etcetera">etc.</abbr><br />

<acronym title="World Wide Web">WWW</acronym>

 

<!-- 如何改变文字的方向 -->

<p>该段文字从左到右显示。</p>      

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> 

 

 

 

<p>

这是一个电子邮件链接：

<a href="mailto:lcs247735486@163.com?Subject=Hello%20again" target="_top">

发送邮件</a>

</p>

<!-- Subject=Hello%20again 指定发送邮件的主题 -->

 

<p>

<b>注意:</b> 单词之间空格使用 20% 代替，以确保浏览器可以正常显示文本。

</p>