HTML语法及常用标签

本文详细介绍了HTML的基本语法、常用标签,如文本、超链接、图像、音频、视频、列表、表格和表单的创建方法。从结构到功能,为初学者提供了一个全面的前端开发入门指南。
摘要由CSDN通过智能技术生成

目录

HTML语法

HTML常用标签

3.1文本

3.2超链接

3.3图像

3.4音频

3.5视频

3.6列表

3.7表格

3.8表单


<html>
 <head>
    <title>前端开发</title>
 </head>
 <body>
    <h1>HTML</h1>
    <p>HTML超文本标记语言,是用来描述网页的一种标准语言。</p>
 </body>
</html>

<title>表示标题、

<h1>表示一级标题、

<p>表示段落

HTML语法

  • div标签:用于划分区域
    常用结构化标签包括
    header:页眉
    nav:导航条
    footer:页脚
    main:页面主要内容,一个页面只能使用一次
    aside:侧栏
    article:可以独自被外部引用的内容
    section:用于一端主题性的内容


HTML常用标签

3.1文本

  • 标题h1-h6
  • 段落p
  • 段内换行br:由p构成的段落,段落结束后才换行,如果需要段内换行,可以使用<br/>
  • 预留格式pre
  • 段内组合span
  • 强调strong、em:strong内的文本为粗体,em内的文本为斜体
  • 水平分割线hr
  • 注释:可以使用<!--和-->添加注释,注释可以跨行

3.2超链接

<a href="跳转的目标位置">文字或图片</a>

3.3图像

  • img标签:<img src="图片位置+文件名+后缀" alt="替换文字"/>
  • figure标签:figure可以将图片与图片标题组合在一起,图片用img标签,图片标题用figcaption标签

3.4音频

  • audio标签:<audio src="音频文件" controls="controls" loop="loop"></audio>

3.5视频

  • video标签
    使用video标签直接插入单一来源的视频文件
    <video src="视频文件" controls="controls" loop="loop" width="视频窗口宽度"></video>
    使用poster属性设置开始海报图像
    <video src="course.mp4" controls="controls" poster="strating.jpg" width="海报宽度">
    浏览器不支持HTML5:video
    </video>

3.6列表

  1. 无序列表:无序列表由ul构成,每个列表由li表示
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>
  2. 有序列表:无序列表由ol构成,每个列表由li表示
  3. 自定义列表:dl定义自定义列表、dt定义列表项、dd定义列表项的描述

3.7表格

表格结构:由标题caption、表头thead、标题tbody、表位tfoot构成
                表格按行tr存储,行由单元格构成
                单元格分为表头单元格th、数据单元格td

属性

  1. border属性:显示边框:<table border="1"></table>
  2. colspan、rowspan:可以合并单元格,colspan合并列(横向合并)、rowspan合并行(纵向合并)

3.8表单

表单域form:<form name="表单名称" method="get|post" action="后端处理页面">
                        表单元素
                        </form>
                        name属性:表单名称
                        method属性:发送表单数据的方法
                        action属性:向何处发送表单数据

文本框、密码框:<input type="text|password" name="名称" value="文本"/>
                        type属性:取值为text时则为文本框,取值为ldpassword时为密码框
                        value属性

提交按钮、重置按钮:<input type="submit|reset" name="名称" value="内部文本"/>
                        type属性:取值为submit时则为提交按钮,取值为reset时为重置按钮
                        value属性:按钮表面文字

单选框、复选框:<input type="radio|checkbox" name="名称" value="值" checked="checked"/>

标签

下拉列表

按钮

文本域

  • 17
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值