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

目录
相关文章
|
6月前
|
移动开发 前端开发 安全
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
223 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
前端开发
|
6月前
|
前端开发 JavaScript
|
9月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
251 25
|
10月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
11月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
224 6
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
222 1
前端基础(十七)_HTML5新特性
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
前端开发 程序员
【前端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;`)。
268 20

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    34
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    93
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    47
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    133
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    112
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    66
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    35
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    67
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    79
  • 10
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
    155