HTML基础篇(1)

最新推荐文章于 2024-06-10 23:30:57 发布

JamesMoriartyZ

最新推荐文章于 2024-06-10 23:30:57 发布

阅读量169

点赞数 2

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/XzXz0207/article/details/127890802

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、认识HTML

1. 什么是HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

2. 基本网页结构

<!-- ctrl + / 添加注释 -->
<!-- 
    html标签 根标签/根元素 所有网页内容都要写在html标签里面
    开始标签和结束标签中间, 一个页面只能一个html标签
-->
<html>
  <!-- 
      head标签, 保存一些源信息
      它里面的内容, 用户是看不到的, 主要是帮助浏览器编译代码
   -->
  <head>
  </head>
  <!-- body标签 书写网页主体内容, 所有给用户看的都写在body里 -->
  <body>
    这是我的第一个页面
  </body>
</html>

3. 文档声明

<!-- 
    文档声明 写在html的最上面, 告诉浏览器我是按照html的规范来编写代码 
      浏览器也要按照规范编译, 以免代码编译陷入怪异模式, 出现乱码
 -->
<!DOCTYPE html>
<html></html>
<head>
  <body>
    氏极活是三看，前大。
  </body>
</head>

二、认识基本标签

1. title标签

<!DOCTYPE html>
<!-- 学习html标签, 要时刻关注语义, 而不是样式 -->
<html>
  <head>
    <!-- 
      title标签是网页的标题, 显示在标题栏中, 不关注它显示在哪里, 关注的是它的语义 
        最重要的意义是帮助推广部门做推广, 给浏览器搜索到
     -->
    <title>标题</title>
  </head>
  <body></body>
</html>

2. meta标签

<!DOCTYPE html>
<html>
  <head>
    <!--
        meta标签是一个自结束标签, 也可以存一些元信息, 帮助浏览器编译代码
        自结束标签有两种写法 <meta> <meta / >
        
        在开始标签里, 我们可以加属性和属性值
            charset 字符集属性 设置密码本
            UTF-8 万国码属性值 某一个密码本
            GB    中国的
            GBK   中国扩展版

        chareset的设置就是为了防止出现乱码
     -->

    <!-- 
        编码: 文字, 图片, 音视频 ==> 二进制
        解码: 二进制 ==> 文字, 图片, 视频
        乱码: 编码和解码用的不是一个密码本
     -->

    <meta charset="UTF-8" />
    <!-- keywords/description 都可以帮助浏览器检索内容 -->
    <meta name="keywords" content="手机" />
    <meta name="description" content="手机" />
    <title>网页标题</title>
  </head>
  <body>
    守战只谷便倒看，畴。
  </body>
</html>

3. 完整的网页结构

<!-- shift + ! 网页结构快捷键 -->
<!-- shift + alt + f 格式化代码 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 以下代码是响应式开发相关配置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

4. 简单常用标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 标签 html 要关注语义 -->
    <!-- 
        1. 标题标签 h1, h2, h3, h4, h5, h6 
            h1  一级标题
            h2  二级标题
                ...
            默认样式: h1-h6, 字体大小逐步减小, 字体会加粗, 会变黑
            从语义上看: h1-h6, 语义是逐步降低的, 也是可以帮助浏览器检索内容, 提高网络排名

            常用的标题标签: h1, h3
                h1的语义是最重的, 所以一个页面一般只有一个
            标题标签会独占一行, 是块元素
      -->
    <h1>气忧主谓若，全招锐。</h1>
    <h2>气忧主谓若，全招锐。</h2>
    <h3>气忧主谓若，全招锐。</h3>

    <!-- 
        2. 段落标签p
            默认样式: 段落与段落之间有较大空隙, 块元素
     -->
    <p>
      我则找后极之后胜秦变有应年的听定迷，国战县家向畴重仁自落极姑生尤绪喜失，而选五次是临，要即成卞老到将乐谋快金，卅司韩馆落制太重第自人之流着，会太与没如不，答中了，易有就有行斯极赐小了不此答杨土水土老。
    </p>
    <p>
      小里学兼巴他其花也游长服娘谢云，介与张爻到彷苟死世自文归若金皇孔，光小守不后败出放娘沫有，人便新感。
    </p>

    <!-- 3. 标题分组 让标题之间有关系, 没有默认样式-->
    <hgroup>
      <h1>古诗一首</h1>
      <h3>杜甫</h3>
    </hgroup>

    <!-- 
        4. strong 强调标签
            默认样式: 字体加粗加黑
     -->
    <p>你长得真<strong>好看</strong></p>

    <!-- 
        5. em 强调标签
            默认样式, 字体斜体
     -->
    <!-- 
        em 和 strong 的区别
            语义上的区别: strong强调的是内容, em强调的是语音语调
        在实际使用当中, em 和 strong 不做区别
     -->
    <p>你长得<em>真帅</em></p>

    <!-- 
        6. br 强制换行
     -->
    <hr />
    <p>
      让韩外评曾德与是一仅治，<br />
      诗价失，<br />
      是惜揽。
    </p>

    <!-- 7. hr 分割线 -->

    <!-- 8. 删除线 -->
    原价: <del>1999</del>
    现价: 2999

    <!-- 9. center 居中-->
    <center>
      <h1>谷才由范。</h1>
    </center>

    <!-- 10. div 一个没有任何语义的标签, 块元素 -->
    <div>生惊认，没事登，兼。</div>

    <!-- 11. span 一个没有任何语义的标签, 一般用来包裹文字, 行内元素 -->
    <div>
      <span> 下何后无日变回的了。 </span>
    </div>

    <!-- 12. 引用标签 -->
    子曰: <q>学而时习之</q>
  </body>
</html>

注意：center标签已经在 HTML 4（以及 XHTML 1）中废除了，以支持 CSS text-align 属性，它可以用于 <div> 元素，或者独立的 <p>。对于居中的块，使用其它 CSS 属性，例如 margin-left 和 margin-right，并将其设置为 auto (或者将 margin 设为 0 auto)。

5. 实体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        实体: 
          什么是实体
              在编写网页的时候, 有一些字符是我们没有办法打出来的, 例如空格, 大于号, 小于号等
          这些字符已经提前被编译器或者浏览器征用, 我们不能正常使用, 我们要用一些额外的字符来
          代替, 这些额外的字符就叫实体

          实体的语法
              &实体名;
          常用的实体
              空格: &nbsp;
              大于号: &gt;
              小于号: &lt;
              版权符号: &copy;
     -->
     今天见到同学们&nbsp;&nbsp;&nbsp;&nbsp;很开心
     5&gt;4&lt;10
     金钱&copy;
  </body>
</html>

JamesMoriartyZ

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML基础篇(1)

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
复制链接

扫一扫