01- 220429pink前端学习-html-标签（下）

最新推荐文章于 2024-10-17 09:52:22 发布

Levyyy

最新推荐文章于 2024-10-17 09:52:22 发布

阅读量544

点赞数 8

分类专栏： web前端文章标签： html 前端学习 html5

本文链接：https://blog.csdn.net/Levyyy/article/details/124448425

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、表格标签

1.1基本语法

<table>                             <!--用于定义表格-->
    <tr>                            <!--定义表格中的行-->
        <td>单元格内文字</td>        <!--定义表格中的单元格，即table data-->
        ...    
    </tr>
</table>

主要作用：展示数据

1.2表头单元格标签——<th>(table head 的缩写）

一般位于表格的第一行或者第一列，表头单元格里面的文本内容会加粗居中显示。

1.3表格属性

边框，颜色等属性不经常使用表格标签来定义，会通过CSS来设置。

属性名	属性值	描述
align	left、center、right	规定表格相对于周围元素的对齐方式。
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框。
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素。
cellspacing	像素值	规定单元格之间的空白，默认为2像素。
width	像素值或百分比	规定表格的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性</title>
</head>
<body>
    <!--表格属性都要写到表格标签table里面-->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250"> 

        <tr>  <th>姓名</th>  <th>性别</th>  <th>年龄</th>  </tr>
        <tr>  <td>张学友</td>  <td>男</td>  <td>48</td>  </tr>
        <tr>  <td>刘德华</td>  <td>男</td>  <td>44</td>  </tr>
        <tr>  <td>黎明</td>  <td>男</td>  <td>40</td>  </tr>
        <tr>  <td>郭富城</td>  <td>男</td>  <td>50</td>  </tr>
        
        
    </table>
</body>
</html>

展示如下

1.4表格结构标签

<thead>表示表格的头部区域、<tbody>表示表格的主体区域。（使表格结构更加清晰）

这两个标签都包含在<table>中。

1.5合并单元格

跨行合并：rowspan=“合并单元格的个数”（上侧为目标单元格

跨列合并：colspan=“合并单元格的个数”（左侧为目标单元格

2、列表标签

2.1无序列表

<body>
    <h3>favorate food</h3>
    <ul>                    <!--无序列表（！！！重点）-->
        <li>榴莲</li>       <!--<ul>标签中只能出现<li>标签，其余什么都不能放-->
        <li>手抓饼</li>     <!--<li>标签相当于一个容器，里面可以放任何元素-->
        <li>罐头</li>
        <li>火锅</li>
        <li>烧烤</li>


    </ul>
</body>

实际展示页面如下：

2.2有序列表

<h3>xx排行榜</h3>
    <Ol>

        <li>第一名</li>     <!--有序列表-->
        <li>第二名</li>     <!--<ol>标签中只能出现<li>标签，其余什么都不能放-->
        <li>第三名</li>     <!--<li>标签相当于一个容器，里面可以放任何元素-->
        <li>第四名</li>
        <li>第五名</li>

    </Ol>

实际页面展示如下

2.3自定义列表

<dl>                     <!--自定义列表-->
        <dt>服务</dt>        <!--定义项目-->
        <dd>电话服务</dd>    <!--描述每一个项目-->
        <dd>短信服务</dd>
        <dd>微信服务</dd>
    </dl>

实际页面展示如下：

2.4列表总结

3、表单标签

3.1表单域

<form>用服务器义表单域，它会把它范围内的表单元素信息提交给服务器

3.2表单元素

可分为三大类：

input输入表单元素

select下拉表单元素

textarea文本域元素

3.2.1<input>标签

<input type="属性值" />

<input>标签为单标签

type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述如下：

input标签的其他属性

1、name和value是每个表单元素都有的属性值，主要给后台人员使用

2、name表单元素的名字，要求单选按钮和复选按钮要有相同的 name值

3、checked属性意为页面首次打开时，单选按钮和复选按钮中的某个元素默认被选中

<label>标签：

3.2.2 select下拉表单元素

下图中网站分类后的选择框即为下拉表单元素所构成

<select>标签控制定义下拉列表

<form>                             <!--表示一个表单域-->
        籍贯：
        <select>                        <!--select标签一定包含在form标签之中-->
            <option>山东</option>
            <option>北京</option>
            <option>天津</option>
            <option>河南</option>
            <option>吉林</option>
        </select>
     </form>

展示如下：

如果在option中定义 selected=“selected”，就可设置默认选项。

3.2.3 textarea文本域表单元素

<textarea>是用于多行文本输入的控件

使用场景：（留言、网站介绍、自我介绍、个人陈述.......)

<form>
         今日反馈：<br><!--cols=每行中的字符数，rows
            =显示的行数，但实际开发中不会使用，都是用css来改变大小。-->
         <textarea rows="20" cols="20"> 
            默认文字.....
         </textarea>
     </form>