HTML基本介绍与简单标签

时间：2021-09-03 14:15:52

HTML基本介绍

  • 概念
    • HTML、css、javascript→前端最核心的内容
      • 经典面试问题：三者关系？
        答：HTML——结构（骨架）
        css——样式（效果）
        javascript——行为（用户行为）
    • HTML 超文本标记语言
      • 全称：Hyper Text Markup Lauguage
      • 文本（txt文件）——浏览器可以直接打开
        • 如果有中文，会出现乱码问题
      • 超文本
        • 指页面中可以包含图片、链接甚至音乐、程序等非文字元素。
      • 标记
        • 语法结构——<标签名>
        • 注意——浏览器解析标记（该标记是规定的标记内容）
      • 注意：
        • HTML是一个不严格的语言，允许不用编写所有的内容；
        • 标签名没有明确的规定（大小写），但是建议标签名使用小写。
      • XHTML解释为严格意义的HTML！
  • HTML结构
<!DOCTYPE html>--//声明：当前页面使用的是哪个HTML版本
<html>--//根标签：有且仅有一个
<head>--//用于设置当前页面的信息
<meta charset="UTF-8">--//设置当前页面的编码
<title>Title</title>--//当前页面的标题
</head>
<body>--//用于显示在浏览器中
</body>
</html>
  • 声明
    • 注意：声明必须在文档的0行0列
    • 记住：HTML5的声明
    • 作用：告诉浏览器HTML页面使用的版本
      • 不同的HTML版本支持不同的标记（标签）内容
  • 根标签
    • < html>< /html >除声明以外所有东西都包含在根标签中
    • 注意：有且只有一个
  • 标记（标签）
    • 起始标签——有开始有结束
      • 开始标签——<标签名>
      • 结束标签——

HTML标签

标题标签——h1~h6

  • 默认运行效果，< h1>最大，< h6>最小
    注意：我们并不关系（样式是可以通过css样式来改变的）， 关心的是 语义化（语义化——当前标签本身的含义）
  • 实际开发过程中，< h1>用得最多（主标题），搜索引擎会抓取当前页面的< h1>中的内容
    • 一般的一个HTML页面只编写一个< h1>标签
    • < h2>用的较多（副标题），最多用到< h3>，< h4>~< h6>几乎不用的。
    • 自有属性（不同标签有不同的各自属性）：
      比如：
      • 标题标签： align——设置当前标题显示的水平位置
      • 注意——在实际开发中，并不是用这些属性
        在实际开发中，有关的样式和位置都是由css来控制的
    • 标准属性——几乎所有标签都有的！比如：id，class，title，lang，style
    • 事件属性——下回分解

段落标签
< p >——起始标签

  • 效果——和标题h1很像，只有换行；
  • a.如果将多行的文本内容编写在一个p标签中，即使具有换行，浏览器运行时效果也是没有换行效果的；
    b.如果想使用空格的话，无论是用多少个空格符，在浏览器中只能识别一个空格效果。一些浏览器可能根本就不识别空格。所以在实际开发中，空格在浏览器运行时作用几乎是忽略不计的。
  • 实现换行效果方法：具有换行标签 < br >，浏览器在解析到< br>时，才会实现换行效果。
  • 换行< br >
  • 水平线< hr/ >
  • html转义字符”& nbsp ;”

列表

  • 有序列表
    • < ol >——表示有序列表
    • < li >——表示有序列表的内容
    • 默认排序符号——1,2,3,4,5,可以使用type来设置排序符号。注意：这个属性不推荐使用。
  • 无序列表
    • < ul >——表示无序列表
    • < li >——表示无序列表的内容
    • 默认排序符号使用小黑点，仍然可以通过type来设置排序符号：disc（默认）小黑点，square小方块，circle小圆圈。但是仍是不建议使用！
  • 定义列表（不常用）
    • < dl >——表示定义列表的容器
    • < dt >——表示定义列表的名称
    • < dd>——表示定义列表的内容（项）
    • 定义列表：dt和dd是同级关系！没有任何包裹的关系！容器只能是dl!
  • 最经常使用的列表作用，列表的语义化(所谓的使用其语义化的意思，应该是使用该HTML标签自带的css样式)：
    一、页面排头横排项目项
    二、页面内容中纵排项目项

链接元素

  • 作用：当前页面跳转到另一个页面
  • 必要属性：
    href属性——设置跳转到的页面地址
  • 可选属性：
    target属性——设置链接打开方式
    • 默认值是“_self”，当前窗口打开
    • _blank，在新窗口打开
    • _parent，在父级窗口打开
    • _top,把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架。
标签：

相关文章