HTML&CSS笔记 [全文字数4w] - Go语言中文社区

HTML&CSS笔记 [全文字数4w]

HTML&CSS笔记

文章目录

第一章 概述

HTML + CSS + JavaScript = 网页

HTML：Hyper Text Markup Language 超文本标记语言

CSS：Cascading Style Sheets 层叠样式表

HTML & CSS 中文参考文档：https://developer.mozilla.org/zh-CN/

主流浏览器/内核：

IE：Trident

Firfox：Gecko

Chrome：Webkit / Blink

Safari：webkit

Opera：presto / Blink

第二章 HTML核心

2.1 HTML注释

语法：

<!-- 
注释，这里的内容会被忽略 
-->

快捷键：Ctrl + /

2.2 元素

<a href="www.baidu.com">任意内容</a>

元素(element) = 起始标计(begin tag) + 属性 + 元素内容 + 结束标记(end tag)

属性 = 属性名 + 属性值

​ 属性分类：

​ 局部属性：某些元素特有的属性

​ 全局属性：所有元素通用

<img src="xxx.jpg">

空元素：没有元素内容和结束标记

2.3 标准文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world!!!!!</h1>
</body>
</html>

<!DOCTYPE html>

文档声明，告诉浏览器这是一个基于HTML5标准的HTML文件

<html lang="en">
    
</html>

根元素：一个页面最多有一个，是所有其他元素的父元素或祖先元素

HTML5版本中没有强制要求写

lang属性：表示语言，全局属性，表示该元素内部使用的文字

<hand>

</hand>

文档头：不会在页面显示

<meta>

元数据：设置页面的参数

<body>

</body>

文档体：页面的内容都写在这

2.4 语义化

  • 选择什么元素，取决于它的作用和含义，而不是元素的显示效果，该元素的样式完全由CSS决定

  • 每个元素的默认显示效果是由浏览器决定的，和元素本身无关

为什么要语义化？

  1. 为了搜索引擎优化（SEO）
  2. 为了让浏览器理解网页
  3. 使元素本身的含义和元素样式完全分离

2.5 文本元素

在这里插入图片描述

中文版网址：http://www.html5star.com/manual/html5label-meaning/

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

h元素：对应h1-h6级标题

（VSCode小技巧：Ctrl + Enter 快捷换行；Ctrl + Shift + Enter 快捷向上换行）

（批量生成代码Emmet语法：h$*6>{$级标题} + Tab键）

<p></p>

p元素：段落

（小技巧：生成随机文字内容 > lorem[单词数] + Tab键 示例：p*6>lorem500 随机生成500个单词）

<span></span>

span元素：无语义元素，仅用于辅助设置样式

（HTML5以前，存在块级元素（单独占用一行）、行内元素（不独占一行）的说法。HTML5之后弃用，强调语义化，展示的效果不再和元素有关，单独由CSS决定）

<pre></pre>

pre元素：预格式化文本元素

在pre元素中的内容，会按照源代码格式输出，空格不会被折叠。

（展示效果本质上是CSS的作用，与pre这个元素本身无关，pre在语义化的角度是一个无语义元素）

2.6 HTML实体

方式一&加字母：&lt;
例：&lt;p&gt; --> <p>
方式二&#加数字：&#111;

  • 小于符号

    &lt;

  • 大于符号

    &gt;

  • 空格符号

    &nbsp;

  • 版权符号

    &copy;

  • &符号

    &amp;

2.7 a元素

超链接元素

  • href属性：引用，表示跳转的地址
    1. 普通链接
    2. 锚链接
    3. 功能链接（执行JS代码、发送邮件、拨号）
  • target属性
    1. 默认值 _self ：在当前页面打开
    2. _blank ：在新窗口打开

锚点示例：

<!-- 代码生成语法：(a[href="#cha$"]>{章节$})*6 -->
<a href="#cha1">章节1</a>
<a href="#cha2">章节2</a>
<a href="#cha3">章节3</a>
<a href="#cha4">章节4</a>
<a href="#cha5">章节5</a>
<a href="#cha6">章节6</a>

<!-- 代码生成语法：((h2[id="cha$"]>{章节$})+p>lorem500)*6 -->
<h2 id="cha1">章节1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. ... ... Veniam aliquam atque vitae blanditiis ipsa saepe fuga, temporibus fugiat optio dolorum quam assumenda tempore explicabo aperiam laboriosam voluptas repellat!</p>
<h2 id="cha2">章节2</h2>
<p>Dicta qui, maxime, quas et adipisci cum veniam dolorum odio nemo, asperiores necessitatibus mollitia?。。。 。。。 Impedit in nam cupiditate nobis officia velit fuga tempore sequi, nemo suscipit magnam. Expedita qui earum voluptas rerum totam adipisci.</p>
<h2 id="cha3">章节3</h2>
<p>Perspiciatis amet voluptates repudiandae, hic quae eum rem sapiente corrupti veritatis reprehenderit optio esse quod temporibus.... ... Perspiciatis aspernatur architecto adipisci aperiam dolores illum veniam atque quaerat tempora saepe aut et officiis dolore alias maxime laboriosam commodi delectus deserunt neque, nobis ex ipsam impedit autem! Quaerat unde nemo libero suscipit!</p>
<h2 id="cha4">章节4</h2>
<p>Rerum, laborum? Maiores amet ex adipisci, ducimus dolorum neque reprehenderit similique natus veniam, praesentium, blanditiis perspiciatis soluta!。。。 。。。 Nobis blanditiis molestiae corporis enim officia, inventore debitis, ipsa a delectus vitae cupiditate earum asperiores est hic beatae!</p>
<h2 id="cha5">章节5</h2>
<p>Esse, asperiores nesciunt quidem fuga aspernatur doloremque error sed consequatur natus sequi necessitatibus eum quos? ... ... Doloremque ex accusantium explicabo dolorem? Vel velit tempora commodi aspernatur exercitationem? Possimus maiores numquam ea dicta. Est doloremque ratione quibusdam?</p>
<h2 id="cha6">章节6</h2>
<p>Eveniet voluptates odio minima sequi recusandae? Exercitationem natus explicabo fugiat blanditiis. Eaque, sint voluptates!。。。 。。。 Id cupiditate consequatur temporibus est facere.</p>

<a href="#">回到顶部</a>

2.8 路径的写法

绝对路径写法：
schema://host:port/path
协议名://主机名:端口号/路径

相对路径写法：
./路径

2.9 图片元素

  • img元素

    1. src属性：source，资源路径
    2. alt属性：当图片失效时，用该属性的文字替代
    3. usemap属性：和map元素联合使用（例：#myMap）

    img元素通常和a元素联合使用

  • map元素

    和img联合使用，实现点击图片不同区域跳转不同链接

    属性：name（例：myMap）

    • 子元素：area元素
      1. shape属性（形状，值例：circle(圆形)、rect(矩形)、poly(多边形)）
      2. coords属性（坐标，值例：200,300,25(x,y,半径)、233,323,545,563(左上xy坐标,右下xy坐标)、依次描述每个点坐标）
      3. href属性
    • figure元素

    指代、定义，通常用于把图片、图片标题、图片描述包裹起来，更加贴合语义化原则

    • 子元素：figcaption元素，表明这是一个标题

2.10 多媒体元素

  • video元素（视频）
    1. src属性
    2. controls属性(布尔属性)：显示播放控件（布尔属性可以不写值）
    3. autoplay属性(布尔属性)：自动播放
    4. muted属性(布尔属性)：静音播放
    5. loop属性(布尔属性)：循环播放
  • audio元素（音频）属性用法和video一致

2.11 列表元素

  • 有序列表

    • ol：ordered list（列表的父元素）

    • li：list item（列表的子元素）

      <p>把大象装进冰箱总共分几步？</p>
<!-- ol的type属性参数：1(数字排序)，i(罗马数字排序)，a/A(字母顺序排序) -->
<!-- 根据语义化原则，非必要不用type属性，展示效果应完全由CSS决定 -->
<!-- reversed属性(布尔)，列表倒序排序 -->
<ol>
    <li>打开冰箱门</li>
    <li>大象进去</li>
    <li>关上冰箱门</li>
</ol>

  • 无序列表

    • ul：unordered list（列表的父元素）

    • li：list item（列表的子元素）

      用法与有序列表一致，常用作菜单、新闻列表

  • 定义列表

    • dl：definition list（父元素）

    • dt：definition title（标题）

    • dd：definition description（描述）

      常用于一些术语的定义

      <p>国家大全</p>
<dl>
    <dt>中国</dt>
    <dd>中国xxxxx</dd>
    
    <dt>美国</dt>
    <dd>美国yyyyy</dd>
</dl>

2.12 容器元素

容器元素：表示一个块区域，用于分割页面便于排版布局

  • div元素：无语义容器元素
  • header元素：通常用于表示页头
  • footer元素：通常用于表示页脚
  • article元素：通常用于表示文章
  • section元素：通常用于表示文章的章节
  • aside元素：通常用于表示侧边栏
  • nav元素：表示导航

2.13 元素包含关系

  1. 容器元素中可以包含任何元素
  2. a元素几乎可以包含任何元素
  3. 某些元素只能包含固定的子元素
  4. 标题元素和段落元素不能互相嵌套，并且不能包含容器元素

2.14 HTML核心实战练习

练习-百度新闻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度新闻-海量中文咨询平台</title>
</head>
<body>
    <!-- 网页头部 -->
    <header>
        <!-- 顶部区域 -->
        <div>
            <ul>
                <li><a href="https://news.baidu.com/">网页</a></li>
                <li><a href="https://news.baidu.com/">新闻</a></li>
                <li><a href="https://news.baidu.com/">贴吧</a></li>
                <li><a href="https://news.baidu.com/">知道</a></li>
                <li><a href="https://news.baidu.com/">音乐</a></li>
                <li><a href="https://news.baidu.com/">图片</a></li>
                <li><a href="https://news.baidu.com/">视频</a></li>
                <li><a href="https://news.baidu.com/">地图</a></li>
                <li><a href="https://news.baidu.com/">文库</a></li>
            </ul>
            <ul>
                <li><a href="https://news.baidu.com/">百度首页</a></li>
                <li>
                    <a href="https://news.baidu.com/">用户名</a>
                    <ul>
                        <li><a href="https://news.baidu.com/">我的主页</a></li>
                        <li><a href="https://news.baidu.com/">账号设置</a></li>
                        <li><a href="https://news.baidu.com/">退出</a></li>
                    </ul>
                </li>
                <li>
                    <a href="https://news.baidu.com/">
                        <span>百度新闻客户端</span>
                        <img src="./img/sncode.png" alt="客户端二维码">
                    </a>
                </li>
            </ul>
        </div>

        <!-- 搜索区域 -->
        <div>
            <div>
                <a href="https://news.baidu.com/">
                    <img src="./img/logo.png" alt="百度新闻">
                </a>
            </div>
            <div>
                <input type="text">
                <button>百度一下</button>
            </div>
            <div>
                <a href="https://news.baidu.com/">帮助</a>
            </div>
        </div>

        <!-- 导航区域 -->
        <div>
            <nav>
                <a href="">首页</a>
                <a href="">国内</a>
                <a href="">军事</a>
                <a href="">财经</a>
                <a href="">娱乐</a>
            </nav>
        </div>
    </header>

    <!-- 网页中部 -->
    <div>
        <!-- 热点要闻 -->
        <div>
            <!-- 左边区域 -->
            <div>
                <!-- 标题 -->
                <h2>热点<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度新闻-海量中文咨询平台</title>
</head>
<body>
    <!-- 网页头部 -->
    <header>
        <!-- 顶部区域 -->
        <div>
            <ul>
                <li><a href="https://news.baidu.com/">网页</a></li>
                <li><a href="https://news.baidu.com/">新闻</a></li>
                <li><a href="https://news.baidu.com/">贴吧</a></li>
                <li><a href="https://news.baidu.com/">知道</a></li>
                
                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/weixin_46820463/article/details/113916417

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！