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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 用c语言编写一个学生成绩管理系统_c语言成绩查询系统编程

    用c语言编写一个学生成绩管理系统_c语言成绩查询系统编程C语言简单实现学生成绩管理系统一、前言首先,要写一个管理系统必须要先搭出一个框架来,即明确自己要实现哪些功能,将每个功能都写陈一个函数,然后再去编写实现各个功能的函数,最后再思考各个函数之间的相互调用。如果没有先搭好框架,而是直接一上手就去写代码的话,写着写着就会有种无从下手的感觉,就像你要做一道编程题目一样,首先要做的肯定是去读题目,看题目想要让我们干什么,然后才会去写代码。其次,最…

    2025年12月7日
    8
  • 带你深入了解 GitLab CI/CD 原理及流程

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:狂乱的贵公子 cnblogs.com/cjsblog/p/12256843.html GitLab CI/CD…

    2021年6月25日
    77
  • java swing 多层_java swing布局嵌套[通俗易懂]

    java swing 多层_java swing布局嵌套[通俗易懂]小菜一枚,刚接触Java,想写个注册界面,但却遇到一个奇怪问题:代码如下:publicvoidframe(){this.frame=newJFrame(“用户注册”);//窗体基本属性this.frame.setSize(600,400);this.frame.setLocationRelativeTo(null);this.frame.setVisible(true);this.fr…

    2025年6月14日
    2
  • bwapp 06

    bwapp 06文章目录Base64Encoding(Secret)ClearTextHTTP(Credentials)HostHeaderAttack(ResetPoisoning)HTML5WebStorage(Secret)SSL2.0DeprecatedProtocolTextFiles(Accounts)Base64Encoding(Secret)抓包,找到sercret,进行base64编码以上级别,40位16进制数,推测使用了sha1编码注意先解码,再base

    2022年9月23日
    5
  • websocket即时通讯

    websocket即时通讯目录一、websocket简介二、背景三、优点1、控制开销2、实时性更强3、保持连接状态4、更好的二进制支持5、支持扩展和更好的实现压缩效果四、原理1、客户端、服务器建立TCP连接,三次握手。2、TCP连接成功后,客户端通过HTTP协议向服务器传送websocket支持的版本号信息。(开始前的HTTP握手)3、服务器收到客户端的握手请求后,同样采用HTTP协议回馈数据。4、当收到了连接成功的消息后,通过TCP通道进行传输通信。五、websocket和socket的关系六、SuperWebSocket实现服务

    2022年7月11日
    19
  • 在线电影资源的版式说明

    在线电影资源的版式说明http://tieba.baidu.com/f?kz=47439298http://wenku.baidu.com/view/74cadfd0b9f3f90f76c61bca.htmlhttp://wenku.baidu.com/view/a14f7410ff00bed5b9f31d9b.html一、在线电影资源的常见版式(按画质排列)1. CAM(枪版) CA

    2022年7月26日
    7

发表回复

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

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