前端知识大全之HTML(下)

简介: 前端包含什么?结构:HTML(Hyper Text Markup Language--超文本标记语言)页面原始和内容

12.无序列表标签(ul-->li)

说明: ul标签中只能放li标签。li标签可以放其他标签

  <ul>
   <li>香蕉</li>
   <li>牛奶</li>
  </ul>

13.有序列表标签(ol-->li)

说明:  ol标签中只能放li标签。li标签可以放其他标签。列表的每一项默认显示序号标识

  <ol>
   <li>香蕉</li>
   <li>牛奶</li>
  </ol>

14.自定义标签(dl-->dt-->dd)

说明:dl标签中只能放dt主题标签和dd内容标签。dtdd标签可以放任意标签。并且dd标签默认显示缩进

<dl>
  <dt>主题</dt>
  <dd>香蕉</dd>
  <dd>牛奶</dd> 
</dl>

15.表格标签(table-->tr-->td

说明:没有看见表格是没有加显示表格的语句,表格的属性设置建议用css设置,后面会讲到。


table是表格大标签,tr是行标签,td是内容标签

  <table>
   <tr>
   <td>男生</td>
   <td>女生</td>
  </tr>
   <tr>
   <td>新手</td>
   <td>老手</td>
   </tr>
  </table>

16.表头标题和表头单元格标签  table-->tr(th、td)。caption是表格标题

说明: 没有看见表格是没有加显示表格的语句,表格的属性设置建议用css设置,后面会讲到。


table是表格大标签,caption是标题标签,tr是行标签,th是表头加粗标签,td是内容标签

  <table>
   <caption>成绩单</caption>
  <tr>
   <th>男生</th>
   <th>女生</th>
   </tr>
  <tr>
  <td>新手</td>
   <td>老手</td>
   </tr>
  </table>

17.合并单元格(caption--->tr---td)

说明:要合并哪里就把多余的标签和数据删除,然后在要合并的标签当中添加行(rowspan)或者列(colspan)合并,数字是合并几行或者几列的意思 。注意:只能合并同一个结构的,不同结构的不能合并

<!-- table嵌套包含tr。tr嵌套包含th、td 。caption是表格标题在table内,跨行是rowspan,跨列是colspan-->
<table>
    <caption>成绩单</caption>
    <tr>
     <th>男生</th>
    <th>女生</th>
  </tr>
   <tr>
     <td colspan="2">老手</td>
  </tr>
</table>

18.表单之按钮大全(input type=)

说明:这些多用于登录注册菜单时候用到

  <!-- 表单域标签,用来控制整个表单为一体的,主要是提交和重置按钮 -->
  <form action=""></form>
  <!-- 1.写什么就显示什么 -->
  文本框:<input type="text">
  <br>
  <!-- 2.输入的内容都会变成点点显示 -->
  密码框:<input type="password">
  <br>
  <!-- 3.用于多选一,nanme设置相同名称就只能多选一 -->
  单选框:男<input type="radio" name="sex" > 女<input type="radio" name="sex" >
  <br>
  <!-- 4.用于多选多 -->
  多选框:<input type="checkbox" >
  <br>
  <!--5.提前默认选项 checked可以  -->
  单选框:男<input type="radio" name="sex" > 女<input type="radio" name="sex" checked>
  <br>
  <!-- 6.文件选择,用于上传文件 -->
  文件上传:<input type="file">
  <br>
  <!-- 7.文件选择,multiple用于上传多个文件 -->
  多个文件上传:<input type="file" multiple>
  <br>
  <!-- 8.输入提示 -->
  请输入:<input type="text" placeholder="请输入用户名">
  <br>
  <!-- 9.提交按钮 ,文字提示就添加value-->
  <input type="submit">
  <br>
  <!-- 10.重置按钮 文字提示就添加value-->
  <input type="reset">
  <br>
  <!-- 11.普通按钮,默认无功能,后面配合js添加功能 -->
  <input type="button" value="普普通通">
  <br>
  <!-- 12.普通双标签按钮,默认无功能,后面配合js添加功能 -->
  <button>我是按钮</button>

19.表单之下拉菜单(select-->option)

说明:看注释里面都有

  <!-- select是下拉菜单的整体,option是选项内容 ,selected是默认选项 -->
<select >
  <option >射手</option>
  <option >法师</option>
  <option >战士</option>
  <option selected>刺客</option>
</select>

20.表单之文本域(textarea

说明:看注释里面都有

  <!-- 这是文本域,可以在里面输入各种文字 -->
  <textarea ></textarea>

21.点击文字图片选中按钮(label

说明:看注释里面都有

  <!--5.用label包裹住需要点击文字就选中按钮的标签就好了,要把生成的for删除  -->
  <label >
    我是最厉害的 <input type="radio" name="sex" >
  </label>
  <label >
    我是最帅的<input type="radio" name="sex" >
  </label>

22.空格符号( 

说明:&这个符号在键盘7那里,需要几个空格就放几个  

  <!-- 一个&nbsp;占一个空格,需要几个就放几个 -->
  大&nbsp;&nbsp;哥

23.布局标签(div 、span

说明:div和span都是盒子标签,页面就是由一个个盒子互相嵌套组成的

  <!-- div独占一行,span不会 -->
  <div>我是div1</div>
  <div>我是div2</div>
  <span>我是span1</span>
  <span>我是span2</span>

目录
相关文章
|
25天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
51 1
前端基础(十七)_HTML5新特性
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
23 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
36 1
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
70 19
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
187 1
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
60 13
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
4月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
47 9