【HTML 标签详解】

🎉🎉🎉点进来你就是我的人了
博主主页:🙈🙈🙈戳一戳,欢迎大佬指点!

欢迎志同道合的朋友一起加油喔🦾🦾🦾


目录

1. HTML结构

1.1 HTML 基本结构

1.2  标签层次结构

2. HTML常见标签

 2.1 注释标签

2.2 标题标签 (h)

2.3 段落标签 (p)

 2.4 换⾏标签(br)和分割线标签(hr)

2.5 格式化标签 (标签样式)

2.6 图⽚标签: img

2.7 超链接标签: a

2.8 列表标签(ol,ui,dl)

 2.9 表格标签

2.10 音频标签(audio)

2.11 视频标签(video)

2.12 表单标签(form)

常见表单元素:

input 常用属性

布尔属性

按钮 - input 和 button

label 绑定 input (扩大可点击区域)

radio (单选框)

checkbox (多选框)

隐藏按钮 (type=hidden) 

select 和 option (下拉选择框和下拉选择框中的选项)       

select 常用属性

多行输入框(textarea)

form 的常用属性

get 和 post

3. HTML 特殊字符



HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

1. HTML结构

1.1 HTML 基本结构

    <html>
               <head>
                           <title>第⼀个⻚⾯</title>
               </head>
               <body>
                           hello world
               </body>
    </html>

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

⼤部分标签成对出现, <body> 为开始标签, </body> 为结束标签,少数标签只有开始标签, 称为 "单标签".

1.2  标签层次结构

        ● ⽗⼦关系
        ● 兄弟关系

    head 和 body 是 html 的⼦标签   ( html 就是 head 和 body 的⽗标签)
    title 是 head 的⼦标签. head 是 title 的⽗标签.
    head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了⼀个 DOM 树 :

在 IDEA 中创建⽂件 xxx.html , 直接输⼊ ! , 按 tab 键, 此时能⾃动⽣成代码的主体框架.

2. HTML常见标签

 2.1 注释标签

    < !-- 注释 -- >
    ctrl + / 快捷键 可以快速进⾏注释/取消注释.

2.2 标题标签 (h)

    有六个, 从 h 1 - h 6 . 数字越⼤, 则字体越⼩.
    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>        
    <h6>hello</h6>

    <hr>标签就是给页面加一个分割线。

2.3 段落标签 (p)

     <p>这是⼀个段落</p>

     p 标签描述的段落, 前⾯还没有缩进

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

 2.4 换⾏标签(br)和分割线标签(hr)

    br 是 break 的缩写. 表示换⾏。
    br 是⼀个单标签 (不需要结束标签 ) 。

    分割线标签:<hr>
   <br/> 是规范写法 . 不建议写成 <br> 。

   <br> 标签只是简单地开始新的一行,跟段落不一样,所以不会产生段间距

2.5 格式化标签 (标签样式)

加粗: 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>

2.6 图⽚标签: img 

相对路径和绝对路径

图片格式

虽然图片格式这一节知识比较多,大部分我们只需要了解就可以了,我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。

1、JPG可以很好处理大面积色调的图像,如相片、网页一般的图片。

2、PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。

3、GIF格式图片图像效果很差,但是可以制作动画。

    注意:
            1. 属性可以有多个, 不能写到标签之前
            2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.
            3. 属性之间不分先后顺序
            4. 属性使⽤ "键值对" 的格式来表示

2.7 超链接标签: a

超链接使用a标签,语法如下:

<a href="链接地址"  target="目标窗口的打开方式">

表1 <a>标签target属性
target属性值说明
_self默认方式,即在当前窗口打开链接
_blank在一个全新的空白窗口中打开链接
_top在顶层框架中打开链接
_parent在当前框架的上一层里打开链接

我们只需要掌握“_self”和“_blank”这两个属性值就可以了,其他两个用不到。

href: 必须具备, 表示点击后会跳转到哪个⻚⾯.

target: 打开⽅式. 默认是 self. (当前页面打开此链接)如果是 blank 则⽤新的标签⻚打开.(新页面打开此链接)

 链接的⼏种形式:

    外部链接: href 引⽤其他⽹站的地址

   <a href="http://www.baidu.com">百度</a>
    内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可
    先创建⼀个 1 .html     <a href="2.html">点我跳转到 2.html</a>
    空链接: 使⽤ # 在 href 中占位.
    <a href="#">空链接</a>
    下载链接: href 对应的路径是⼀个⽂件. (可以使⽤ zip ⽂件)
    <a href="test.zip">下载⽂件</a>
    ⽹⻚元素链接: 可以给图⽚等任何元素添加链接(把元素放到 a 标签中)
    <a href="http://www.sogou.com">
       <img src="rose.jpg" alt="">

    </a>
    锚点链接: 可以快速定位到当前⻚⾯中的某个位置.
    <a href="#one">第⼀集</a>
    <a href="#two">第⼆集</a>
    <a href="#three">第三集</a>
    <p id="one">
      第⼀集剧情 <br>
      第⼀集剧情 <br>
      ...
    </p>
    <p id="two">
      第⼆集剧情 <br>
      第⼆集剧情 <br>
    ...
    </p>
    <p id="three">
      第三集剧情 <br>
      第三集剧情 <br>
    ...
    </p>

禁⽌ a 标签跳转:  <a href="javascript:void(0);">   或者   <a href="javascript:;">

2.8 列表标签(ol,ui,dl)

 3种列表的语义记忆:

表1 3种列表记忆
标签语义说明
olordered list有序列表
ulunordered list无序列表
dldefinition list定义列表

列表有3种:有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用,而定义列表比较少用。在实际应用中,最常用的是无序列表,请大家重点掌握。

效果图展示:


 2.9 表格标签

1. 表格标签属性

 基本使用:

    table 标签 : 表示整个表格 。  table 包含 tr ,  tr 包含 td 或者 th.
    tr: 表示表格的⼀⾏
    td: 表示⼀个单元格
    th: 表示表头单元格. 会居中加粗
    thead: 表格的头部区域(注意和 th 区分, 范围是⽐ th 要⼤的)
    tbody: 表格得到主体区域.

设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置。

    这些属性都要放到 table 标签中.
    align:  是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
    border: 表示边框. 1 表示有边框(数字越⼤, 边框越粗), "" 表示没边框.
    cellpadding: 内容距离边框的距离, 默认 1 像素
    cellspacing: 单元格之间的距离. 默认为 2 像素
    width / height: 设置尺⼨.


2. 合并单元格


2.10 音频标签(audio)

2.11 视频标签(video)

2.12 表单标签(form)

常见表单元素:

  • form 表单 一般情况下,其他表单相关元素都是它的后代元素

  • input 单行文本输入框、单选框、复选框、按钮等元素

  • textarea 多行文本框

  • select、option 下拉选择框

  • button 按钮

  • label 表单元素的标题

  • fieldset 表单元素组

  • legend fieldset 的标题

input 常用属性

type:input 的类型

  • text:文本输入框(明文输入)

  • password:文本输入框(密文输入)

  • radio:单选框

  • checkbox:复选框

  • button:按钮

  • reset:重置

  • submit:提交表单数据给服务器

  • file:文件上传

  • hidden:隐藏域

maxlength:允许输入的最大字数

placeholder:占位文字

readonly:只读

disabled:禁用

checked:默认被选中 (只有当 type 为 radio 或 checkbox 时可用)

autofocus:当页面加载时,自动聚焦

name:名字 (在提交数据给服务器时,可用于区分数据类型)

value:取值

form:设置所属的form元素(填写form元素的id)

  • 一旦使用了此属性,input 元素即使不写在 form 元素内部,它的数据也能够提交给服务器

去除 input 的 Tab 键选中效果

  • input { outline:none; }

  • 或者将 tabindex 属性设置为 -1

布尔属性

布尔属性可以没有属性值,写上属性名就代表使用这个属性

常见的布尔属性有 disabledcheckedreadonlymultipleautofocusselected

在这里插入图片描述

按钮 - input 和 button

普通按钮(type=button):input使用 value 属性设置按钮文字

重置按钮(type=reset):重置它所属 form 的所有表单元素(input、textarea、select)

提交按钮(type=submit):提交它所属 form 的表单数据给服务器(input、textarea、select)
在这里插入图片描述

 默认情况下,敲回车键 (Enter) 会自动提交表单数据给服务器
如需禁止此行为,需要编写相应的 JavaScript 代码

使用 button 元素也能实现按钮,功能效果跟 input 一样,按钮文字在标签之间设置

在这里插入图片描述

label 绑定 input (扩大可点击区域)

  • label 元素一般跟 input 配合使用,用来表示 input 的标题

  • label 可以跟某个 input 绑定,点击 label 就可以激活对应的 input

  • label 元素的 for 属性与相应 <input> 元素的 id 属性进行了关联。这样,当用户点击标签文本时,文本框将自动获得焦点。

在这里插入图片描述

 也可以使用以下写法:使用 label 标签包住 input 

在这里插入图片描述

radio (单选框)

name 值相同的 radio 才具备单选功能

在这里插入图片描述

checkbox (多选框)

属于同一种类型的 checkbox,name 值要保持一致

在这里插入图片描述

隐藏按钮 (type=hidden) 

隐藏域不会显示到网页界面上,但提交表单数据的时候,它的 name 和 value 也会被提交给服务器

如果有些发放给服务器的数据,是不需要用户输入的,或者不希望在界面上显示出来,可以使用隐藏域

在这里插入图片描述

select 和 option (下拉选择框和下拉选择框中的选项)       

option 是 selec t的子元素,一个 option 代表一个选项

<select>` 元素用于创建下拉选择框,而 `<option>` 元素用于定义下拉选择框中的选项。

在这里插入图片描述

select 常用属性

  • multiple:可以多选

  • size:显示多少项

option 常用属性

  • selected:默认被选中

fieldset 和 legend (创建一个逻辑上的分组,提供一个标题或说明性文本)

  • <fieldset>` 元素用于将相关的表单字段组合在一起,创建一个逻辑上的分组。

  • `<legend>` 元素用于为 `<fieldset>` 元素提供一个标题或说明性文本,帮助用户理解该字段集的目的或内容。

在这里插入图片描述

 在这里插入图片描述

多行输入框(textarea)

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 <textarea> 标签

在表单元素中,<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件,可以输入更多的文字,该控件常用于留言板、评论。

语法:

<textarea rows="3" cols="20">
	文本内容
</textarea>
  • 通过 <textarea> 标签可以轻松地创建多行文本输入框

  • cols="每行中的字符数"rows="显示的行数",我们在实际开发中不会使用,都是用 CSS 来改变大小

  • 如果要禁止拉伸文本框大小,则:style="resize: none"

  form 的常用属性

action:用于提交表单数据的请求 URL

method:请求方法(get 和 post),默认是 get

target 在什么地方打开URL(参考 a 元素的 target)

enctype 规定了在向服务器发送表单数据之前如何对数据进行编码,取值有 3 种:

  • application/x-www-form-urlencoded:默认的编码方式

  • text/plain:普通文本传输

  • multipart/form-data:文件上传时必须为这个值,并且 method 必须是 post 请求

accept-charset:规定表单提交时使用的字符编码

get 和 post

提交表单数据时,浏览器发送的是 http 请求,有 2 种请求方法可以选择:

get
在请求 URL 后面以 ? 的形式跟上发给服务器的参数,多个参数之间用 &隔开,比如
http://ww.test.com/login?phone=123&password=234&sex=1
由于浏览器和服务器对 URL 长度有限制,因此在 URL 后面附带的参数是有限制的,通常不能超过 1KB
在这里插入图片描述

 post
发给服务器的参数全部放在请求体中
理论上,post 传递的数据量没有限制(具体还得看服务器的处理能力)

 在这里插入图片描述


3. HTML 特殊字符

有些特殊的字符在 html ⽂件中是不能直接表示的, 例如:

空格: &nbsp;

⼩于号: &lt;

⼤于号: &gt;

按位与:&amp;

  • 46
    点赞
  • 273
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
足够无余庄 的 HTML HTML 4.0 手册(中文版) ,可以说是最全的 HTML 4.0 手册 原文件是HTML文件,需要COPY到C:\HTML40\目录下才能看,不方便。 由精品技术论坛的 Commands 同学转主 CHM 格式。 [转贴] 我 在 去 年 的 1997 月 9 日 至 7 月 31 日 之 间, 翻 译 了 Hyper Text Mark Language (HTML) 4.0 Draft, 并 且 通 过 W3C (World Wide Web Consortium) 组 织 的 确 认, W3C 组 织 把 我 的 名 字 放 在 他 们 节 点 的 这里 和 那里 之 后, 我 每 天 都 会 收 到 一 两 封 信 向 我 索 要 这 份 文 档. 甚 至 有 人 打 算 寄 钱 给 我, 买 一 份 拷 贝, 其 实 这 份 文 档 的 在线 版 本 完 全 是 免 费 的, 当 然, 为 了 这 份 文 档 的 更 完 善 化 和真 正 的 完 全 的 免 费 化, 我 也 接 受 各 种 类 型 的 赞 助. 目 前, 这 份 文 档 是 在 整 个 国 际 互 联 网 络 上 能 够 找 到 的 唯一 的 中 文 版 的 HTML 4.0 协 议 书, 虽 然 它 是 免 费 的, 但 还 是 要请 各 位 网 友 遵 守 版 权 约 定, 任 何 未 经 本 人 授 权 的 转 载 (不包 括 热 链) 在 内, 印 刷 都 将 在 法 律 上 被 认 为 是 非 法 的. 不 过, 作 者 欢 迎 各 位 在 网 页 上 通 过 如 下 的 代 码 制 作 热链: <A HREF="http://gb-html.home.ml.org"><IMG SRC="/image/html40forenough.gif" BORDER=0 HEIGHT=21 WIDTH=472></A> 上 面 的 代 码 会 把 本 页 顶 端 的 图 案 放 置 在 您 的 网 页 上, 并且 把 链 接 到 这 里, 这 一 切 都 是 免 费 的, 不 过, 如 果 您 愿 意 的话, 请 给 我 发 一 封 信. 这 份 文 档 从 来 都 没 有 如 此 完 整 的 出 现 在 网 上 过 (指 中 文版), 这 次 由 于 足 够 无 余 庄 的 少 庄 主 向 我 索 要, 我 实 在 不 忍拂 了 如 此 美 丽 的 姑 娘 的 意, 因 此 特 地 写 了 这 段 序, 把 它 放在 这 里, 而 且, 这 一 次, 还 特 地 提 供 了 压 缩 版 本, 您 可 以 自 由地 下 载. 下 面 分 别 是 在 线 浏 览 和 下 载 这 套 文 档 的 链 接. 对 于 这 种 文 档 的 翻 译, 我 是 第 一 次, 希 望 网 络 高 手 和 英语 高 手 能 够 给 我 提 出 意 见, 让 我 能 够 更 好 地 来 改 进 这 份 文档, 也 为 了 能 够 让 更 多 的 中 国 人 能 够 进 入 电 脑 高 手 的 行 列. 好 了, 现 在 就 进 入 HTML 4.0 中 文 版 吧: 1. 中 文 版 超 文 本 标 注 语 言 首 页 邵 宛 澍 1998 年 1 月 24 日
在VSCode中使用HTML标签有以下几个常用的方法和步骤: 1. 使用基本的HTML标签:在VSCode中编写HTML时,可以使用常见的HTML标签来构建网页。比如使用`<p>`标签来创建段落,使用`<h1>`到`<h6>`标签来定义标题,使用`<ul>`和`<li>`标签创建无序列表等等。 2. 使用插件加速标签的输入:VSCode提供了丰富的插件来帮助开发者更快速地输入HTML标签。例如,安装HTML Snippets插件后,可以通过在HTML文件中输入标签的简写形式,然后按下Tab键,即可自动补全标签的代码。 3. 使用Emmet快速编写标签:Emmet是一套用于快速编写HTML和CSS的工具,也可以在VSCode中使用。通过使用Emmet的语法,可以更快速地编写HTML标签。例如,输入`div#container>p`,然后按下Tab键,即可生成一个id为container的`<div>`标签内包裹一个`<p>`标签。 4. 使用代码片段:在VSCode中,可以为常用的HTML标签设置代码片段,以便更快速地插入和编辑标签。通过在用户代码片段中添加HTML标签的模板,例如`<p>${1}</p>`,可以在编写HTML时快速插入这个模板,并且可以通过Tab键在标签的不同位置进行跳转和编辑。 综上所述,VSCode提供了多种方法和工具来帮助开发者更方便地使用HTML标签进行编码。你可以根据个人的喜好和需求选择适合自己的方法来编写HTML标签。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

书生-w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值