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

最新推荐文章于 2024-07-12 20:49:16 发布

一尾鱼入栈

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量247

点赞数

分类专栏：编程学习笔记文章标签： html html5 css

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

版权

HTML&CSS笔记

文章目录

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决定
每个元素的默认显示效果是由浏览器决定的，和元素本身无关

为什么要语义化？

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

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;

小于符号

<
大于符号

>
空格符号

 
版权符号

©
&符号

&

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 元素包含关系

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

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>
                <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>热点要闻</h2>
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Voluptate, placeat. Sapiente, dolorem.</li>
                    <li>Beatae voluptas enim facere.</li>
                    <li>Ea quasi eos odio.</li>
                    <li>In rerum expedita aspernatur.</li>
                </ul>
            </div>
            <!-- 右边区域 -->
            <div></div>
        </div>
    </div>

    <!-- 网页尾部 -->
    <footer>
        <div>
            <!-- 左 -->
            <div>
                <div>更多精彩内容</div>
                <div>
                    <div>
                        <img src="./img/sncode.png" alt="">
                    </div>
                    <div>
                        <a href="">安卓客户端下载</a>
                        <a href="">苹果客户端下载</a>
                    </div>
                </div>
                <div>扫描二维码, 收看更多新闻</div>
            </div>
            <!-- 右 -->
            <div>
                <div>百度新闻独家出品</div>
                <div>
                    <ul>
                        <li>新闻由机器选取每5分钟自动更新</li>
                        <li>百度新闻搜索源于互联网新闻网站和频道，系统自动分类排序</li>
                        <li>百度不刊登或转载任何完整的新闻内容</li>
                    </ul>
                </div>
            </div>
        </div>
        <div>责任编辑：胡彦BN098 刘石娟BN068 谢建BN085 李芳雨BN091 储信艳BN087 焦碧碧BN084 禤聪BN095 王鑫BN060 崔超BN071 违法和不良信息举报电话：400-921-6911</div>
    </footer>
</body>
</html>要闻</h2>
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Voluptate, placeat. Sapiente, dolorem.</li>
                    <li>Beatae voluptas enim facere.</li>
                    <li>Ea quasi eos odio.</li>
                    <li>In rerum expedita aspernatur.</li>
                </ul>
            </div>
            <!-- 右边区域 -->
            <div>... ...</div>
        </div>
    </div>

最低0.47元/天解锁文章

一尾鱼入栈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS笔记 [全文字数4w]

HTML&CSS笔记文章目录HTML&CSS笔记第一章概述第二章 HTML核心2.1 HTML注释2.2 元素2.3 标准文档结构2.4 语义化2.5 文本元素2.6 HTML实体2.7 a元素2.8 路径的写法2.9 图片元素2.10 多媒体元素2.11 列表元素2.12 容器元素2.13 元素包含关系2.14 HTML核心实战练习第三章 CSS基础3.1 为网页添加样式3.2 常见样式声明3.3 选择器3.4 层叠3.5 继承3.6 属性值计算过程3.7 盒模型3.8 盒模型应用3.
复制链接

扫一扫