初识Web: html（二）

最新推荐文章于 2024-10-04 22:04:56 发布

逝去的风景线

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量110

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_74199136/article/details/128548396

版权

1.4 如果table中不写tbody，thead和tfoot，直接从tr开始写

一、表（table）

一张表由thead、tbody、tfoot组成，其中除了tbody以外，thead和tfoot可以省略不写

无论是thead、tbody、tfoot都是先由表行tr(table row)组成

每一行里，又有多列组成，其中thead中的列使用th表示，tbody中的列由td表示

• table 标签: 表示整个表格

• tr: 表示表格的一行

• td: 表示一个单元格

• th: 表示表头单元格,会居中加粗

• thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

• tbody: 表格得到主体区域.

<table>
  <thead>  <--!   表头   -->
    <tr>
        <th>text</th>
    </tr>
  </thead>  
    <tbody>   <--!  表格主体   -->
    <tr>
        <td>text</td>
    </tr>
    </tbody>
    <tfoot>   <--!表脚-->
    <tr>
        <td>test</td>
    </tr>
    </tfoot>
</table>

1.1 表头(thead)

快捷键：输入thead后直接按tabe键可以直接得到<thead></thead>

table head

  <thead>
    <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
    </tr>
  </thead>

如果某一行的跨度超过一行：跨行合并：rowspan="n"

<th rowspan="2">行跨度为2</th>

如果某一列的跨度超过一列:跨列合并：colspan="n"

<th colspan="3">列跨度为2</th>

1.2 表格主体(tbody)

   <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>

快捷键：输入td*n自动生成n个td

1.3 表脚(tfoot)

    <tfoot>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tfoot>

1.4 如果table中不写tbody，thead和tfoot，直接从tr开始写

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

就会被浏览器默认写了tbody,变成下面的格式

<table>
   <tbody>
     <tr>
       <td></td>
       <td></td>
     </tr>
     <tr>
       <td></td>
       <td></td>
     </tr>
   </tbody>
</table>

二、列表(list)

有序列表的标签为<ol>

无序列表的标签为<ul>

列表项：list item <li>

无论是有序还是无序列表，他们的直接子孩子必须是<li>标签,在<li>标签之下就可以写入任意元素，例如普通文本，超链接，img等

<ol>
    <li>
        <p></p>
    </li>
</ol>

2.1 有序列表 ol

(ordered list) <ol>

<h1>做某事的步骤</h1>
<ol>
    <li>首先</li>
    <li>其次</li>
    <li>最后</li>
</ol>

默认样式为：1,2,3,4

做某事的步骤

1.首先

2.其次

3.最后

2.2 无序列表 ul

(unordered list) <ul>

<h1>喜欢的东西</h1>
<ul>
    <li>花</li>
    <li>雨</li>
    <li>云</li>
</ul>

默认样式为：•

喜欢的东西

• 花

• 雨

• 云

2.3 自定义列表 dl

<dl>

自定义列表通常用于展示词汇表或者元数据，例如对某些东西做定义，类似于百科全书这种形式

<dl>
    <dt>尺子</dt>
    <dd>尺子可以用来量东西</dd>
    
    <dt>小刀</dt>
    <dd>小刀可以用来割东西</dd>
</dl>

三、表单 form

<form>

<form action="这里填写的地址是当用户点击提交后浏览器返回的资源路径">
    <label>
        姓名：
        <input type="text" name="username">
    </label>
    <label>
        性别：
        <input type="text" name="gender">;
    </label>

    <button>提交</button>
</form>

<button>提交</button>和<button type="submit">提交</button>一模一
但如果是<button type="button">则只是创建了一个按钮，点击没有任何作用

3.1 form标签

<form action="xxx.html">
...内容
</form>

form标签下的action属性描述了要把数据按照什么方式，提交到哪个页面当中

3.2 input标签

各种输入控件，单行文本框，按钮，单选框，复选框

• type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等

• name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一

• value: input 中的默认值.

• checked: 默认被选中. (用于单选按钮和多选按钮)

• maxlength: 设定最大长度

3.2.1 type属性

详细用法可以去mdn网站搜索<input>

1）文件框：输入普通文本

<input type="text">

ps: 文本输入框，了解一下

<textarea name="signature" cols="20" rows="5">懒得写！</textarea><br>

2) 密码框：输入密码文本，在浏览器上隐藏用户的输入，通常显示为一个点

<input type="password">

3）单选框

type="radio"

性别:
<input type="radio" name="gender">男 <br>
<input type="radio" name="gender" checked>女 <br>

注意: 单选框之间必须具备相同的 name 属性, 才能实现多选一的效果

如果没有name属性，则自己独立为一组

checked属性的作用是一开始就在一组选项中默认选择了这一个

类似于单选项,下拉选择的方式

    <select name="month">
        <option value="1">一月</option> <--! 第一个为默认选项 -->
        <option value="2">二月</option>
        <option value="3">三月</option>
    </select>

加mutilple可以类似于复选框，但不推荐使用,必选按住ctrl+鼠标左键才能进行多选

 <select name="month" multiple>
        <option value="1">一月</option> <--! 第一个为默认选项 -->
        <option value="2">二月</option>
        <option value="3">三月</option>
    </select>

4）复选框

type="checkbox"

爱好: <br>
<input type="checkbox"> 吃饭  <br>
<input type="checkbox"> 睡觉  <br>
<input type="checkbox"> 打游戏 <br>

5）重置

type="reset"

表现为一个按钮，点击之后表单初始化,下面两种写法都可以

<input type="reset" value="重置">
<button type="reset">重置</button>

3.2.2 value

form表单提交的时候，单选项提交的是value后的值，例如gender=1,

  <input type="radio" name="gender" value="1">男
  <input type="radio" name="gender" value="2">女
  <input type="radio" name="gender" value="0" checked>未知