Jasper Jiang'Blog

浅学HTML

3 min

初步了解

  • HTML :hyper text markup language（超文本==标记==语言）
  • 目前最新版本：HTML5+CSS3
  • W3C : world wide web consortium(万维网联盟)
  • .org结尾代表开源的意思
  • 使用emmet插件：！+tab可自动生成一个html结构(需要中文)

学习使用常见的HTML标签

什么是HTML标签

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b>和</b>

HTML标签有哪些

  • <!DOCTYPE html> 声明为 HTML5 文档（又叫web 页面）

  • <html> 元素是 HTML 页面的根元素

  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。（通常需要定义此格式避免输出中文乱码）

  • <title> 元素描述了文档的标题

  • <body> 元素包含了可见的页面内容

  • <style>元素可以引入css

  • <h1> 元素定义一个大标题

    • <h2>二级标题
    • <h3>三级标题
    • <h6>最多可以定义六级标题

  • <p> 元素定义一个段落

  • <a>元素定义了一个链接

  • <img>元素定义了一个图像

  • <br>元素表示换行

  • <div>元素定义 HTML 文档中的一个区域部分

  • <botton>元素定义一个按钮

  • <b>元素可让字体加粗

HTML标签和元素有何区别

  • 元素会包含开始标签与结束标签，例如：

    这是一个段落。

注意事项

  • 不要忘记结束标签

    • <~/>尖括号内加个斜杠表示结束

    • 结束标签可避免未知的错误

  • 养成好习惯，使用小写标签

学习理解标签中的块级元素与内联元素

块级元素

什么是块级元素
  • 块级元素显示时会以新行开始或结束
块级元素有哪些
  • <div>
  • <h1>
  • <p>

内联元素

什么是内联元素
  • 内联元素显示时通常不会以新行开始
内联元素有哪些
  • <a>
  • <b>
  • <br>
  • <img>

二者联系

  • 大多数html元素可以被分为块级元素和内联元素

学习HTML标签的样式

  • html标题

    • <h1>这是标题</h1>

  • html段落

    • <p>这是段落</p>

  • html链接

    • <a href="https://github.com/ntgeek/2022-Geek">这是一个链接</a>
      • href 属性：描述了链接的目标

  • html图像

    • <img src="图片地址" alt="图片描述" width="304" height="228">

      • src属性是引入图片的地址

      • alt 属性用来为图像定义一串预备的可替换的文本。

      • 之后两个属性设置了图片的宽度与高度

    • 背景图片

      • <style>
        body{
               background-size: 125%;
               background-image:url('https://pic.3gbizhi.com/2019/0930/20190930040036442.jpg');
        }
</style>
大一