前端知识大全之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>

目录
相关文章
|
3月前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
37 0
|
3月前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
38 0
|
10天前
|
前端开发 程序员
【前端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;`)。
38 19
|
10天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
10天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
1月前
|
前端开发 JavaScript Java
springmvc前端jsp与html
在Spring MVC框架中,前端页面既可以使用JSP(JavaServer Pages)也可以使用HTML,具体使用哪一种或哪几种技术,主要取决于项目的需求、团队的熟悉度以及项目的可维护性等因素。
16 2
|
1月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
29 9
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
28 1
|
1月前
|
编解码 移动开发 前端开发
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
14 1
|
1月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
19 4