Java Web入门基础(HTML)

1.HTML的操作思想(理解):

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

      一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式

2.文字标签和注释标签

         *文字标签:修改文字的样式

              --<font></font>

              --属性

                      *size:文字的大小  取值范围1-7,超出了7,默认还是7

                      *color:文字颜色

                             -两种表示方式

                                       *****英文单词:red,green,blue...........

                                       *****使用十六进制表示  #ffffff:RGB

                                            --通过工具实现不同的颜色
    *注释标签

                  ---HTML的注释:<!-- html的注释-->

3.标题标签,水平标签和特殊字符

             *标题标签

                     <h1></h1>   <h2></h2>  <h3></h3>...........<h6><h6>

<html>
<head>
<title>示例4</title>
<body>
<h1>题目1</h1>
<h2>题目2</h2>
<h3>题目3</h3>
<h4>题目4</h4>
<hr size="5" color="blue"/>
&lt;html&gt;是&nbsp;&nbsp是个网页
</body>
</head>
</html>

             *水平线标签

                     ---<hr/>

                     ---属性:size:从1-7 超过默认为7  一次減小

                                    color:颜色

            *特殊字符

                      -----需要对特殊字符进行转义

                                    <   &lt;

                                    >   &gt;

                                    空格 &nbsp;

                                    &     &amp;

4.列表标签

          ---显示如下效果

                              公司

                                    财务部

                                    人事部

        ****<dl></dl>:表示列表范围

              ****在dl里面 <dt></dt>

               ****在dl里面 <dd></dd>

        ---代码

<dl>
   <dt>公司</dt>
   <dd>财务部</dd>
   <dd>人事部</dd>
</dl>

       ----想在页面下面显示这样的效果

                    1.财务部

                    2.学工部

                     3.人事部

                    **<ol></ol>:有序列表的范围

                              **在ol标签的里面<li>具体内容</li>

                                    ---在ol标签中有属性type:设置排序方式(默认为1,2,3)

<ol>

   <li>财务部</li>
   <li>人事部</li>
   
</ol>

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

                          属性:type: 空心圆circle 实心圆:disc  实心方块:square ,默认:disc

                          在ul中<li></li>

                  ---代码

<ul type="circle">
    <li>财务部</li>
	<li>人事部</li>
</ul>

6.表单标签(重点)

     *可以提交数据到服务器,这个过程可以用表单来实现
        *<form></form>:来定义一个表单的范围 
                 ----属性:
                  ****action:提交到地址,默认提交到当前页面

                                     *****method:表单提交方式

                                              -----常用的有两种  get和post,默认是get请求

                                              ------面试题目:

                                                               1.get请求地址栏会携带提交的数据,post不会携带

                                                               2.get请求安全级别较低,post较高

                                                               3.get请求数据大小的限制,post没有限制(大文件上传用post)

                                   ******enctype:一般的情况不会使用,但是文件上传的时候会使用

             **输入项:可以输入内容或者其他的内容部分

                           -----大部分输入项使用<input type="输入项的类型">

                                  *******在输入项里面需要一个name属性

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

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

                                      *******单选输入项:<input type="radio"/>

                                    

                                                      ------默认选择为checked="checked"

                                                      -----在里面需要属性 name

                                                       -----name的属性值必须相同

                                                       ------必须有一个value值

                                      ********复选输入项:<input type="checkbox">

                                                     --------默认选择为checked="checked"

                                                       ------在属性里面需要属性name

                                                      ------name中的属性值必须相同

                                                     -------必须有一个value值

                                     *********文件输入项(在后面上传的时候用到)

                                                  <input type=""file>

                                    **********下拉选项(不是在input标签中)

                                                  <select name="birth">

                                                   <option value="1991">1991</option>

                                                   <option value="1992">1992</option>

                                                  <option value="1993">1993</option>

                                                   </select>

                                            ------默认选择和单选多选不一样是selected="selected"

                              *************文本域

                                                  <textarea> cols="10" rows="10"></textarea>

                                 ************隐藏项

                                                    <input type="hidden"/>

                                 ***********提交按钮

                                                    <input type="submit" value="提交">

                                         *****使用图片提交

                                                   <input type="image" src="图片路径">

                              ***************重置按钮:表示回到输入项的初始状态

                                                    <input type="reset" value="">

                              ***************普通按钮

                                                     <input type="button">


--------------------------------代码如下-------------------------

<!--表单---->
<form action="" method="post">
     手机号码:<input type="text" name="phone"/><br/>
	 密码:<input type="password" name="password"/><br/>
	 性别:<input type="radio" name="sex" value="nv" checked="checked"/>女<input type="radio" name="sex" value="nan"/>男<br/>
	 爱好:<input type="checkbox" name="love" value="lanqiu" checked="checked"/>篮球<input type="checkbox" name="love" value="足球"/>足球<input type="checkbox" name="love" value="paiqiu"/>排球<br/>
     文本上传<input type="file"/><br/>
	 <!--下拉选项-->
	 出生年份:<select name="birth">
	    <option value="请选择" selected="selected">请选择</option>
	    <option value="1991">1991</option>
		<option value="1992">1992</option>
		<option value="1993">1993</option>
	 </select><br/>
	 文本输入:<textarea cols="10" rows="10"></textarea><br/>
	 <input type="submit" value="提交"><br/>
	 <input type="image" src="m1.jpg"><br/>
	 <input type="reset" value="重置注册"><br/>
	 <input type="button">
	 
	 </form>

7.表单案例:

<html>
    <head>
	     <title>注册</title>
	</head>
	      <h2>注册信息</h2>
	<body>
	<form action="1.html">
	     <table width="100%">
		       <tr>
			       <td align="right">注册邮箱:</td>
				   <td><input type="text" name="email"></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="password"></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="nv">女<input type="radio" name="sex" value="nan">男</td>
			   </tr>
			   <tr>
			       <td align="right">生日:</td>
				   <td>
				       <select name="year">
					       <option value="1991">1991</option>
						   <option value="1992">1992</option>
						   <option value="1993">1993</option>
					   </select>
					   <select name="month">
					       <option value="12">12</option>
						   <option value="11">11</option>
						   <option value="10">10</option>
					   </select>
                       <select name="day">
					       <option value="1">1</option>
						   <option value="2">2</option>
						   <option value="3">3</option>
					   </select>
				   </td>
			   </tr>
			   <tr>
			       <td align="right">我现在</td>
				   <td>
				       <select name="现在">
					       <option value="上学">上学<option>
						   <option value="上班">上班</option>
						   <option value="创业">创业</option>
					   </select>
				   </td>
			   </tr>
			   <tr>
			        <td>&nbsp</td>
					<td><img src="m1.jpg"><a href="#">看不清楚换一张</a></td>
			   </tr>
			   <tr>
			        <td align="right">验证码</td>
					<td><input type="text" name="verycode"></td>
			   </tr>
			   <tr>
			        <td>&nbsp</td>
					<td><input type="submit" value="注册"></td>
			   </tr>
		 </table>
	</form>
	</body>
</html>

点击注册后:


8.其他标签

         <b></b> :加粗

         <u></u>:下划线

        <i></i>:斜体

        <s></s>:删除线

       <pre></pre>:原样输出

       <sub></sub>: 下标

       <sup></sup>:上标

       <div></div>: 会自动换行

      <span></span>:会在一行显示不会换行

      <p></p>:段落标签 比<br/>多换一行

9.HTML的头标签的使用

        <title></title>:标题标签

         <meta/>:设置页面的相关内容

                  <meta http-equiv="refresh" content="3;url=1.html"/>页面定时跳转,在等待3秒后,跳转到1.html

        base标签:超链接的基本设置

             -------可以统一设置打开的基本方式

                <base target="_blank"/>

       link标签:引入外部的文件

                  css中link中引用css文件

10.框架标签:

       ****<frameset>

                  --rows:按照行进行划分

                         ***<frameset rows="80,*">

                  --cols:

                        ***<frame cols="80,*">

       *****<frame>

                    ----具体显示的页面

                            <frame name="lower_left" src="1.html">

         *****使用框架标签,不能使用在body里面

     

       <frameset rows="80,*">  //把页面划分成上下两部分
	         <frame name="top" src="a.html">  //上面的页面
			        <frameset cols="80,*">  //把下面的部分划分成左右两部分
				    <frame name="lower_left" src="b.html">  //左边的页面
				    <frame name="lower_right" src="c.html">  //右边的页面
				</frameset>
	   </frameset>
         ****如果在左边的页面超链接,想要内容显示在右边的页面中

                    <a href="1.html" target="low_right">超链接1</a>








猜你喜欢

转载自blog.csdn.net/silence_hv/article/details/80310801