首页 前端知识 码江湖之入门篇------HTML(TwoDay)

码江湖之入门篇------HTML(TwoDay)

2024-07-02 23:07:27 前端知识 前端哥 660 991 我要收藏

1.列表?

        作用:布局内容排列整齐的区域。

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

      无序列表:

        作用:布局排列整齐的不需要规定顺序的区域。

        标签:ul 嵌套 li, ul 是无序列表, li 是列表条目。          注意事项:                  • ul 标签里面只能包裹 li 标签                          • li 标签里面可以包裹任何内容

      有序列表:   

        作用:布局排列整齐的需要规定顺序的区域。

        标签:ol 嵌套 li, ol 是有序列表, li 是列表条目。         注意事项:         • ol 标签里面只能包裹 li 标签         • li 标签里面可以包裹任何内容

       定义列表:

        标签:dl 嵌套 dt 和 dd,dl 定义列表dt 是定义列表的标题dd 是定义列表的描述 / 详情

        注意事项:

        • dl 里面只能包含dt 和 dd         • dt 和 dd 里面可以包含任何内容

2.表格?

      表格 – 基本用法:

        网页中的表格与 Excel 表格类似,用来展示数据

        标签:table 嵌套 tr,tr 嵌套 td / th。 

        提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

      表格结构标签 – 了解:

        作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。

        提示:

        • 表格结构标签可以省略

      合并单元格:

        作用:将个单元格合并成个单元格,以合并同类信息。              合并单元格的步骤:

        1. 明确合并的目标

        2. 保留 最左最上 的单元格,添加属性(取值是 数字 ,表示 需要合并的单元格数量                  – 跨行合并,保留 最上 单元格,添加属性 rowspan                  – 跨列合并,保留 最左 单元格,添加属性 colspan                  3. 删除其他单元格                  注意:不能跨表格结构标签合并单元格(thead、tbody、tfoot)       

3.表单?

        作用:收集用户信息。

        使用场景:         • 登录页面                  • 注册页面         • 搜索区域                                                          这就是表单

      input 标签基本使用:

        input 标签 type 属性值不同,则功能不同

        <input  type="......">       

      input 标签占位文本:       

      单选框 radio:

      

        提示:name 属性值自定义。

      上传文件 - file :

        默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。

      多选框 - checkbox:

        多选框也叫复选框

        默认选中: checked          

      下拉菜单:

        标签:select 嵌套 optionselect 是下拉菜单整体,option是下拉菜单的每一项。

        默认显示第一项selected 属性实现默认选中功能

      文本域:

        作用:多行输入文本的表单控件。

        标签:textarea,双标签。

        注意点:

        • 实际开发中,使用 CSS 设置 文本域的尺寸                  • 实际开发中,一般禁用右下角的拖拽功能

      label 标签:

        作用:网页中,某个标签的说明文本。

        经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围

         写法一                           label 标签 包裹 内容 不包裹表单控件                  设置 label 标签的 for 属性值 和表单控件的 id 属性值 相同(包裹id)          写法二                  使用 label 标签 包裹文字和表单控件 ,不需要属性(包裹标签)         提示:支持 label 标签增大点击范围的表单控件: 文本框、密码框、上传文件、单选框、多选 框、下拉菜单、文本域 等等。

      按钮 - button:            

        提示:

        • 注意:按钮需配合 form 标签 (表单区域)才能实现对应的功能。

4.语义化?

       无语义的布局标签:

         作用: 布局网页 (划分网页区域,摆放内容)                           div :独占一行                  span :不换行

       

       有语义的布局标签:

5.字符实体?

        作用:在网页中显示预留字符

        

        提示:                 • lt 是 less than 的缩写                 • gt 是 greater than 的缩写

结束!!!

        小伙伴们,

        下期见!!!!!!

        
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13833.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!