html 태그에 대한 자세한 설명(2)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html 태그에 대한 자세한 설명(2)

高洛峰

Feb 16, 2017 pm 02:17 PM

HTML 태그

이전 글에서는 링크 태그, 이미지 태그, html 프레임 등 http의 기본 태그에 대해 주로 다루었습니다. 다음에는 테이블 태그, 목록 태그, 양식 태그에 대해 주로 자세히 설명하겠습니다.

1: 테이블 라벨

테이블 라벨

<!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>

참고:

; 레이블은 행을 나타내는 데 사용됩니다.

레이블은 열을 나타내는 데 사용됩니다.

, 사용법 내부 내용이 자동으로 확대되고 굵게 표시된다는 점을 제외하면

와 동일합니다.

border 테이블 테두리 너비를 픽셀 단위로 설정합니다.

width 테이블을 설정합니다. 너비(단위: 픽셀)

height 테이블 높이(픽셀) 설정

cellspacing 테이블 테두리의 간격을 참조하는 셀 사이의 거리를 설정합니다.

cellpadding 텍스트 거리를 설정합니다. 셀 테두리에서 거리

bgcolor 테이블의 배경색 설정

align 가운데, 왼쪽, 오른쪽 등의 정렬을 설정하는 데 사용

헤더 이름> ; 테이블 헤더를 나타내는 데 사용됩니다

(2) 병합된 셀

<!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>

에 대해 실행 결과는 다음과 같습니다.

html 태그에 대한 자세한 설명(2)

참고: 표의 각 셀에 다른 내용을 입력하면 각 셀의 크기를 동일하게 유지하는 두 가지 방법이 있습니다. 항상 높음 400의 경우 4줄을 설정한 다음 각

태그에 hight=100 속성을 추가합니다. 이는 균일한 분포와 동일하며 동일한 너비에 대해 동일한 방법을 사용합니다. 2: CSS 스타일을 설정하고 tr 및 td

의 크기를 수정하는 첫 번째 것보다 쉬울 것입니다. 2: 목록 태그

<!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>

실행 결과는 다음과 같습니다.

html 태그에 대한 자세한 설명(2)

3: 양식

양식 라벨

<!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>

표현은 다음과 같습니다.

html 태그에 대한 자세한 설명(2)

html 태그(2)에 대한 더 자세한 설명은 PHP 중국어 홈페이지 관련 글을 참고해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 태그와 HTML 속성의 차이점은 무엇입니까?May 14, 2025 am 12:01 AM

htmltagsdefinestructureofawebpage, whiletributesdfunctionalityanddetails.1) tags, andoutlinethecontent'splacement.2) agtributessuchassrc, class 및 styleenhancetagsbysingingimages ources, styling, and mormore, mormor, 개선.

HTML의 미래 : 진화와 트렌드May 13, 2025 am 12:01 AM

HTML의 미래는보다 의미적이고 기능적이며 모듈 식 방향으로 발전 할 것입니다. 1) 의미화로 인해 태그가 콘텐츠를보다 명확하게 설명하여 SEO 및 장벽없는 액세스를 향상시킵니다. 2) 기능화는 사용자의 요구를 충족시키기 위해 새로운 요소와 속성을 소개합니다. 3) 모듈화는 구성 요소 개발을 지원하고 코드 재사용 성을 향상시킵니다.

HTML 속성이 웹 개발에 중요한 이유는 무엇입니까?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopmentforcontrollingbehavior, 외관 및 기능. 접근성, 접근성, andseo.forexample, thesrcattributeintagspactsseo, whike whike whike whike whike whike thercattributeintagspactsseo

ALT 속성의 목적은 무엇입니까? 왜 중요한가요?May 11, 2025 am 12:01 AM

ALT 속성은 HTML에서 태그의 중요한 부분이며 이미지에 대한 대체 텍스트를 제공하는 데 사용됩니다. 1. 이미지를로드 할 수 없으면 ALT 속성의 텍스트가 표시되어 사용자 경험을 향상시킵니다. 2. 스크린 리더는 ALT 속성을 사용하여 시각 장애가있는 사용자가 그림의 내용을 이해하도록 도와줍니다. 3. 검색 엔진 인덱스 텍스트 텍스트는 웹 페이지의 SEO 순위를 향상시키기 위해 ALT 속성의 텍스트를 색인 텍스트입니다.

HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램May 09, 2025 am 12:01 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 구축하는 데 사용됩니다. 2. CSS는 웹 페이지의 모양을 아름답게하는 데 사용됩니다. 3. JavaScript는 동적 상호 작용을 달성하는 데 사용됩니다. 태그, 스타일 및 스크립트를 통해이 세 가지는 함께 현대 웹 페이지의 핵심 기능을 구축합니다.

태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까?May 08, 2025 am 12:03 AM

태그의 Lang 속성을 설정하는 것은 웹 접근성 및 SEO를 최적화하는 핵심 단계입니다. 1) 태그에 LANG 속성을 설정하십시오. 2) 다국어 컨텐츠에서는 다른 언어 부품에 대한 LANG 속성을 설정하십시오. 3) "en", "fr", "zh"와 같은 ISO639-1 표준을 준수하는 언어 코드를 사용하여 LANG 속성을 올바르게 설정하면 웹 페이지 및 검색 엔진 순위의 접근성을 향상시킬 수 있습니다.

HTML 속성의 목적은 무엇입니까?May 07, 2025 am 12:01 AM

htmlattributesearsentialforenhancingwebelements'functionalityandAmpearance.theyaddinformationTodeFineBehavior, 외관 및 간호, WebsITESITERACTIVE, RAPITIVE 및 VVESILLY -CAMENTION.ATTRIBUTESLIKESRC, HREF, 클래스, 유형 및 디스티브 트랜스포트

HTML에서 목록을 어떻게 만드나요?May 06, 2025 am 12:01 AM

ToCreateAlistInhtml, useUnorderEdListandForOrdLists : 1) forUnderedList, wrapitemSinanduseForeachitem, renderingasabulletedList.2) forOrderEdlists, useandfornumberedLists, useandfornumberedlists, useandfornumberedlists, useandfornumberedlists, withTheyPeatTributeFferentNumberingStyles.

See all articles