HTML笔记2-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61430041/article/details/122860726

⭐️大一小何，还在学习当中，欢迎交流指正~

测试编辑器

1.安装vscode
2.安装中文语言包
3.尝试安装ayu主题
4.将一个目录作为项目目录
5.创建一个新网页
6.安装 live Server
7.尝试通过live Server来运行网页
8.设置代码自动存储

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
</head>
<body>
  <!--
      1.安装vscode
      2.安装中文语言包
      3.尝试安装ayu主题
      4.将一个目录作为项目目录
      5.创建一个新网页
      6.安装 live Server
      7.尝试通过live Server来运行网页
      8.设置代码自动存储

  -->
  <h1></h1>

</body>
</html>

实体

在网页中编写多个空格默认情况会自动被浏览器解析为一个空格

在HTML中有些时候，我们不能直接书写一些特殊符号
比如：多个连续的空格，比如字母两侧的大于和小于

如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：
&实体的名字
 空格
>大于号
<小于号
©版权符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>实体</title>
</head>
<body>
    <!--
        在网页中编写多个空格默认情况会自动被浏览器解析为一个空格

        在HTML中有些时候，我们不能直接书写一些特殊符号
        比如：多个连续的空格，比如 字母两侧的·大于和小于

        如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
        实体的语法：
            &实体的名字
                &nbsp;空格
                &gt;大于号
                &lt;小于号
                &copy;版权符号
    -->
    <p>
        今天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天气真不错！
    </p>
    <p>
        a&lt;b&gt;c
    </p>
</body>
</html>

网页呈现

meta标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <!--
       meta标签主要用于设置网页中的一些元数据，元数据不是给用户看，(写在head里)
            charset 指定网页的字符集
             name   指定数据的名称
            content 指定数据的内容

            keywords表示网站的关键字,可以同时指定多个关键字，关键字间使用,隔开
            <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
            <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">

            description用于指定网站的描述
            <meta name="description" content="亚马逊中国（z.cn）坚持“以客户为中心”的理念，秉承“天天低价，正品行货”信念，销售图书、电脑、数码家电、母婴百货、服饰箱包等上千万种产品。亚马逊中国提供专业服务：正品行货天天低价，机打发票全国联保。货到付款，30天内可退换货。亚马逊为中国消费者提供便利、快捷的网购体验。">
            网站的描述会显示在搜索引擎的搜索结果中

            title标签的内容会作为搜索结果的超链接上的文字显示
   -->
   <meta name="keywords",content = "HTML5,前端,css3">
   <meta name=" description" content="nice">
   <!--
       <meta http-equiv="refresh" content="3;url=http://www.baidu.com">
       将页面重定向到另一个网站
   -->
   <meta http-equiv="refresh" content="3;url=http://www.baidu.com">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

三秒后网页自动进入百度页面

我们看京东的页面源码

name 指定数据的名称
content 指定数据的内容

keywords表示网站的关键字,可以同时指定多个关键字，关键字间使用,隔开

语义化标签

在网页中html专门负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是他的样式

标题标签
h1~h6一共有六级标签
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签一般情况下页面中只会有一个h1
一般情况下标题标签只会使用h1~h3，h4~h6很少用

标题标签都是块元素

在页面中独占一行的元素称为块元素（block element）

hgroup标签来为标签分组，可以将一组相关的标题同时放入到hgroup

p标签表示页面中的一个段落

p也是一个快元素

em标签用于表示语音音调的一个加重

在页面中不会独占一行的元素称为行内元素（inline element）

strong表示强调，重要内容

q表示一个短引用 br标签表示页面中的换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
</head>
<body>
    <!--
        在网页中html专门负责网页的结构
        所以在使用html标签时，应该关注的是标签的语义，而不是他的样式

        标题标签
        h1~h6一共有六级标签
        从h1~h6重要性递减，h1最重要，h6最不重要
        h1在网页中的重要性仅次于title标签  一般情况下页面中只会有一个h1
        一般情况下标题标签只会使用h1~h3，h4~h6很少用

        标题标签都是块元素

        在页面中独占一行的元素称为块元素（block element）
    -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!--
        hgroup标签来为标签分组，可以将一组相关的标题同时放入到hgroup
    -->
    <hgroup>

        <h1>11111</h1>
        <h2>22222</h2>
    </hgroup>
    <!--
        p标签表示页面中的一个段落

        p也是一个快元素
    -->
            <p>在p标签中的内容就表示一个段落</p>

            <!--
                em标签用于表示语音音调的一个加重

                在页面中不会独占一行的元素称为行内元素（inline element）
            -->
            <p>今天心情<em>真</em>不错</p>
            <!--
                strong表示强调，重要内容
            -->
            <p>你可<strong>真棒</strong></p>

            鲁迅说:
            <!--
                blockquote表示一个长引用
            -->
            <blockquote>
                这句话我是从来没有说过的
            </blockquote>

            <!--
                q表示一个短引用
            -->
            
            子曰:<q> 吾日三省吾身</q>
            <!--
                br标签表示页面中的换行
            -->
            <br>
            <br>
            哈哈哈哈哈哈哈哈哈
</body>
</html>

网页呈现效果