前端 --- HTML的基础标签

最新推荐文章于 2024-04-24 16:11:00 发布
最新推荐文章于 2024-04-24 16:11:00 发布
阅读量879 收藏 1
点赞数 1
分类专栏： 前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52025712/article/details/123035797
版权

目录

HTML 入门

  • < !DOCTYPE html> 声明为 HTML5 文档

  • < head> 元素包含了文档的元（meta）数据，如 < meta charset=“utf-8”> 定义网页编码格式为 utf-8

  • HTML文档也叫做 web 页面

  • 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML标签

HTML 标签对大小写不敏感：

等同于

，而在未来 (X)HTML 版本中强制使用小写，一般用小写

HTML 的 标签一般成对出现，特例：

1、< area>：用于图像映射内的区域。

2、< base>：文档中所有相对URL的基本URL。每个文档只能有一个，它必须位于页面的< head>中。

3、< br>：换行符，通常用于文本内容以创建单个换行符而不是段落。它不应该用于通过堆叠

许多< br>标签在页面上创建视觉分离，因为该函数是视觉需求，因此是CSS的域而不是

HTML。

4、< col>：指定元素中每列的列属性。

5、< command>：指定用户可以调用的命令。

6、< embed>：与外部应用程序和交互式内容一起使用以进行集成。

7、< hr>：水平规则，是页面上的一条直线。在许多情况下，CSS边框用于创建分隔线而不是

此HTML元素。

8、< img>：HTML的主要元素之一，这是图像标记。它用于将图形图像添加到网页。

9、< input>：用于从访问者捕获信息的表单元素。有许多有效的输入类型，从多年来在表单

中使用的常见“文本”输入到属于HTML5的一些新输入类型。

10、< keygen>：此标记创建用于表单的密钥对生成器字段。

img

11、< link>：不要与“超链接”或锚点（< a>）标签混淆，此链接用于设置文档与外部资源之

间的链接。例如，您可以使用它链接到外部CSS文件。

12、< meta>：元标记是“有关内容的信息”。它们位于文档的< head>中，用于将页面信息

传递给浏览器。有许多不同的meta标签，你可以在网页上使用。

13、< param>：用于定义插件的参数。

14、< source>：此标记允许您为页面上的媒体指定备用文件路径，包括视频或图像或音频文件。

15、< track>：此标记设置要与媒体文件，视频或音频一起使用的轨道，这些轨道通常与或标记一起添加。

16、< wbr>：这代表断言机会。它指定添加换行符可以接受的文本块中的位置。

元素定义了整个 HTML 文档。
  • < head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript> 和 < base>。

< head> 定义了文档的信息

< title> 定义了文档的标题

< base>定义了页面链接标签的默认链接地址

< link>定义了一个文档和外部资源之间的关系

< meta>定义了HTML文档中的元数据

< script>定义了客户端的脚本文件

< style>定义了HTML文档的样式文件

< body> 元素定义了 HTML 文档的主体。

常用标签

< hr> hr 标签在 HTML 页面中创建水平线。

< h1> h1定义最大的标题。

h6定义最小的标题。

段落是通过

标签定义的。

< br> 是个换行符

< a href=“url”>链接文本< /a> 超链接

  • 使用 target 属性，你可以定义被链接的文档在何处显示。

< img src=“url” alt=“some_text”> 图像

  • alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

  • height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

    表格

    < table border=“1”>

    < tr>

    ​ < td>row 1, cell 1

    ​ < td>row 1, cell 2

    < /tr>

    < tr>

    ​ < td>row 2, cell 1

    ​ < td>row 2, cell 2

    < /tr>

    < /table>

  • 表格的表头使用 标签进行定义。

  • border="1"是设置边框

有序链表无序链表

  • 无序列表使用
    • 标签
  • < ul>
    < li>Coffee< /li>
    < li>Milk< /li>
    < /ul>
  • 有序列表始于 < ol> 标签
  • < ol>
    < li>Coffee

  • < li>Milk
    < /ol>
  • 自定义列表以 < dl> 标签开始
  • < dl>
    < dt>Coffee< /dt>
    < dd>- black hot drink< /dd>
    < dt>Milk< /dt>
    < dd>- white cold drink< /dd>
    < /dl>

表单

  • 多数情况下被用到的表单标签是输入标签（< input>）。
  • 文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
  • 密码字段通过标签< input type=“password”> 来定义
  • 标签定义了表单单选框选项 name 要一致，不然单选效果出不来
  • < input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 name 属性也要相同
  • < input type=“submit”> 定义了提交按钮.

框架

  • 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
  • < iframe src=“URL”>< /iframe> 框架语法
  • frameborder 属性用于定义iframe表示是否显示边框。
  • height 和 width 属性用来定义iframe标签的高度与宽度。
  • iframe可以显示一个目标链接的页面，如：< iframe src=“demo_iframe.htm” name=“iframe_a”>

    < a href=“http://www.runoob.com” target=“iframe_a” rel=“noopener”>RUNOOB.COM

颜色

  • HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

  • HTML 颜色由红色、绿色、蓝色混合而成。有需要自己搜

  • 目前所有浏览器都支持以下颜色名。颜色名是HTML和CSS定义规范的

  • 颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

HTML中元素被定义为块级元素或内联元素

  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。如: < h1>, < p>, < ul>, < table>

  • 内联元素在显示时通常不会以新行开始。如：< b>, < td>, < a>, < img>

  • HTML < div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

  • < div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

    如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。

    < div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法

  • HTML < span> 元素是内联元素，可用作文本的容器

    < span> 元素也没有特定的含义。

    当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

文本格式化标签

<b> 定义粗体文本

<em> 定义着重文字

<i> 定义斜体字

<small> 定义小号字

<strong> 定义加重语气

<sub> 定义下标字

<sup> 定义上标字

<ins> 定义插入字

<del> 定义删除字

盲人朋友使用阅读设备阅读网络时：<strong>会重读，<b>不会

"计算机输出"标签

<code> 定义计算机代码

<kbd> 定义键盘码

<samp> 定义计算机代码样本

<var> var定义变量

<pre> 定义预格式文本

HTML 字符实体

  • HTML 中的预留字符必须被替换为字符实体。

  • 如需显示小于号，我们必须这样写：&lt 或 &#60 或 &#060

  • 显示结果描述实体名称实体编号
    空格&nbsp;&#160;
    <小于号&lt;&#60;
    >大于号&gt;&#62;
    &和号&amp;&#38;
    "引号&quot;&#34;
    ’撇号&apos; (IE不支持)&#39;
    ￠分&cent;&#162;
    £镑&pound;&#163;
    ¥人民币/日元&yen;&#165;
    €欧元&euro;&#8364;
    §小节&sect;&#167;
    ©版权&copy;&#169;
    ®注册商标&reg;&#174;
    ™商标&trade;&#8482;
    ×乘号&times;&#215;
    ÷除号&divide;&#247;

  • HTML 中的常用字符实体是不间断空格( )。

  • 音标符字符Construct输出结果
    ̀aa&#768;à
    ́aa&#769;á
    ̂aa&#770;â
    ̃aa&#771;ã
    ̀OO&#768;Ò
    ́OO&#769;Ó
    ̂OO&#770;Ô
    ̃OO&#771;Õ

属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以名称/值对的形式出现，比如：name=“value”。

    <a> 标签中的 herf 就是属性，该属性定义了一个链接

    主要第几个属性

    属性描述
    class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
    id定义元素的唯一id
    style规定元素的行内样式（inline style）
    title描述了元素的额外信息 (作为工具条使用)

统一资源定位器

scheme://host.domain:port/path/filename

说明:

    • scheme - 定义因特网服务的类型。最常见的类型是 http

    • host - 定义域主机（http 的默认主机是 www）

    • domain - 定义因特网域名，比如 runoob.com

    • :port - 定义主机上的端口号（http 的默认端口号是 80）

    • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

    • filename - 定义文档/资源的名称

    • Scheme访问用于…
      http超文本传输协议以 http:// 开头的普通网页。不加密。
      https安全超文本传输协议安全网页，加密所有信息交换。
      ftp文件传输协议用于将文件下载或上传至网站。
      file您计算机上的文件。

HTML引入CSS

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 区域使用

内联样式

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

外联样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML引入JS（脚本）

JavaScript 使 HTML 页面具有更强的动态和交互性。

script定义了客户端脚本
noscript定义了不支持脚本浏览器输出的文本

标签速查

菜鸟教程

吕元龙的小屋
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CellHTML-crx插件
03-10
将格式设置添加到Google Spreadsheets单元格中的选定文本，并以非ASCII编码的HTML形式将其写入单元格。 CellHTML扩展使得使用Google Spreadsheets将格式化文本存储为HTML变得更加容易。 编辑单元格时，请按cmd + /（斜线）以富文本格式编辑单元格。现在，您可以选择粗体，斜体，加下划线或超链接的文本。按cmd + /或单击“提交”按钮将更改写入单元格。按退出键或单击“x”按钮取消。 现在格式化的选择将被包含在适当的HTML标记中。非ASCII字符也将被编码。 然后，按“enter”键保存单元格。 支持语言:English
HTML基础---表格标签
weixin_48055520的博客
04-15 1029
HTML--表格标签
html table-cell用法,CSS的table-cell属性怎么使用
weixin_30296995的博客
06-11 666
table-cell是像内联元素和块元素一样用display属性来表现的显示形式，可以用来创建表格和Excel单元格，本篇文章就来给大家分享一下关于CSS中table-cell属性的使用方法。我们先来介绍一下table-cell属性的基本概念table-cell是display属性的值，可以给出类似于table标记的子元素的样式。但我认为它看起来像“元素可以轻松并排排列”。最初“表格”的这一部分，...
HTML常用的知识点-2
07-29 742
1.用fieldset、legend实现文字写在边线上的效果 HTML元素 fieldset方框 　　Draws a box around the text and other elements that the field set contains.  　　在字段集包含的文本和其它元素外面画一个方框。  　　fieldset元素用于对表单中的元素进行分组并在文档中区别标出
HTML入门（5）
m0_62368676的博客
11-27 113
本篇blog主要介绍HTML表格的内容。对应书的第六章。 在HTML中，一个表格一般3个部分组成——表格：table标签；行：tr标签；单元格：td标签、th标签。 tr:table row（表格行）td:table data cell（表行单元格） th:table header cell（表头单元格） Caption标签——表格的标题，只能有一个，通常写在第一行。 <tr>表格行标签，代表表格的一行，写代码时就是一行一行地写，再在每行中写th\td创建单元格。 <th&.
html表格标签正方形分割,订阅标签界面(调整cell内部结构)
weixin_39830205的博客
06-03 882
一.搭建界面1.分析界面 需要使用什么控制器来管理我们根据需求 可以用一个UITableViewController来管理2.分析需求,我们发现cell的样式是固定的 系统的cell不能满足我们的需求我们需要自定义cell 创建cell类,同时创建xib3.如何加载xib文件3.1 可以提供一个类方法快速创建+ (instancetype)cell{return[[[NSBundlem...
HTML笔记：表格标签
明光
08-12 147
文章目录表格标签创建表格表格属性合并单元格行合并列合并示例： 表格标签 创建表格 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 当然如果我们这个表有表头，可以将第一个 tr 里面的 td 都换成 th ,里面的内容就是表头的内容，表头里面内容默认加粗居中。 里面的 table（双标签） 表示一个表，tr(双标签）表示一行，td(双标签）或者th（双
html table-cell用法,布局（一）display：table-cell
weixin_28785657的博客
06-11 1509
html：一行文字多行文字......css：div{height:200px;width:200px;border:1px solid red;}1)单行文字垂直居中.box1{line-height:200px;}2)多行文字居中.box2{display:table-cell;vertical:middle;}3)容器居中1.box3{position:absolute;top:50%;le...
html标签功能作用
weixin_44908282的博客
04-16 221
<!-- 锚点链接可以链接到任意标签id="one"的标签处 _blank重新打开一个标签页 _parent在当前页打开标签页 --> <a href="#one" target="_blank">Maps</a> <!-- src可以是https,亦可以是file --> <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="郁金香"> <img src="img/e
bboss标签库cell标签格式化数字实例
weixin_34129145的博客
11-24 96
bboss标签库cell标签格式化数字实例 带double类型的po对象定义： package test; public class TestBean { private String id; private String name; private TestBean inner; private long sellMonery = 1...
前端基础-HTML(meta标签)
01-08
meta标签 1.编码 示意图 这种情况就是乱码，是因为我们输入的中文，往计算机中保存的时候，最终都要转成2进制的数据形式，也就是说有一个编码的过程，在保存文件的时候默认使用的是ANSI编码格式，浏览器...
前端基础-HTML5新特性
01-20
增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块） a) 标记定义一个页面或一个区域的头部 b) 标记定义导航链接 c) 标记定义一篇文章内容 d) 标记定义网页...
Web-前端教程02 初遇 HTML 最基础的那些标签.zip
05-24
Web-前端教程02 初遇 HTML 最基础的那些标签.zip
头歌教学实践平台 Web前端开发基础 HTML-表单类的标签
01-20
头歌教学实践平台 Web前端开发基础 HTML——表单类的标签。源码txt格式。
HTML入门-页面结构&基础标签
01-08
(面试题)三、三个版本和一个标准（面试题）四、html5的扩展五、html创建文件（重点）六、html格式（重点）七、html基本结构（重点）八、注释九、基础标签（重点）十、文本标签十一、布局标签十二、特殊符号 ...
前端三剑客 HTML+CSS+JavaScript ⑤ HTML文本标签
最新发布
m0_73983707的博客
04-24 447
1.这些不常用的文本标签，编码时不必过于纠结(酌情而定，不用也行)2.blockquote和address是块级元素，其他的文本标签，都是行内元素3.有些语义感不强的标签，很少使用，例如：重要的、语义感强的标签即可；
用html写一个旋转菜单
liulang68的博客
04-24 721
【代码】用html写一个旋转菜单。
HTML随机点名程序
m0_65992344的博客
04-22 435
HTML随机点名程序
html笔记 ai问答
qq_50437196的博客
04-23 495
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
web前端开发环境配置与html基础
03-16
HTML基础包括HTML标签、HTML元素、HTML属性等。HTML标签用于定义HTML文档的结构，如、等；HTML元素是由开始标签、结束标签和内容组成，如标签表示段落；HTML属性用于定义HTML元素的属性，如标签的src属性表示图片的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值