HTML学习内容

原创

奋斗第蜗牛 2018-10-21 15:57:08 ©著作权

文章标签 余生很长 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者奋斗第蜗牛的原创作品，谢绝转载，否则将追究法律责任

先编写一个简单的HTML; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  hello,这是我的第一个网页 </body> </html>

运行后浏览器便会显示：hello，这是我的第一个网页

HTML头文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <title></title> </head> <body>

</body> </html>

补充<meta>标签（1）定义和用法 <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

（2）HTML 与 XHTML 之间的差异

在 HTML 中，<meta> 标签没有结束标签。

在 XHTML 中，<meta> 标签必须被正确地关闭。

（3）提示和注释：

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

（4）必须属性：content 定义与 http-equiv 或 name 属性相关的元信息 content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

     content 属性始终要和 name 属性或 http-equiv 属性一起使用。
                       
     可选属性：http-equiv   把 content 属性关联到 HTTP 头部。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称  /值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

   例如：
		 		 <meta http-equiv="charset" content="iso-8859-1">
			 charset 属性规定在外部脚本文件中使用的字符编码。如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。默认的字符编码是 ISO-8859-1。
			 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />      这个便是告诉服务器准备一个HTML文档，编译类型是UTF-8；
			    
					
			 
			    name  把 content 属性关联到一个名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
					如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
												 
			 例如：
			 <meta name="keywords" content="HTML,ASP,PHP,SQL">
			 name中的keywords为文档定义一组关键字，而content便是分别罗列   了这一组的关键字；
			 
			 
			 
			  scheme   定义用于翻译 content 属性值的格式。用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

3.文本标签

（1）<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。<style></style> style 元素位于 head 部分中。 (2) h1-h6标签，可定义标题，从h1开始到h6逐步减小； (3) 水平线标签<hr/>; (4) 段落标签<p></p>; (5) 段落缩进标签<blockquote></blockquote>; (6) 上下标标签sup和sub <sup><sup/><sub><sub/>; (7) 原样输出标签<pre></pre>; (8) 字体标签 <font></font>; color属性指定字体颜色 size属性:指定字体大小 face属性:字体的类型(宋体,黑体/默认是宋体) (9) 粗体标签<strong></strong> (10)斜体标签<em></em> (11)列表标签 A:有序列表有序列表标签<ol> <li></li> </ol>默认列表为数字排序有一type属性 B:无序列表无序列表标签<ul> <li></li> </ul>默认列表为disc实心圆点排序有一type属性 (12)块标签 <div></div>在HTML中直接设置属性，在css<style></style>标签中设置div{属性内容}属性，然后可直接调用<div></div>标签进行实现； (13)行内标签<span></span>在HTML可直接用,在css<style></style>标签中设置#spanid{属性内容}属性，然后可直接调用<span id=spanid></span>标签进行实现(定义id名前加#)；被用来组合文档中的行内元素，span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。 div标签(div+Css进行网页布局 :盒子模型)和span标签(span标签:表单验证)可以更加有效的使用；

	上述内容表示如下：
	
	<!DOCTYPE html>

<html> <head> <meta charset="UTF-8"> <title></title>  <style> div{

			background-color: #E4B9C0;
		}
		#span{font-size:24px;}
	</style>
</head>
<body>

  <!--
  	作者：offline
  	时间：2018-10-21
  	描述：h6-h1标签
  -->
<h6>标题1</h6>
<h5>标题2</h5>
<h4>标题3</h4>
<h3>标题4</h3>
<h2>标题5</h2>
标题6

  <!--
  	作者：offline
  	时间：2018-10-21
  	描述：水平线标签
  -->
<hr />
<!--
	作者：offline
	时间：2018-10-21
	描述：段落标签p
-->
<p>
	生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，
	它变得美丽。
</p>
<p>
	若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；
	若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。
</p>
<!--
	作者：offline
	时间：2018-10-21
	描述：blockquote段落缩进标签
-->
<blockquote>
	生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，
	它变得美丽。
</blockquote>
<hr />
<!--
	作者：offline
	时间：2018-10-21
	描述：上下标标签sup sub
-->
数学公式:y=x^2    y=x<sup>2</sup>    化学公式:水H2O    H<sub>2</sub>O
<hr />
<!--
	作者：offline
	时间：2018-10-21
	描述：原样输出标签pre
-->
<pre>
	function  pow(){
		alert("弹框")
	}
</pre>
<hr />
<!--
	作者：offline
	时间：2018-10-21
	描述：字体标签font
-->

<font color="aqua" size="7" face="微软雅黑">王某人</font> <br />  <strong>不去不去怕了怕了</strong> <em>不去不去怕了怕了</em> <hr />  你喜欢那种类型的美女？ <ol> <li>萝莉</li> <li>御姐</li> <li>青春</li> <li>可爱</li> </ol> 你不喜欢那种男人？ <ol type="A"> <li>臭狗蛋子</li> <li>大猪蹄子</li> </ol> <hr /> <ul> 你身为一个中国人自豪吗？ <li>自豪</li> <li>自豪</li> <li>自豪</li> <li>非常自豪</li> </ul> <ul type="circle"> 你有知己吗？ <li>有</li> <li>没有</li> <hr /> </ul>  <div>可直接配合上面调用style内设置的div属性调用</div> <br /> <div style="background-color: #5BC0DE">也可以直接设置</div> <hr />  <span id="span">使用id调用</span><br /> <span>当然</span><br /> <span style="font-size: 24px;">也可以直接设置</span> </body> </html>

运行可看；

超链接标签<a></a>

常用属性： href属性：需要连接到的资源文件或者地址； target属性：打开资源文件的方式 _self 当前窗口打开 _blank 新建一个窗口打开；超链接的作用: 1)连接到资源文件或者资源地址 2)作为锚连接来使用

						如果是在同一个html页面下:
								1)打锚点
									<a 指定name锚点名称属性="属性值"></a>
					
							 	2)创建一个连接到锚点的超链接
									<a rel="nofollow" href="#锚点名称">点我</a>
									
						在不同html页面下的使用:
								1)在另一个页面上先打锚点
									<a name="锚点名称"></a>
								2)在当前页面下创建一个连接到锚点的超链接
									<a rel="nofollow" href="文件名称或者地址#锚点名称">点我</a>
									
									
									
               <!DOCTYPE html>

再建立一个新HTML，命名maodian.html

打锚点

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a name="list"></a> 我的天哪！！ </body> </html>

5.图像标签 : img 空标签体 <img/> 属性: src:链接到的资源图片 width:图片的宽度两种方式:一种指定px(像素) 第二种:百分比 title:悬停状态,会显示文字 alt:当图片失效的时候,用来解释说明该图片 height:图片的高度px

			<!DOCTYPE html>

6.转义字符

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>标题</h3> <h3>标题 </h3>；西部开源<sup>®</sup> 2007-2018<sup>©</sup> </body> </html>

7.表格标签table

表格标签:<table></table>  
    			    一个表格要想有效果:必须有边框的属性
    			    border :边框  (1px)
    			    align:当前表格在浏览器中的对其方式
    				属性值:left   center  right
    			    width:表格的宽度
    			    height:表格的高度
    			    bgColor:背景色
    			        
		            <caption></caption>:定义表格标题，放在table标签后
                	行标签:tr
    	            表头标签:th(特点:自动居中,并且自动适当加粗)
    	            单元格(列):td
    	
                	rowspan:行合并
    	            colspan:列合并

         例如：
					 <!DOCTYPE html>

<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1px" align="center" width="400px" height="300px" bgcolor="#FFFF00"> <caption>XXX学校的成绩表</caption> <tr> <th>姓名</th> <th>班级</th> <th>成绩</th> </tr> <tr align="center"> <td rowspan="2">王某人</td> <td>计算机1班</td> <td>100</td> </tr> <tr align="center"> <td>计算机二班</td> <td>80</td> </tr> <tr align="center"> <td>刘某人</td> <td>数学一班</td> <td>0</td> </tr> <tr align="center"> <td colspan="2">平均分</td> <td>60</td> </tr> </table> </body> </html>

8.表单标签

form两个重要的属性: action:提交的地址(可以是资源文件或者URL:统一资源定位符)
method:提交方式:常用的两种:post get

			文本输入框:<input type =text/>
			
			注意事项:在表单标签中,name属性一定要指定,作为后台提交
				
				
			onsubmit:表示当前表单是否提交成功,
	        true:表示提交成功
	        false:表示提交失败
		
		    文本输入框
		    <input type ="text" />
		    name属性:必填项(给后台标记的)	
				value表示输入框的内容
	    	密码输入框:非明文的形式显示出来
        	<input type ="password" />
        	name属性:必填项(给后台标记的)
	
	
		    单选框:<input type="radio" />
	        name属性:必填  将性别看成同一组信息
	
	
        	复选框:
            <input type="checkbox" />
        	name属性:必填:将这些复选框看成同一组信息


           ！！！(重点)隐藏域:<input type="hidden" name="hi" />
           注意事项:不会显示一些效果,但是他可以携带数据
					 
					 
          上传照片:
          <input type="file" name="photo">


          文本域:<textarea></textarea>
          属性:name属性必填
          rows:文本雨中有多少行
          cols:一行能写多少个字符


         下拉菜单
         <select name="必填">
		 <option>请选择</option>
         </select>



         按钮:<input type="button" />
         指定value属性
         type="submit"  提交
		 type ="reset" 重置
				
				
				上述标签的简单实现:
				<!DOCTYPE html>

	        <input type="hidden" name="hi" id="hidenId" /><br />
		上传照片:<input type="file" name="photo" /><br /> 
		自我描述:<textarea name="text" rows="10" cols="20">开始表演</textarea><br />
		籍贯:    <select name="jg">
			         <option value="请选择">请选择</option>
			         <option value="湖南">湖南</option>
			         <option value="湖北">湖北</option>
			         <option value="山西">山西</option>
			         <option value="陕西">陕西</option>
		         </select>
		         <input type="button"value="这是个按钮" /><br />
		         <input type="submit"value="提交" />  
		         <input type="reset" value="重置" />
	</form>
</body>

</html>

9.面试题?:表单标签中method提交方式post和get的区别?！！！！

				get方式提交:
							1)将用户的信息展示到了地址栏中(不安全)
							2)get方式提交,提交的文件大小有限制,不超过64kb
							
				post提交方式:
							1)post提交方式不会将用户的信息显示到地址栏中
							2)该提交方式提交文件大小无限制!