JAVA WEB之HTML

最新推荐文章于 2024-04-04 12:25:24 发布
Intelligebce
最新推荐文章于 2024-04-04 12:25:24 发布
阅读量259
点赞数
分类专栏： JAVA WEB
本文链接：https://blog.csdn.net/Intelligebce/article/details/82917235
版权
JAVA WEB 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
一、HTML简介
   **全称为HyperText Markup Language 译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式，比如字体颜色、大小。。。。
   **HTML是最基础的网页语言
   **HTML是通过标签来定义的语言，代码都是由标签组成
   **HTML文件后缀名为.html或者.htm
     不需要编译，直接通过浏览器就可以运行
二、HTML的规范
   1、html文件的开始和结束标签 <html> </html>
   2、html包含两部分内容：
     <head></head> 设置相关的信息 title
	 <body></body> 显示在页面上的内容都在body里面
   3、html语言代码不区分大小写
   4、有些标签没有结束标签，在标签内结束
    -换行 <br/>
	-水平线 <hr/>
三、HTML中常用的标签
    1、文字标签 （修改文字样式）
	 -<font></font>
	 -属性
	    *size：文字大小，范围1-7，超出7，默认还是7
		*color：文字颜色
		  -两种方式
		     **英文单词： red，green，blue，white
			 **使用16进制表示（RGB）： 
                -通过工具实现不同颜色
    2、注释标签
	 -HTML的注释： <!--html的注释-->
    3、标题标签、水平线标签、特殊字符
	 *标题标签 
	 <h1>标题一</h1>
	 <h2>标题二</h2>
	 <h3>标题三</h3>
	 ...
	 <h6>标题六</h6>
	 -从h1到h6依次变小，同时会自动换行
	 *水平线标签
	 -<hr>
	 -属性 
	      **size：范围1-7
		  **color：颜色
	4、特殊字符
	   * < : &lt;
	   * > : &gt;
	   * 空格 ： &nbsp
	   * &    ：&amp
	5、列表标签
	     传智播客
		       财务部
			   学工部
			   人事部
	   *定义列表
	     **<dl></dl>: 表示列表范围
		   ** 在dl里面 <dt></dt>: 上层内容
		   ** 在dl里面 <dd></dd>: 下层内容
		 -代码：
		  <dl>
		      <dt>传智播客</dt>
			  <dd>财务部</dd>
			  <dd>学工部</dd>
			  <dd>人事部</dd>
		  </dl>
	     -想在页面上先这样的效果
		  1. 财务部
		  2.学工部
		  3.人事部
		** <ol></ol> :有序列表的范围
		  -属性 
		     type：设置排序方式 默认为 1 ，也可设置a，i
		  ** 在<ol>标签里面 <li>具体内容</li>
		  <!--有序列表-->
		  <ol>
		      <li>财务部</li>
			  <li>学工部</li>
			  <li>人事部</li>
		  </ol>
	    **<ul type="circle"><li></li></ul> :无序列表
		  type:空心圆circle，实心圆disc，实心方块square，默认为disc
    6、图像标签（掌握）
	    *<img src="图片的路径"/> 
		 -src
		 -width
		 -height
		 -alt:图片上显示的文字， 把鼠标停在图片上，停留片刻显示内容
         	**有些浏览器不显示
		
		路径介绍：
		     **绝对路径
			 **相对路径
			 -html文件和图片在同一路径下，可以直接写文件名
			-当图片在html文件的子目录下，
		       --C:\Users\asus\Desktop\day01\code\ 4.html
			   --C:\Users\asus\Desktop\day01\code\ img\a.jpg
			  可以直接写src = “img\a.jpg”
			-当图片在html文件的父目录下
			  --C:\Users\asus\Desktop\day01\  code\ 4.html
			  --C:\Users\asus\Desktop\day01\  a.jpg
	            可以直接写src = “../a.jpg”
				上层的上层 ../../
    7、超链接标签
	    *链接资源(zhangwo)  
		  - <a href=“链接到资源的路径”>这是一个超链接</a>
		    **href :链接资源的地址
			 **target ：设置打方式,默认是在当前页打开_self ：
			          _blank表示在一个新窗口打开
					  当超链接不需要到任意地址直接指定href=“#”
					
		*定位资源
		  **如想要定位资源，定义一个位置
		    <a name="top">顶部</a>
		  **回到这个位置
		    <a href="#top">回到顶部</a>
		  **<pre></pre>表示原样输出标签
	8、表格标签<重要>
	    *可以对数据进行格式化，数据显示更清晰
		
		*<table></table>: 表示表格的范围
		  **属性
		-border 表示表格线的粗细
		-bordercolor 表示表格线的颜色
		-cellspacing 表示单元格框线和表格边框线的间隔
		-weight  表示表格的宽
		-height  表示表格的高
		 **在table标签里面 <tr></tr>:表示表格中的一行
		   tr的属性
		     -align ：left，center， right
		   ***在tr标签里面 <td></td>:表示表格中的一个单元格
		                  使用<th></th>也可以表示单元格 单元格设置为居中、加粗
			  **合并单元格
		        -rowspan 跨行合并
                -colspan 跨列合并				
	    **表格的标题
		  <caption></caption>
		  
		  <table border="1" bordercolor="red">
		  <table border="1" bordercolor="red">
		   <tr>
		     <td colspan="3">人员信息</td>
		   </tr>
		   <tr>
		     <td>东方不败</td>
			 <td>男</td>
			 <td><20/td>
		   </tr>
		   <tr>
		      <td>岳不群</td>
			  <td>男</td>
			  <td>40</td>
		   </tr>
		   <tr>
		       <td>林平之</td>
			   <td>男</td>
			   <td>40</td>
		   </tr>
		  </table>
	9、表单标签（重要的标签）
        **可以提交数据到相应的服务器，这个过程可以使用表单标签实现	
		*<form></form> :定义表单的范围
		 -action: 数提交的地址 ，默认提交到当前的页面
		 -method：表单的提交方式
		   -常用的有两种
		      method=“get”
			  method="post" ,默认是get
			-面试题目  get和post的区别
			   1、get请求地址栏会携带提交的数据，posp不会携带
			   2、get请求安全级别低，post比较高
			   3、get请求数据有大小限制，post没有
		 -enctype：一般不需要做这个属性，做文件上传的时候需要设置这个属性	   
       			
		 **输入项：可以输入的内容或者可以选择的内容的部分
		  -大部分都可以用 <input type="输入的类型"/>
		    输入项里面必须要有name属性，不然会提交不上去
		  ***普通输入项：<input type="text"/>
		  ***密码输入项： <input type="passsword"/>
		  ***单选输入项： <input type="radio" name="sex"/>女<input  type="radio" name="sex"/>男
		     -里面需要name属性
			 -name属性必须一样
			 
			 -实现默认选中的属性
			   --checked=“checked”
			     <input type="radio" name="sex" value=“women” checked="checked"/>女<input  type="radio" name="sex"/>男
				 默认选择女 
		  ***复选输入项：<input type="checkbox"/>
		     -里面需要name属性
			 -name属性必须一样
		  ****文件输入项（文件上传的时候用到）
		     -<input type="file"/>
		  ***下拉输入项：
		    <select name="birth">
			   <option value="1992">1992</option>
			   <option value ="1993">1993</option>
			   <option value="1994">1994</option>
			   <option value="1995">1995</option>
			   <option value="1996">1996</option>
			</select>
			--默认选中使用select属性
			  <option value ="1993" slected="slected">1993</option>
			  
		  ***文本域
		  <textarea cols="10" rows="5 "></textarea>
		  ***隐藏项：不显示在页面上，但显示在源代码中
		      <input type="hidden"/>
		  ***提交按钮
		    <input type="submit" value="注册"/>
		  ****重置注册:回到初始状态
		    <input type="reset" value="重置注册"/>
			
			
	      ***使用图片提交
		  <input type="imag" src="a.jpg"/>
		<!--表单程序-->
		  <form action="hello.html" method="get">
		    手机号码：<input type="text" name="phone"/><br/>
			创建密码：<input type="passsword" name="pwd"/><br/>
			性别：<input type="radio" name="sex" value="woman"/>女<input type="radio" name="sex" value="man"/>男<br/>
			爱好：<input type="checkbox" name="love" value="y"/>羽毛球<input type="checkbox" name="love" value="p"/>乒乓球<input type="checkbox" name="love" value="pp"/>排球<br/>
			文件：<input type="file"/><br/>
			生日：<select name=“birth”>
			   <option value="0">请选择</option>  
			   <option value="1992">1992</option>
			   <option value ="1993">1993</option>
			   <option value="1994">1994</option>
			   <option value="1995">1995</option>
			   <option value="1996">1996</option>
			
			      </select>
				  <br/>
			自我描述：<textarea cols="10" rows="5" name="tex"></textarea><br/>
			隐藏项：<input type="submit" value="注册"/>
			<br/>
		  </form>
    10、HTML中其他常用的标签
	   b s u i pre sub sup div span p
	   <b></b> :加粗
	   <s></s> :删除线
	   <u></u> :下划线
	   <i></i> :斜体
	   <pre></pre>:原样输出
	   
	   <sub></sub>: 下标
	   <sup></sup>: 上标
	   <div></div>  :自动换行
	   <span></span>:不换行
	   p ：段落标签 比br多一行
	11、html头标签
	   -title ：表示在标签上现实的内容
	   -meta  ：设置页面相关的信息
	     <meta http-equiv="refresh" content="3;url=hello.html"/>
         3秒后跳转到hello.html页面
		 
	   -base标签：设置超链接的基本设置:统一设置超链接的打开方式
	   
	     - <a href=“链接到资源的路径”>这是一个超链接</a>
		    **href :链接资源的地址
			 **target ：设置打方式,默认是在当前页打开_self ：
			          _blank表示在一个新窗口打开
					  当超链接不需要到任意地址直接指定href=“#”
	   <base target="_blank"/>
	      
		-link标签：引入外部文件
            可以使用link标签引入css文件		
	12、框架标签：
	   *<frameset></frameset>
	    -rows:按行划分
		-cols:按列划分
	   *frame具体显示的页面
	     -<frame name="lower_left" src="hello.html">
	   **使用框架标签的时候，不能写在body里面，使用框架标签需要把body去掉
	    * <frameset>
		    <frame name="top" sr="a.html"> //把上页面划分为上下两部分
			                               //上面页面
            <frameset cols="150,*">        //把下面划分成左右两部分
            <frame name="lower_left" src="b.html"> //左边的部分			
			<frame name="lower_right" src="c.html"> //右边的部分
		    </frameset>
		  </frameset>
Intelligebce
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA WEB之HTML

一、HTML简介 **全称为HyperText Markup Language 译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式，比如字体颜色、大小。。。。 **HTML是最基础的网页语言 **HTML是通过标签来定义的语言，代码都是由标签组成 **HTML文件后缀名为.html或者.htm 不需要编译，直接通过浏览器...
复制链接

扫一扫
专栏目录