HTML —— 简单知识点3

HTML —— 简单知识点3

 

 

目录

HTML —— 简单知识点3

 

一、表格标签

1. 表格标签的作用、基本格式、属性

2. 合并单元格

二、列表标签

1. 无序列表

2. 有序列表

3. 自定义列表

三、表单标签

1. 概述

2. 表单域

3. 表单控件(元素)

input:

select:

textare:

四、文档查找

#END


一、表格标签

1. 表格标签的作用、基本格式、属性

1.1 作用:用于显示、展示数据;

1.2 基本格式:


        ...
    
    ...
文字 文字

1.3 具体解释:

定义表格,表格的所有元素必须在
标签内

② :定义表格中的行,必须嵌套在<table>标签内

③ :定义表格中的单元格(即定义),必须嵌套在标签中; 

1.4 表头单元格标签:标签会使HTML表格的表头部分的文本内容加粗居中显示;


        ...
    
    ...
姓名

1.5 表格结构标签:(放在

标签中

:定义表格的头部, 标签内部一定要有标签,一般是位于第一行;

:定义表格的主体

            

1.6 表格属性:(必须放在

标签中

HTML —— 简单知识点3_第1张图片

1.7 具体解释:

① align:

HTML —— 简单知识点3_第2张图片

② border:

HTML —— 简单知识点3_第3张图片

③ cellpadding:规定单元格的内容与单元格之间的距离;

HTML —— 简单知识点3_第4张图片

④ cellspacing:规定单元格与单元格之间的距离;

HTML —— 简单知识点3_第5张图片

⑤ width:

HTML —— 简单知识点3_第6张图片

 

2. 合并单元格

2.1 方式:跨行合并、跨列合并

① 跨行合并:rowspan="合并单元格的个数";

② 跨列合并:colspan="合并单元格的个数";

HTML —— 简单知识点3_第7张图片

2.2 目标单元格:

① 跨行合并:最上侧单元格为目标单元格,写合并代码;

② 跨列合并:最左侧单元格为目标单元格,写合并代码;

HTML —— 简单知识点3_第8张图片

2.3 合并单元格步骤:

① 确定合并方式

② 找到目标单元格,写合并代码;

③ 删除多余的单元格;

HTML —— 简单知识点3_第9张图片

                  

HTML —— 简单知识点3_第10张图片

 

 

二、列表标签

列表分类:无序列表、有序列表、自定义列表。

HTML —— 简单知识点3_第11张图片

1. 无序列表

1.1 无序标签:

    标签定义无序列表,以项目符号显示列表项,
  • 标签定义列表项;

    1.2 代码格式:

    • 列表项
    • 列表项
    • 列表项

    HTML —— 简单知识点3_第12张图片

    1.3 注意:

    HTML —— 简单知识点3_第13张图片

     

    2. 有序列表

    2.1 有序标签:

      标签定义无序列表,以数字显示列表项,
    1. 标签定义列表项;

      2.2 代码格式:

      1. 列表项
      2. 列表项
      3. 列表项

      HTML —— 简单知识点3_第14张图片

      2.3 注意:

       

      3. 自定义列表

      3.1 自定义列表:

      标签定义自定义列表,
      标签定义项目的标题
      标签定义每一个项目;

      3.2 使用场景:常用于对术语或名词进行解释和描述;(项目前无任何项目符号

      3.3 代码格式:

      名词
      名词解释1
      名词解释2

      HTML —— 简单知识点3_第15张图片

      3.4 注意:

       

       

      三、表单标签

      1. 概述

      1.1 表单的作用:收集用户信息

      1.2 表单组成:表单域、表单控件(表单元素)、提示信息

      HTML —— 简单知识点3_第16张图片

       

      2. 表单域

      2.1 概述:包含表单元素区域

      2.2 标签:

      标签定义表单域,以实现用户信息的收集和传递,标签会把它范围内的表单元素信息提交给服务器

      2.3 代码格式:

      
      

      2.4 属性:

      HTML —— 简单知识点3_第17张图片

       

      3. 表单控件(元素)

      input:

      3.1 input输入表单元素;

      3.2 input代码格式:

      3.3 type属性:(包含在from标签中)

      HTML —— 简单知识点3_第18张图片

      3.4 一些具体解释:

      ① radio和checkbox:radio为单选按钮也可多选(圆形),checkbox为复选框可多选(方形);

      性别:男
      爱好:运动 追剧 美食

      如果想要实现多选一,即将radio和checkbox按钮具有相同的name属性

      性别:男
      爱好:运动 追剧 美食

      ② text和password:text文本框,可以在里面输入任何文字,password密码框,使用户看不见输入的密码

      用户名:
      密码:

      ③ button、submit、reset:分别为可点击按钮(用于JavaScript)、提交按钮、重置按钮;



      HTML —— 简单知识点3_第19张图片

      3.5 input的一些属性:

      HTML —— 简单知识点3_第20张图片

      3.6 具体解释:

      ① name:定义input元素的名称

      ② value:

      用户名:

      ③ checked:(只用于radio和checkbox

      同意用户协议

      3.7 一些注意点:

       

      select:

      3.1 select下拉表单元素;

      3.2 代码格式:

      HTML —— 简单知识点3_第21张图片

      3.3 注意:

      籍贯
       

      textare:

      3.1 textare文本域元素;

      3.2 代码格式:

      HTML —— 简单知识点3_第22张图片

      3.3 注意:

      个人介绍

      HTML —— 简单知识点3_第23张图片

       

      四、文档查找

      4.1 W3C:http://www.w3school.com.cn/

      4.2 MDN:https://developer.mozilla.org/zh-CN/

      此文章接上文HTML常用标签

      https://blog.csdn.net/sokoooo/article/details/113436070?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242

       

      #END (部分图源b站pink老师视频)

      你可能感兴趣的:(HTML,html)