HTML(二)列表、表格、表单元素

简介: HTML(二)列表、表格、表单元素

一、列表

1. 有序列表(<ol> </ol>)


       第一层嵌套内只能包含 <li></li> 列表项标签,列表项标签可以包裹任何标签和文本,属于块级元素。有序列表有以下几个属性:

image.png

2. 无序列表(<ul> </ul>)


       第一层嵌套内只能包含<li></li>列表项标签,同有序列表。有以下几个属性:

image.png

       有序列表和无序列表第一层内必须包含列表项标签,文本写在列表项标签内。


3. 自定义列表(<dl> </dl>)


       <dt></dt>  列表标题

       <dd></dd> 文本和元素


<dl>
 <dt>国内电影</dt>
  <dd>流浪地球</dd>
  <dd>来电狂想</dd>
 <dt>国外电影</dt>
  <dd>惊奇队⻓</dd>
  <dd>美国队⻓</dd>
</dl> 

4. 嵌套列表


       有序、无序以及自定义列表相互嵌套。举例:


<!-- 嵌套列表 -->
  <ul>
    <li>MOBA类游戏
      <ol>
        <li>王者荣耀
          <ul type="circle">
            <li>武则天</li>
            <li>嬴政</li>
            <li>不知火舞</li>
          </ul>
        </li>
        <li>英雄联盟
          <ul type="circle">
            <li>无极剑圣</li>
            <li>疾风剑豪</li>
            <li>暗裔剑魔</li>
          </ul>
        </li>
      </ol>
    </li>
    <li>第一人称射击
      <ol>
        <li>和平精英</li>
        <li>使命召唤</li>
        <li>生化危机</li>
      </ol>
    </li>
    <li>经营类
      <ol>
        <li>大富翁</li>
        <li>模拟人生</li>
        <li>城市天际线</li>
      </ol>
    </li>
  </ul>

二、表格

1. 表格标签

image.png

2. 表格的行列


image.png

3. 表格标签相关属性

image.png

4. 拆分与合并

image.png

       拆分合并之后需要删除多余的行或列。


三、表单元素

1. 表单标签(<form></form>)


       表单用于搜集不同类型的用户输入,该标签不能单独使用,需要在 form 元素中加入 input 等标签共同使用。


2. input标签及控件


       <input/>元素是最重要的表单元素,有不同的type属性

image.png

3. 标记标签(<label> </label>)


       不会向用户呈现任何特殊效果,内联元素,不自占一行


       label 标签的 "for" 属性可把 label 绑定到另外一个元素,把 "for" 属性值设为相关元素的id 值即可。


4. 菜单标签(<select> </select>)


下拉菜单标签,不能单独存在,只能包裹option。


<option></option> 菜单选项,multiple 属性代表该下拉菜单可以多选。


<select name="cd" id="city" multiple>
  <option value="0">请选择</option>
  <option value="1">北京</option>
  <option value="2">天津</option>
</select>

5.文本域(<textarea> </textarea>)


具有滚动条的多行文本输入控件。

相关文章
|
2月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
184 19
|
5月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
355 74
|
6月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
167 19
|
6月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
180 2
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
654 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
179 0
|
数据采集 数据库 C++
HTML中的表格、表单标签
HTML中的表格、表单标签
195 0
|
前端开发
HTML基础教程7——表格标签和语义化标签
表格用<table>标签实现,内部主要有<tr>和<td>标签,其中表示行,表示列,属性border的值表示表格边框线的粗细,属性cellspacing的值表示内框和外框之间的距离,属性cellpadding的值表示内框的大小。
HTML基础教程7——表格标签和语义化标签

热门文章

最新文章