HTML基础标签

这篇具有很好参考价值的文章主要介绍了HTML基础标签。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.HTML作用

2.HTML 文件基本结构

3.标签层次结构

 4.HTML常见标签

标题标签: h1-h6

段落标签: p

换行标签: br

格式化标签

图片标签: img

格式化标签

示例代码:

img 标签的其他属性

超链接标签: a

链接的几种形式:

表格标签

列表标签

表单标签

input 标签

label 标签

select 标签

textarea 标签

无语义标签: div & span


1.HTML作用

在报纸中可以看到的文档表现形式,用HTML都可以表示出来(排版)

2.HTML 文件基本结构

MDNHTML  W3Cschool

  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性.
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题.

3.标签层次结构

  • 父子关系
  • 兄弟关系
<html>
   <head>
       <title>第一个页面</title>
   </head>
   <body>
      hello world
   </body>
</html>
其中 :
  • head body html 的子标签(html 就是 head body 的父标签)
  • title head 的子标签. head title 的父标签.
  • head body 之间是兄弟关系.
标签之间的结构关系, 构成了一个 DOM

HTML基础标签

 4.HTML常见标签

标题标签: h1-h6

有六个, h1 - h6. 数字越大, 则字体越小.
    <h1>这是一个标题h1</h1>
    <h2>这是一个标题h2</h2>
    <h3>这是一个标题h3</h3>
    <h4>这是一个标题h4</h4>
    <h5>这是一个标题h5</h5>

段落标签: p

  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
  • 自动根据浏览器宽度来决定排版.
  • html 内容首尾处的换行, 空格均无效.
  • html 中文字之间输入的多个空格只相当于一个空格.
  • html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签: br

  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样带有一个很大的空隙.
  • <br/> 是规范写法. 不建议写成 <br>

格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签

行级标签,块级标签文章来源地址https://www.toymoban.com/news/detail-463031.html

图片标签: img

img 标签必须带有 src 属性. 表示图片的路径
此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中 .
<img src="相对路径">

格式化标签

  • 加粗 : strong 标签 和 b 标签
  • 倾斜 : em 标签 和 i 标签
  • 删除线 : del 标签 和 s 标签
  • 下划线 : ins 标签 和 u 标签

示例代码:

        <strong>strong 加粗</strong>

        <b>b 加粗</b>

        <em>倾斜</em>

        <i>倾斜</i>

        <del>删除线</del>

        <s>删除线</s>

        <ins>下划线</ins>

        <u>下划线</u>
  • img 标签的其他属性

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

链接的几种形式:

外部链接: href 引用其他网站的地址
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">
内部链接: 网站内部页面之间的链接. 写相对路径即可 .
<a href="http://www.baidu.com">百度</a>

表格标签

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格得到主体区域.
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

列表标签

主要使用来布局的. 整齐好看.
  • 无序列表[重要] ul li , .
  • 有序列表[用的不多] ol li
  • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
<h3>无序列表</h3>
<ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>

表单标签

表单是让用户输入信息的重要途径.
分成两个部分:
  • 表单域: 包含表单元素的区域. 重点是 form 标签.
  • 表单控件: 输入框, 提交按钮等. 重点是 input 标签

input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio .
  • name: input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度.
1) 文本框
2) 密码框
3) 单选框
注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.
4) 复选框
<input type="text">
<input type="password">
性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏
5) 普通按钮
当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).
6) 提交按钮
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
7) 清空按钮
<input type="button" value="我是个按钮">
<input type="button" value="我是个按钮" onclick="alert('hello')">
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">

select 标签

下拉菜单
option 中定义 selected="selected" 表示默认选中.
<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>
注意! 可以给的第一个选项, 作为默认选项
<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

textarea 标签

<textarea rows="3" cols="50">
    
</textarea>

无语义标签: div & span

div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
  • div 是独占一行的, 是一个大盒子.
  • span 不独占一行, 是一个小盒子.

到了这里,关于HTML基础标签的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 1 HTML基本标签

    2024年02月12日
    浏览(43)
  • HTML的span标签的作用是什么?答:对文本内容进行精细的样式化和标记。

    当谈到HTML中的 span 标签时,它是一个非常基本且灵活的内联元素。它通常用于在文本中应用样式、添加额外的语义或将特定部分标记为一个单独的区域。 span 标签本身并不会给其中的内容带来任何视觉上的变化,但它可以与CSS一起使用,从而允许您对其内容进行样式化。 以

    2024年02月10日
    浏览(36)
  • html的form标签的基本介绍及使用

    目录 前言 1.什么是form标签 1.1 基本介绍 1.2 form标签的相关属性 1.2.1 action属性 1.2.2 method属性 1.2.3 name属性 2.form标签的元素 2.1 input元素 2.1.1 text  2.1.2  password  2.1.3 submit  2.1.4 radio 2.1.5 checkbox 2.1.6 button 2.1.7  html5新增的属性 2.2 input元素的其他属性 2.2 select元素(下拉列表)与

    2024年02月04日
    浏览(28)
  • 【前端web入门第一天】01 开发环境、HTML基本语法文本标签

    文章目录: 1. 准备开发环境 1.1 vs Code基本使用 2.HTML文本标签 2.1 标签语法 2.2 HTML基本骨架 2.3 标签的关系 2.4 注释 2.5 标题标签 2.6 段落标签 2.7 换行与水平线标签 2.8 文本格式化标签 VSCode与谷歌浏览器离线版,安装包评论区自提. VSCode默认安装位置:C:UsershpAppDataLocalProgramsMic

    2024年01月25日
    浏览(49)
  • 【HTML】基础常用标签汇总

    目录 前言: 最基础的标签: 常用标签: 文本相关: 文本格式化标签: 图像标签:  超链接:  表格: 列表: 无序列表: 有序列表: 自定义列表: 表单: 基本结构(表单域): 表单元素控件 总所周知,一个网站(web)分为三部分: 1、HTML(结构) 2、CSS(表现) 3、JavaScript(行为) 简

    2024年02月09日
    浏览(40)
  • 02——HTML基础标签学习

    场景 在新闻和文章的页面中,都离不开标题,它用来突出显示文章主题,标题显得尤为重要。 用法 标题( Heading )是通过 h1 → h6 标签进行定义的。 h1 定义 最大 的标题。 h6 定义 最小 的标题。 语义 1~6级标题,重要程度依次递减。 实例 效果图 特点 文字都有 加粗 文字都有

    2024年02月06日
    浏览(48)
  • HTML基础标签

    目录 1.HTML作用 2.HTML 文件基本结构 3.标签层次结构  4.HTML常见标签 标题标签: h1-h6 段落标签: p 换行标签: br 格式化标签 图片标签: img 格式化标签 示例代码: img 标签的其他属性 超链接标签: a 链接的几种形式: 表格标签 列表标签 表单标签 input 标签 label 标签 select 标签 textar

    2024年02月06日
    浏览(48)
  • HTML 基础标签

    目录 前言 标题标签 段落标签 换行标签和水平线标签  文本格式化标签 图像标签 超链接标签 多媒体标签 列表标签 无序列表 有序列表 表格 合并单元格 表单 无语义的布局标签 字符实体 当今互联网时代,网页是我们获取信息、交流和展示自己的重要渠道之一。而 HTML(超文

    2024年02月14日
    浏览(36)
  • llinux的更目录下的文件作用和举例

    Linux是一种开源的操作系统,其文件系统采用了一种层次化的结构。在Linux文件系统中,最顶层的目录被称为根目录,也就是“/”(斜杠)。在根目录下,有很多文件和目录,它们各自有着不同的作用。本文将详细讲解Linux根目录下的文件作用和举例。 /bin目录下存放的是二进

    2024年02月05日
    浏览(40)
  • 安全基础 --- html标签 + 编码(01)

    details 标签用来折叠内容,浏览器会折叠显示该标签的内容。 1 含义: 用户点击这段文本,折叠的文本就会展开,显示详细内容。 2 例: iframe 标签用于在网页里面嵌入其他网页。 1 基本用法 iframe 标签生成一个指定区域,在该区域中嵌入其他网页。它是一个容器元素,如果浏

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包