春
节
快
乐

HTML常用标签

HTML语法规范

  • 基本语法

    • 双标签 <html> </html>

    • 单标签(极少情况) <br />

  • 标签关系

    • 包含关系和并列关系

基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

<html>    
    <head>      
        <title>我的第一个页面</title> 
    </head> 
    <body> 
        你在狗叫什么？    
    </body> 
 </html>

image-20220310114746549

网页开发工具

  1. 这三个代码VSCode上自动生成，不需要我们重写

  2. <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.

  3. <html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.

  4. <meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析

常用标签

  • 标题标签 <h1> - <h6>
    • 双标签
  • 段落<p> </p>
    • 双标签
    • 文本在一个段落中会根据浏览器窗口的大小自动换行
    • 段落与段落之间有空行
  • 换行标签<br />
    • 单标签
    • 简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间
  • <div> <span> 是没有语义的，它们就是一个盒子，用来装内容的
    • <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
    • <span> 标签用来布局，一行上可以多个 <span>。小盒子
  • 图像标签<img>
    • src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
    • image-20220310202057030
    • 注意
      • 图像标签可以拥有多个属性，必须写在标签名的后面。
      • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 超链接标签<a>
    • 语法格式<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
      • 必须要写href 用于指定链接目标的url地址
      • target 用于指定链接的打开方式，其中_self为默认值，_blank为在新窗口打开
    • 链接分类
      • 外部链接<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
      • 内部链接：网站内部页面之间的相互链接.<a href = "index.html">首页</a>
      • 空链接：当时没有确定的链接目标<a hred="#">首页</a>
      • 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
      • 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
      • 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
        • 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
        • 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>

注释和特殊字符

  • 注释<!-- 注释语句 --> 快捷键: ctrl + /
  • 特殊字符

image-20220310204448014

posted @ 2022-03-13 18:34  （´v｀）  阅读(95)  评论(0)    收藏  举报