HTML basics (classic)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML basics (classic)

PHP中文网

Aug 15, 2016 pm 04:49 PM

HTML基础

HTML tutorial 、 1. HTML foundation (person)

1. Basic concept:

1.1, automatic closed tag and closed label (such as errors when errors are written by HTML)

Autism: & lt; mete/& gt; L Closer: & lt; table & gt; text & lt;/table & gt;

1.2, note: & lt;-text-& gt;

1.3, label attribute (name): "

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标签:下拉菜单 2 3 用户名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;'> <!--利用搜狗搜索框定义的name来让搜狗服务器获取--> <form action="http://www.sogou.com/web?" method="get"> <!--默认用get方式提交--> <input type="text" name="query"/> <!--get和post只是格式不同--> <input type="submit" value="提交"> </form> <!-- 后台：{ 'query'="abc" } 取：dic[query]=query的内容 --></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"/> <!--在服务器中获取到的信息会是空，需要定义value来确认值--> 　　　女<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"/> <!--文件上传需要"enctype="multipart/form-data""才能上传到服务器--> </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>

标签定义）字母 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>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AM

HTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.

How do you insert an image into an HTML page?May 04, 2025 am 12:02 AM

ToinsertanimageintoanHTMLpage,usethetagwithsrcandaltattributes.1)UsealttextforaccessibilityandSEO.2)Implementsrcsetforresponsiveimages.3)Applylazyloadingwithloading="lazy"tooptimizeperformance.4)OptimizeimagesusingtoolslikeImageOptimtoreduc

HTML's Purpose: Enabling Web Browsers to Display ContentMay 03, 2025 am 12:03 AM

The core purpose of HTML is to enable the browser to understand and display web content. 1. HTML defines the web page structure and content through tags, such as, to, etc. 2. HTML5 enhances multimedia support and introduces and tags. 3.HTML provides form elements to support user interaction. 4. Optimizing HTML code can improve web page performance, such as reducing HTTP requests and compressing HTML.

Why are HTML tags important for web development?May 02, 2025 am 12:03 AM

HTMLtagsareessentialforwebdevelopmentastheystructureandenhancewebpages.1)Theydefinelayout,semantics,andinteractivity.2)SemantictagsimproveaccessibilityandSEO.3)Properuseoftagscanoptimizeperformanceandensurecross-browsercompatibility.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055518 fails to install in Windows 10?

1 months agoByDDD

How to fix KB5055523 fails to install in Windows 11?

1 months agoByDDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Hot Tools

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Visual web development tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

SublimeText3 Chinese version

Chinese version, very easy to use

Hot Topics

1664

1423

1317

1268

1246