您现在的位置是:首页 > 正文

JavaWeb之HTML标签

2024-04-01 07:31:51阅读 1

JavaWeb之HTML标签那些事

一、文件标签

<!-- 
 1.文件标签:构成html最基本的标签(保证了html的整体框架)
      *<html>:根标签,格式:<html></html>
	  *<head>:头标签,指定文本一些属性,也可用于引入外部资源文件(CSS中详细介绍),格式:<head></head>
	  *<title>:标题标签,格式:<title></title>
	  *<body>:体标签,文本内容写在此标签里,格式:<body></body>
	  *<!DOCTYPE html>:html5中定义的html文档
-->
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
    我爱html
</body>
</html>

二、文本标签

<!DOCTYPE html>

<!-- 
2.文本标签:构成文本的标签
      *<p>:段落标签,格式:<p>段落内容</p>
	  *<h1>到<h6>:标题标签,格式:<h1>标题</h1>
	          <h1>到<h6>字号逐渐减小
	  *<br/>:换行标签
	  *<hr>:一条水平线,可以定义属性,格式:<hr color="颜色种类" width="宽度" size="高度" align="对齐方式"/>
	        *color:颜色(如color="yellow")
			*width:宽度(如width="100",单位为px(像素))
            *size:高度(如size="50",单位为px(像素))
	        *align:对齐方式(left,center,right)
	     注意:最新html5中已经不支持这些属性,但是浏览仍旧支持
	  *<b>:对文本文字进行加粗,格式:<b>文字</b>
	  *<i>:斜体,格式:<i>文本文字</i> -->
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- <p>:段落标签,格式:<p>段落内容</p> -->
  <p>我爱html</p>
  
<!-- <h1>到<h6>:标题标签,-->
  <h1>我爱html</h1>
  <h2>我爱html</h2>
  <h3>我爱html</h3>
  <h4>我爱html</h4>
  <h5>我爱html</h5>
  <h6>我爱html</h6>
  
<!-- <br/>:换行标签 -->
      我爱中国
      我爱html
      
      我爱中国<br>
      我爱html
 
<!-- <hr>:一条水平线 -->
      <hr color="yellow" width="20px" size="20" align="center">
  
<!-- <b>:对文本文字进行加粗 -->
      <b>我爱中国 </b>
      
<!-- <i>:斜体 -->
      <i>我爱中国</i>
</body>
</html>

三、图片标签

<!DOCTYPE html>
<!-- <img>:展示图片,格式:<img src="文件路径" alt="图像展示的代替文字"/>
	         常用属性:
			 *src:指定图片的指定位置,很多情况下使用相对路径
				     相对路径:
					  *./:代表当前路径(默认路径)例:<img src="./图片/图片3" alt="图像展示的代替文字"/>
      			      *../代表上一级目录 例:<img src="../图片/图片3" alt="图像展示的代替文字"/> -->
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!-- <img>:展示图片-->
    <img src="./images/clock.png" alt="时钟"/>
    
    <img src="../images01/pic1.jpg" alt="jpg"/>
</body>
</html>

四、列表标签

<!DOCTYPE html>
<!-- 
           列表标签:
        1.<ol>:有序列表,格式:<ol type="选择样式" start="从哪个位置开始(数字表示)"><li>每一项内容</li></ol>
                 *type有如下几种:
                          *1
                          *A
                          *a
                          *I
                          *i
		2.<ul>:无序列表,格式:<ul type="选择样式" ><li>每一项内容</li></ul>	 
		       *type有如下几种:
                          *disc:圆点
                          *square:方框
                          *circle:圆圈
                          
		 注意:属性可以根据需要进行选择写几个,也可以不写
-->
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!-- 有序<ol>:有序列表 (无属性)-->
 <ol>
    <li>课前预习</li>
    <li>课上听讲</li>
    <li>课下复习</li>
 </ol>
 
 <!-- 有序<ol>:有序列表 (有属性)-->
 <ol type="A" start="2">
    <li>课前预习</li>
    <li>课上听讲</li>
    <li>课下复习</li>
 </ol>
 
 <!-- <ul>:无序列表 (无属性)-->
 <ul>
    <li>课前预习</li>
    <li>课上听讲</li>
    <li>课下复习</li>
 </ul>
 
 <!-- 有序<ol>:有序列表 (有属性)-->
  <ul type="disc">
    <li>课前预习</li>
    <li>课上听讲</li>
    <li>课下复习</li>
 </ul>
 
 
 <ul type="square">
    <li>课前预习</li>
    <li>课上听讲</li>
    <li>课下复习</li>
 </ul>
 
 <ul type="circle">
    <li>课前预习</li>
    <li>课上听讲</li>
    <li>课下复习</li>
 </ul>
</body>
</html>

五、链接标签

<!DOCTYPE html>
<!--
           链接标签:
        *<a>:超链接,格式:<a href="位置" target="打开方式">文字信息</a>
		  属性:
		     *href:定义资源的访问位置(不仅可以访问网络资源,还可以访问本地的一些资源,如图片,邮件)
             *target:指定打开方式
			    *_self:在本页面打开
				*_blank:新打开一个选项卡展示页面 
-->
<html>
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!-- <a>:超链接  访问网络资源 -->
   <a href="http://www.baidu.com">百度</a>

   <a href="http://www.baidu.com"  target="_self">百度</a>
   <a href="http://www.baidu.com"  target="_blank">百度</a>
<!-- <a>:超链接  访问本地图片资源 -->
   <a href="./images/clock.png">百度</a>

<!-- <a>:超链接  访问本地邮件 -->
   <a href="maioto:邮箱地址">我的邮箱</a>
   
<!-- 图片链接 -->
  <a href="http://www.baidu.com"> <img src="./images/clock.png" alt="时钟"/></a>

</body>
</html>

六、表格标签

<!DOCTYPE html>

<!--
            表格标签:
       *<table>:定义一个表格,格式:<table></table>
	     *属性: 
		       *width:宽度
			   *border:边框
			   *cellpadding:内容和单元格间的距离
			   *cellspacing:单元格之间的距离,如果为0,单元格线会合为一条
			   *bgcolor:背景色
			   *align:对齐方式
	    *<tr>:定义行,格式:<tr></tr>
		      属性:
			     *bgcolor:背景色
				 *align:对齐方式	      
		*<td>:定义单元格,格式:<td></td>
		      属性:
			     *colspan:合并列
				 *rowspan:合并行
		*<th>:定义表头单元格,格式:<th></th>
		*<caption>:表格标题,格式:<caption>表格标题</caption>
		*<thead>:表格头部分
		*<tbody>:表格体部分
		*<tfoot>:表格脚部分 
-->
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!-- table 无属性 -->
<table>
     <tr>     
         <th>身份</th>
         <td>姓名</td>
         <td>年龄</td>
     </tr>
     
     <tr>
         <td>群众</td>
         <td>王小二</td>
         <td>15</td>
     </tr>
     
     <tr>
        <td>共青团员</td>
        <td>周小三</td>
        <td>18</td>
     </tr>

</table>



<!-- table 有属性 -->
<table border="1" width="400" bgcolor="yellow">
     <tr>     
         <th>身份</th>
         <td>姓名</td>
         <td>年龄</td>
     </tr>
     
     <tr>
         <td>群众</td>
         <td>王小二</td>
         <td>15</td>
     </tr>
     
     <tr>
        <td>共青团员</td>
        <td>周小三</td>
        <td>18</td>
     </tr>
     
     <tr>
        <td colspan="2">共青团员</td>
        <td>18</td>
     </tr>

</table>    
</body>
</html>

八、表单标签

<!DOCTYPE html>
<!-- 

表单标签:
        *表单:用于采集用户输入数据的。用于和服务器进行交互
        *标签:form:用于定义表单,可以定义一个范围,可以采集用户数据的一个范围
                    *action:指定提交数据的URL  
                    *method:指定提交方式
                    *表单项数据如果想要被提交,必须指定name属性
                          *分类:一共7种,常用的2种
                                    get:
                                             1.请求的参数会在地址栏中显示
                                             2.请求参数的大小有限制
                                             3.不太安全
                                    post:
                                             1.请求的参数不会在地址栏中显示,会封装在请求协议中(http协议)
                                             2.请求参数的大小无限制
                                             3.较为安全
                    例子:<form action="#" method="get">
                            <label>用户名</label> <input type="text" name="username" placeholder="请输入用户名"><br>
                           <label>密码</label> <input type="password" name="password" placeholder="请输入密码"><br>
                           <input type="radio" name="gender" value="male" checked>男
                           <input type="radio" name="gender" value="female">女<br>
                          <input type="checkbox" name="interest" value="game" checked>打游戏
                          <input type="checkbox" name="interest" value="mobile">玩手机
                         <input type="checkbox" name="interest" value="readbook">看书<br>
                         <input type="submit" value="登录">
                         <input type="submit" value="取消">
                         <input type="file" value="file">
        *表单项标签:
                   *input:可以通过type属性值展示不同元素的样式
                               *type属性:
                                         *text:文本输入框,默认值
                                         *placeholder:指定输入框的提示信息,当输入框信息发生改变,会自动清空提示信息
                                         *password:密码输入框
                                         *radio:单选框
                                                       注意:1.要想让多个单选框实现单选的值,必须使name值一样
                                2.一般会给每个单选框提供value值指定
                                3.checked属性,可以指定默认值
                   *checkbox:复选框
                               1.一般会给每个单选框提供value值指定
                               2.checked属性,可以指定默认值
                   *file:文件选择框
                   *hidden:隐藏域,用于提交一些隐藏信息
                   *按钮:
                        *submit:用于提交数据
                        *button:普通按钮
                        *image:图片按钮
                              *src指定图片位置
                                             
                   *label标签:指定输入项的文字描述信息
                        *label的for属性一般会和input的id的属性值对应,如果对应,点击label区域,会让input输入框获取焦点
                   *select:下拉列表
                        *子元素:option指定元素值,默认值selected
                   *textarea:文本域
                        *col:指定列数,每一行有多少个字符
                        *rows:默认多少行





 -->
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
     <label>用户名</label>
     <input type="Text" name="username"><br>
	 <label>密码</label>
	 <input type="password" name="password"><br>
	 
	 <!--图片属性-->
	 <input type="file" name="file"><br>
	 
	 <!--调色器-->
	 <input type="color" name="color"><br>
	 
	 <!--生日日期-->
	 <input type="date" name="birthday"><br>
	
	 <!--生日日期-->
	 <input type="datetime-local" name="birthday"><br>
	 
	 <!--邮箱-->
	 <input type="email" name="email"><br>
	 
	 <!--年龄-->
	 <input type="number" name="age"><br>
	 
	 <!--省份-->
	 <select name="province">
	            <option value="">--请选择--</option>
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3" selected>潢川</option> 
	 </select><br>
	 
	 <!--自我描述-->
	 <textarea cols="20" rows="5" name="des"></textarea><br>
	 
	  <!--确认按钮-->
	 <input type="submit" name="submit" value="确定"><br>
	 
	 <!--取消按钮-->
	 <input type="reset" name="reset" value="取消"><br>
	 
	 <!--图片按钮-->
	 <input type="image" src="./images/pic.jpg"><br>
	 
	 <!--取消按钮-->
	 <input type="submit" name="submit" value="确定"><br>
	 
	 <!-- 文本域 -->
	 <textarea row="5" col="15"></textarea>
	 </form>
</body>
</html>

总结

JavaWeb中的HTML标签除上述外还有很多,上面只是列出常用的一些标签,一些标签或者属性虽然已经不被html5支持,但是浏览器中向下兼容,还可以使用,仅供学习使用。如有不足,敬请指正!

网站文章