HTML学习笔记——标签

HTML学习笔记——标签

大家好,又见面了,我是全栈君。

最近开始学习前端的一些知识,了解了一下Html和CSS。

HTML:是网页内容的载体,它负责的是网页的内涵,也就是网页要呈现的内容,包括了图片,视频还有文字。是网页要加载的东西;

CSS:是样式表现,也就是网页好不好看就是它负责的。用来改变内容的外观;

JavaScript是用来实现网页的特效,如鼠标滑过表格背景的颜色改变。还有新闻图片的轮换。可以实现交互,动画。

HTML标签

标签的特点:

    1. 标签由英文尖括号<和>括起来;
    2. 一般是成对出现。分为开始标签和结束标签;结束标签比开始标签多了一个/;如: <p></p>,<div></div> <span></span>
    3. 标签和标签之间是可以嵌套的,也就是一个标签里面还可以再放入一个标签;
    4. HTML标签不区分大小写;(建议小写)

TTML文件的基本结构:

<html>
    <head>...</head>
    <body>...</body>
</html>
    • <html>…</html>:根标签,所有的标签都放在根标签中;

    • <head>…</head> :是用于文档的头部,是所有的头部元素的容器,便不是网页中之间显示的内容,他描述的是网页的各种属性。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签
      <head>
          <title>...</title>
          <meta>
          <link>
          <style>...</style>
          <script>...</script>
      </head>
      

      其中<title>…</title> :在该标签之间的文字是网页的标题信息,他不会在网页中出现,而是出现在浏览器的标题栏中,该标签用于告诉用户和搜索引擎这个网页的内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。

    • <body>…</body> :标签之间的内容是网页的内容,也就是网页上显示的内容都放在这里。如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

HTML的代码注释的格式:<!–注释文字 –>

<body>…</body>中常见标签:

标签一:<p>标签 :段落

    • 语义:添加段落 
    • 语法:<p>段落文本</p>,一段文字一个<p>标签;
    • 默认样式:,段前段后都会有空白;

标签二:<hx>标签:标题

    • 语义:网页标题,他和<title>…</title> 是不一样的,也表示的是显示在网页上面的标题,也就是文章的标题
    • 语法:<hx>标题文本</hx> (x为1-6)
    • 默认样式:加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推,h6标签的字号最小。

标签三:<strong>和<em>: 加强语气

    • 语义:都表示强调,但是<em>的语气比<strong>强调的语气更加强烈;
    • 语法: <em>需要强调的文本</em> ,<strong>需要强调的文本</strong>
    • 默认样式:<em>显示为斜体,<strong>显示为加粗。

标签四:<span>:为文字设置单独样式

    • 语义:无;只是为文字设置和其它文字不同的样式
    • 语法:<span>文本</span>
    • 注意:使用该标签,还应在<head>…</head> 标签中设置属性:如:
      <style>
      span{
          color:blue;
      //为<span>元素设置文本颜色为蓝色。
      }
      </style>
      

标签五:<q>:短文本引用

    • 语义:引用别人的话
    • 语法:<q>引用文本</q>
    • 默认样式:文字加上双引号

标签六:<blockquote>:长文本引用

    • 语义:引用别人的话
    • 语法:<blockquote>引用文本</blockquote>
    • 默认样式:缩进样式

标签六:<br/>:分行显示文本(空标签

    • 语义:回车换行
    • 语法:<br />
    • <br/>标签是一个空标签,只需要写一个开始标签
    • 在 html 代码中输入回车、空格都是没有作用的。

标签七:&nbsp; : 空格

    • 语义:一个空格
    • 语法:&nbsp;

标签八:<hr>:添加水平横线(空标签)

    • 语义:分隔的横线
    • 语法:<hr />(xhtml1.0版本)
    • 默认样式:线条比较粗

标签九:<address>:为网页加入地址信息

    • 语义:定义电子邮件地址、签名或者文档的作者身份等联系地址
    • 语法:<address>联系地址信息</address>
    • 默认样式:斜体

标签十:<code>:插入一行代码

    • 语义:单行代码
    • 语法:<code>代码语言</code>

标签十一:<pre> :预格式化的文本

    • 语义:预格式化的文本,
    • 语法:<pre>语言代码段</pre>
    • 样式:被包围在 pre 元素中的文本通常会保留空格和换行符
    • 主要用于插入一段代码

转载于:https://www.cnblogs.com/hesi/p/6143538.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108738.html原文链接:https://javaforall.net

(0)
上一篇 2022年2月23日 上午7:00
下一篇 2022年2月23日 上午8:00


相关推荐

  • AI智能体|扣子(Coze)搭建【一键生成10W+爆款文章】工作流

    AI智能体|扣子(Coze)搭建【一键生成10W+爆款文章】工作流

    2026年3月12日
    1
  • ntp校时服务器(NTP校时器)介绍

    ntp校时服务器(NTP校时器)介绍酷鲨科技作为一家时间同步领域科研公司 今天简单介绍一下 ntp 校时服务器 其实大部分人认为 ntp 校时服务器是不同于 NTP 网络时间同步服务器 其实不然 基本是同一种产品 只是叫法不同 ntp 校时服务器页可以称为 NTP 校时器 ntp 校时服务器主要作用 ntp 校时服务器主要还是帮助不同网络设备之间进行时间同步 然而 同步 概念在通信领域中频率的同步 或者网络中每个节点的时钟频率与相位的同步 并且在规定的标准误差之间 其实网站时间的同步并没有解决 ntp 校时服务器的功能也就是让网络中的每一个时钟节点 频率 每一个具

    2026年3月16日
    2
  • 动态ActionForm

    动态ActionForm在正常操作中 每一个 Action 必须对应一个 Actio

    2026年3月20日
    2
  • 智能体搭建入门指南[项目源码]

    智能体搭建入门指南[项目源码]

    2026年3月14日
    2
  • ant man 什么意思_ant是什么意思中文翻译

    ant man 什么意思_ant是什么意思中文翻译音标 英 nt 美 nt n 蚂蚁网络蚂蚁 天线 只蚂蚁 蚁网络释义 1 蚂蚁 另外 密码战士还设计了一个系统 用来与英语 26 个字母相对应 例如 字母 A 为 沃 拉 其 意为 蚂蚁 ant 字母 E 为 迪兹 意为 麋鹿 elk 另外 针对那些没有能够列入 211 个密码的词语 他们根据纳瓦霍语 2 天线 ans 回答 ant 天线 apr 四月 3 只蚂蚁 Ilookeduptos

    2026年3月19日
    1
  • 2022clion激活码最新【2022免费激活】

    (2022clion激活码最新)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~FZP9ED60OK-eyJsaWNlbnNlSWQiOi…

    2022年4月1日
    359

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号