Detailed explanation of html tags (2)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed explanation of html tags (2)

高洛峰

Feb 16, 2017 pm 02:17 PM

html tag

In the previous article, we mainly talked about some basic tags of http, such as link tags, image tags, html framework, etc. Then we will mainly give a detailed explanation of table tags, list tags, and form tags

1: Table label

Table label

<!DOCTYPE html>
    <html>
        <head>
            <!-- 原创作者：蜗牛 -->
            <title>table标签</title>
        </head>
        <body>
            <table  border="1" width="360"  height="240" 
                    cellspacing="1" cellpadding="1" 
                    align="center" bgcolor="red">   <!--这里的center表示该表格在页面的中间位置-->
                                                    <!--这里的背景色标签是bgcolor-->
                    <caption><h2>我的好朋友</caption>

                     <tr>
                         <th>姓名</th>
                 <th>性别</th>
                         <th>年龄</th>
                         <th>爱好</th>                     
                     </tr>

                     <tr align="center">          <!--这里的center表示的是表格里面的字体居中-->
                         <td>小红</td>
                         <td>女</td>
                         <td>20</td>
                         <td>跳舞</td>
                     </tr>

                     <tr align="center"> 
                         <td>小舵</td>
                         <td>女</td>
                         <td>24</td>
                         <td>唱歌</td>
                     </tr>
                    
                </table>
       </body>
    </html>

Note:

> ; Labels are used to represent rows

Labels are used to represent columns

Labels are used to represent table titles, usage Same as except that the content inside will be automatically enlarged and bolded

border Set the width of the table border in pixels

width Set the table width in units of pixel

height Out out out out out out of which distance

bgcolor using using using using using using using using out off out out off out out off out off out out out outcer outgel's' out's ’ ’ ’ back back through back back ’s ‐ ‐ ‐ it s and t ; Used to represent the table header

(2) About merged cells

<!DOCTYPE html>
<html>
    <head>     
        <title>table中合并单元格</title>
    </head>
    <body>
        <table  border="1" width="300"  height="200" 
                align="center" background="first.jpg" >  <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->

                  <tr align="center" width="100" >
                     <td>1</td>
                     <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
                     <!-- 删除掉此<td></td> -->
                     <td>2</td>
                 </tr>

                 <tr   align="center" width="100">  
                     <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
                     <td>3</td>
                     <td>4</td>
                     <td>5</td>
                 </tr>

                  <tr   align="center" width="100" >
                    <!-- 删除掉此<td></td> -->
                     <td>6</td>
                     <td>7</td>
                     <td>8</td>
                 </tr>          
            </table>
   </body>
</html>

The running results are as follows:

Note: When you enter different content in each cell of the table, your content length will change. There are two ways to keep each cell the same size. 1; For example, when your table is always high For 400, you set 4 lines, then add the attribute: hight=100 to each tag; which is equivalent to even distribution, and use the same method for the same width. 2: It will be simpler than the first one, which is to set the css style and fix the size of tr and td

2: List tag

<!DOCTYPE html>
<html>
    <head>
    <title>列表标签</title>
    </head>
    <body  bgcolor="#FFFF00">
        <!-- 无序列表 -->
        2017年心愿
        <ul type="circle">     <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->
            <li>父母身体健康</li>
            <li>宝宝健康成长</li>
            <li>媳妇健健康康</li>
        </ul>

        <!-- 有序列表 -->
        2017年大事件
        <ol type="1" start="2">   <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始--> 
            <li>老婆要生小孩了</li>
            <li>自己换工作了</li>
            <li>要卖掉一套房</li>
        </ol>
        
        <!-- 自定义列表 -->
        <dl>                    <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->
            <dt>时刻告诉自己</dt>
            <dd>不抱怨</dd>
            <dd>零负能量</dd>
            <dd>该与不该</dd>
        </dl>
    </body>
</html>

The running result is as follows:

3: Form

Form tag

<!DOCTYPE html>
<head>
<title>form表单</title>
</head>
<body>
<!--form 指的是表单标签   当前标签的内容在提交的时候都会被自动提交    action=""是指把当前表单提交的位置-->
    <form action="Myservlet" method="post" onSubmit="return submitFun();"> <!--onSubmit只有当返回为true是才能提交表单-->
        <fieldset>                       <!--主要会在相关表单元素周围绘制边框-->
            <legend>用户注册</legend>    <!--在上面绘制的边框绘制的位置写上“用户注册”-->
        <!--input 一个输入框里    type 的当前输入框的类型   text 是指当前的类型是文本框name是用来区分不同的文本框-->
                             <!--的也是在表单提交后用来获取表单的内容 -->   
         用户名:<input type="text" name="username" /><br/><br/>
         密码 :<input type="password" name="password"/><br/><br/>  <!--password代表输入的文字显示为黑点-->
         <!--value是指当前表单提交后 获取的值    checked设置默认选中的情况-->
         性别:男性<input type="radio" name="sex" value="male" checked="checked"> <!--radio代表单选按钮-->
               女性<input type="radio" name="sex" value="female">    <br/><br/>            
         学历: <select name="education">                               <!--select代表下来列表-->
                     <option value="gz">博士</option>                <!--option代表每一个值，取名gz为了后台获取-->
                    <option value="yjs">研究生</option>                          
                    <option value="bk" selected="selected">本科</option>  <!--select代表默认选中，本科会显示到界面-->
                    <option value="zk">专科</option>                              
                 </select>     <br/><br/>
        兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车   <!--checkbox复选框-->
                 <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉  <!--checked代表默认选中-->
                 <input type="checkbox" name="likes" value="eat" />吃饭
                 <input type="checkbox" name="likes" value="daima" />敲代码 <br/>
        备注:<textarea  cols="40"  rows="5" name="bz"></textarea> <br/><br/>  <!--textarea文本域设置行和列-->
                个人头像:<input type="file"><br>           <!--代表可以在电脑上宣文件-->
      <!--disabled代表不可编辑，我在测试中发现不可编辑状态后台是无法取到这个value值的，想要获得就要在提交时改变为可编辑-->
                个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br>  
               
                个人邮箱:<input type="email"><br>          <!--邮箱格式-->
              
                身体体重:<input type="number"><br>         <!--代表只能输入数字-->
             
                出生日期:<input type="date"><br>           <!--可选年月日-->
               
                详细时间:<input type="time"><br>            <!--time--代表显示时分-->
                
                隐藏项：   <input  type="hidden" value="你们看不到我"><br>     <!--这个隐藏标签有很大的作用，可以不显示在界面，但后台可以获取值-->
        
                <input type="button" value="填写完毕">     <!--普通的button按钮-->
                <input type="reset" value="重置信息">      <!--reset代表一按重置所以信息清空-->
                <input type="submit" value="完成注册">     <!--submi代表所以信息提交到后台,如果上面调用了onSubmit方法，那么返回为true才提交-->
                <input type="image" src="first.jpg" height="20" width="40">        <!--image也可以进行表单的提交-->
47         </fieldset>         
    </form>
</body>
</html>

The rendering is as follows:

Detailed explanation of html tags (2)

For more detailed explanations of html tags (2), please pay attention to the PHP Chinese website for related articles!

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

如何使用Python正则表达式去除HTML标签Jun 22, 2023 am 08:44 AM

HTML（HyperTextMarkupLanguage）是用于创建Web页面的标准语言，它使用标签和属性来描述页面上的各种元素，例如文本、图像、表格和链接等等。但是，在处理HTML文本时，很难将其中的文本内容快速地提取出来用于后续的处理。这时，我们可以使用Python中的正则表达式来去除HTML标签，以达到快速提取纯文本的目的。在Python中，正则表

如何在Go语言中使用正则表达式提取HTML标签内容Jul 14, 2023 pm 01:18 PM

如何在Go语言中使用正则表达式提取HTML标签内容导读：正则表达式是一种强大的文本匹配工具，它在Go语言中也有着广泛的应用。在处理HTML标签的场景中，正则表达式可以帮助我们快速提取需要的内容。本文将介绍如何在Go语言中使用正则表达式提取HTML标签的内容，并给出相关代码示例。一、引入相关包首先，我们需要导入相关的包：regexp和fmt。regexp包提供

PHP如何去除字符串中的HTML标签？Mar 23, 2024 pm 09:03 PM

PHP是一种常用的服务器端脚本语言，广泛应用于网站开发和后端应用程序开发中。在开发网站或应用程序时，经常会遇到需要处理字符串中的HTML标签的情况。本文将介绍如何使用PHP去除字符串中的HTML标签，并提供具体的代码示例。为什么需要去除HTML标签？在处理用户输入或从数据库中获取的文本时，经常会包含HTML标签。有时候我们希望在显示文本时去除这些HTML标签

php中怎么转义html标签Feb 24, 2021 pm 06:00 PM

在PHP中，可以使用htmlentities()函数来转义html，能把字符转换为HTML实体，语法“htmlentities(string,flags,character-set,double_encode)”。PHP中也可以使用html_entity_decode()函数来反转义html，把HTML实体转换为字符。

如何在Java中从给定的字符串中删除HTML标签？Aug 29, 2023 pm 06:05 PM

String是Java中的final类，它是不可变的，这意味着我们不能改变对象本身，但我们可以更改对象的引用。可以使用String类的replaceAll()方法从给定字符串中删除HTML标签。我们可以使用正则表达式从给定字符串中删除HTML标记。从字符串中删除HTML标签后，它将返回一个字符串作为普通文本。语法publicStringreplaceAll(Stringregex,Stringreplacement)示例publicclassRemoveHTMLTagsTest{&nbs

如何在HTML表格中使用HTML标签？Sep 08, 2023 pm 06:13 PM

我们可以轻松地在表格中添加HTML标签。HTML标签应放置在<td>标签内。例如，在<td>标签内添加段落<p>…</p>标签或其他可用标签。语法以下是在HTML表格中使用HTMl标记的语法。<td><p>Paragraphofthecontext</p><td>示例1下面给出了在HTML表格中使用HTML标签的示例。<!DOCTYPEhtml><html><head&g

PHP正则表达式验证基本的HTML标签的方法Jun 24, 2023 am 08:07 AM

PHP是一种高效的网页开发语言，其支持正则表达式功能，能够快速验证输入数据的有效性。在网页开发中，HTML是常见的标记语言，而对HTML标签进行验证，是网页表单验证的一种非常重要的方法。本文将介绍基本的HTML标签验证方法，以及如何使用PHP正则表达式进行验证。一、HTML标签基本结构HTML标签由尖括号包围的元素名称和属性组成，常见的标签包括p、a、div