html基礎大全(經典)-html教學-PHP中文網

首頁

web前端

html教學

html基礎大全(經典)

PHP中文网

Aug 15, 2016 pm 04:49 PM

HTML基础

HTML教學

一、HTML基礎(人)

1、基本概念：

1.1、自動閉合標籤與閉合標籤(如自閉合：

閉合：

文字

1.2、註記：

2、整体页面设置

Doctype：告诉浏览器使用什么html规范来解析html。现在使用

Meta:提供有关页面的元信息，例：页面编码、刷新等.

 <meta http-equiv="Refresh" CONTENT="2">      
  <!--刷新-->    　
  <meta http-equiv="Refresh" content="2 ;url=http://www.baidu.com"/>        
  <!--跳转-->     
   <meta charset="UTF-8">　　        
   <!--设置编码-->

关键字和描述：

 <!--关键字(用于在百度中搜索关键字)-->    　　　　
 < meta name="keywords" content="你好,博客园,飞机" >     
 <!--描述-->     　　  
 < meta name="keywords" content="你好欢迎你，你也可以来博客园" >

2、HTML中头部(head)的应用

2.1网页名标签

Title：网页头部信息

    <title>Titletitle></title>

2.2引用标签：

Link：引用外部资源

<link rel="stylesheet" type="text/css" href="css/com.css">             
<!--CSS-->　 <link rel="shortcut icon" href="i_name%20(1).jpg">              
<!--图片-->

2.3样式标签

Style：引用页面中的样式

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>我的样式</title>    
<style>        
.color{  
background-color: black;                  
color: aliceblue;    
}    
</style>
</head>
<body>
<!--最常使用且可重复使用-->
<div  class="color">引用样式</div>
<div  class="color">不错</div>
<div  class="color">还是这个样式</div>
</body>
</html>

2.4脚本标签(后续更新)

3、HTML中主体(body)的应用

2.1标签分为2类(对写CSS样式有用)：

块级标签：p、fieldset、h1、hr、p、ol、ul.

内联标签：a、img、lable、span、select、input.

内联标签和块级标签的区别：内联是根据内容有多少就占多少，快级标签是不管多少都会占一行。

2.2常用标签应用：

表单中的标签：form、input、select、lable、textarea

用于格式的标签：
、

、

列表标签：ul、li、ol、dl、dt、dd

表格标签：table(

、

、、

、

)

布局标签：div、span

引用、跳转外部标签：a(文字跳转)、meta(页面跳转)、link(引用外部资源)

2.3各种符号:

 网址查看：http://www.cnblogs.com/webd/archive/2010/04/16/1713298.html
 例：<a &gt

2.4标签的应用(id可以在任何标签内且唯一)：

1、Div：p用于布局

<body>
<div>
<div name="upper">
<div name="top">
</div>
<div upper_nav>
</div>
</div>
<div name="middle">
</div>
<div name="lower">
</div>
</div>
</body>

2、a：引用和跳转

(1)、超链接

       <!--超链接-->                           
       <a href="http://www.baidu.com">本页面跳转百度</a>                            
       <a href="http://www.baidu.com" target="_blank">新页面跳转百度</a>

(2)、锚：定位到id的位置，id位置将会在页面的顶部。id不能重复，可以不写id。

 <!--锚-->          　　　                   
 <a>1章</a>          　　　                  
  <a>2章</a>                                  
  
  <div>1章内容</div>                                  
  <div>2章内容</div>

3、p:是段落标签，每一个p标签后都会被认为是段落。

 <!--p段落标签-->         　　　　　　　　    
 <p>dddddddddddddddddd<br>
 </p>          　　　　 　　　　   
 <p>dddddddddddddddddd</p>

　　 4、H:h1到h6是从大到小的的字号。

 <!--H标签-->                  　　　 
 <h1 id="a">a</h1>                     　　
 <h2 id="a">a</h2>                     　　
 <h3 id="a">a</h3>                     　　
 <h4 id="a">a</h4>                     　　
 <h5 id="a">a</h5>                     　　
 <h6 id="a">a</h6>

　　 5、列表标签：

<!--无序列表(没有排列限制可以随意加li)：-->

无序无序
无序无序

有序有序
有序有序

北京: 海淀区; 朝阳区
重庆: 万州区; 南岸区

6、Lable标签：用于鼠标点击文字后跳到文本框中

<!--label标签-->            
<div>                
<label>                   
 姓名:                    
 <input>                
 </label>                
 <label>                   
 婚否: <input>                
 </label>            
 </div>

7、表格：

7.1、新建表格：

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）字母 td 指表格数据（table data，第一行标题行则通常用

来显示。即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 <!--新建表格：-->              
 <table border="1">           
 <!--border为显示边框-->                   
 <thead>                  
 <tr>                         
 <th >第一列</th>                         
 <th>第二列</th>                         
 <th>第三列</th>                  
 </tr>              
 </thead>              
 <tbody>                   
 <tr>                         
 <td>内容1</td>                         
 <td>内容2</td>                         
 <td>内容3</td>                         
 <td>内容4</td>                   
 </tr>                   
 <tr>                         
 <td>内容1</td>                         
 <td>内容2</td>                         
 <td>内容3</td>                         
 <td>内容4</td>                   
 </tr>                   
 <tr>                         
 <td>内容2</td>                         
 <td>内容3</td>                         
 <td>内容4</td>                   
 </tr>              
 </tbody>        
 </table>

7.2、表格合并：

使用colspan(横向合并)和rowspan(纵向合并)合并表格

(1)横向合并

原图如下：

代码：

<table border="1">              
<thead>                 
<tr>                         
<th colspan="2">第一列</th>                         
<th>第二列</th>                         
<th>第三列</th>                 
</tr>              
</thead>              
<tbody>                   
<tr>                         
<td>内容1</td>                         
<td>内容2</td>                         
<td>内容3</td>                         
<td>内容4</td>                   
</tr>                     
<tr>                         
<td>内容1</td>                         
<td>内容2</td>                         
<td>内容3</td>                         
<td>内容4</td>                   
</tr>                     
<tr>                         
<td>内容1</td>                        
<td>内容2</td>                         
<td>内容3</td>                        
 <td>内容4</td>                   
 </tr>              
 </tbody>        
 </table>

执行代码后：

(2)纵向合并

原图如下：

代码：

<table border="1">              
<thead>                 
<tr>                         
<th >第一列</th>                         
<th>第二列</th>                         
<th>第三列</th>                         
<th>第四列</th>                 
</tr>              
</thead>              
<tbody>                  
 <tr>                         
 <td>内容1</td>                         
 <td>内容2</td>                         
 
 <td>内容3</td>                         
 <td>内容4</td>                   
 </tr>                     
 <tr>                         
 <td rowspan="2">内容1</td>                         
 <td>内容2</td>                         
 <td>内容3</td>                         
 <td>内容4</td>                   
 </tr>                     
 <tr>                                                  
 <td>内容2</td>                         
 <td>内容3</td>                         
 <td>内容4</td>                   
 </tr>              
 </tbody>       
 </table>

执行代码后：

8、ifname标签：一般用来包含网站

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>我的百度</title>
</head>
<body>     
<h1 id="我的百度">我的百度</h1>     
<iframe style="width: 100%;height: 2000px"src=" 
</body>
</html>

9、表单标签：

Form标签：用于为用户输入创建 HTML 表单

Input标签：用于搜集用户信息　　　　　　　　　　　　

　　　　　　　　　　　　　　　　intup标签中的type属性：
　　　　　　　　　　　　　　　　　　　　　　　　　　 text:文本框
　　　　　　　　　　　　　　　　　　　　　　　　 password:密码框
　　　　　　　　　　　　　　　　　　　　　　　　　　 radio:单选框
　　　　　　　　　　　　　　　　　　　　　　　　　　 email:邮件地址(由浏览器提供)
　　　　　　　　　　　　　　　　　　　　　　　　 chackbox:复选框
　　　　　　　　　　　　　　　　　　　　　　　　　　　 file:文件上传
　　　　　　　　　　　　　　　　　　　　　　　　　　button:按钮
　　　　　　　　　　　　　　　　　　　　　　　　　　submit:提交按钮
　　　　　　　　　　　　　　　　　　　　　　　　　　 reset:重置按钮
　　　　　　　　　　　　　　　　textarea标签:用于写多行文本
　　　　　　　　　　　　　　　　select标签:下拉菜单

用户名p> 4

密码：p> 5

邮箱：p> 6

性别： 7 男 8 女 9 p> 10

爱好： 11 篮球 12 游泳 13 p> 14

城市： 15 选择下拉菜单--> 16 22

备注：textarea>p> 35 <p><input>p> 36 </p> <p><input>p> 37 </p> <p><input>p> 38 p> 39 form></p> <p><br></p> <p><span class="cnblogs_code_collapse">例子</span></p> <p> </p> <p> 10、Form标签生产中应用： </p> <p> 在生产中你的服务器会从表单中去获取你输入的信息，来处理后返还给你处理的结果。你可以用get或post方式来发送。发送到服务器中是以字典的方式保存的。而服务器取，只需要在字典中取即可。</p> <p>例1：</p><pre class='brush:php;toolbar:false;'>  <form action="http://www.sogou.com/web?" method="get">  <input type="text" name="query"/>  <input type="submit" value="提交"> </form> </pre><p> 例2：</p><pre class='brush:php;toolbar:false;'> <form action="公司服务器ip" method="get" enctype="multipart/form-data"> 　　用户: <input type="text" name="user"/> 　　密码:<input type="password" name="pwd"/> 　 <p>性别: 　　　男<input type="radio" name="gender" value="1"/>  　　　女<input type="radio" name="gender" value="0"/> </p> <p>爱好: 游泳<input type="checkbox" name="favor" value="1"/> 篮球<input type="checkbox" name="favor" value="2"/> 羽毛球<input type="checkbox" name="favor" value="3"/> </p> <p>文件: <input type="file"/>  </p> <p>城市: <select name="city"> <option value="1">上海</option> <option value="2">北京</option> <option value="3">广州</option> </select> <p>备注： <textarea name="extra"></textarea> </p> <input type="submit" value="提交" > <input type="reset" value="取消"> </form></pre><p>以上就是html基础大全(经典)的内容，更多相关内容请关注PHP中文网（www.php.cn）！</p> <p><br></p> <p class="cnblogs_code"><br></p> <p><br></p>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract