《HTML w3school》学习笔记

西西同学不简单

已于 2024-01-30 14:35:18 修改

阅读量1k

点赞数 17

分类专栏：学习笔记文章标签： html 学习笔记

于 2024-01-30 14:11:56 首次发布

本文链接：https://blog.csdn.net/G847674218/article/details/135931416

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在线学习地址：HTML Tutorial (w3schools.com)

HTML标签名推荐使用小写（虽然大小写不敏感），XHTML标签名严格使用小写。
属性的值最好包含在引号内，双引号优于单引号。
图片路径如果没有/是相对于当前页面，如果有/是相对于域名。
<h1>等标题标签应用来标识标题元素及其重要性（h1最重要h6最不重要），而不应用来对于字体加大加粗。
H5标签仅展示内容（样式默认固定），并会清除多余的空白字符。
Style属性的值是原生值：<body style="background-color:powderblue;">
文本格式元素：<b><strong> <i><em> <samll> <mark> <sub><sup> <del><ins>
1. <b>和<strong>都用加粗表示，但<b>没有任何重要性，<strong>表示重要的。
2. <i>和<em>都用斜体表示，但<i>标识学术名词等，<em>表示重音强调。
引用元素：<blockquote> <q> <abbr> <address> <cite> <bdo>
1. <blockquote>表示长引用，整体会缩进。
2. <q>表示短引用，会加双引号。
3. <abbr>表示缩略词。
4. <address>表示联络信息，前后会换行。
5. <cite>表示作品标题。
6. <bdo>用于覆盖当前文本的方向。支持的浏览器会将以下内容反转。<bdo dir="rtl">This line will be written from right to left</bdo>
单行、多行和行内的注释均使用 <!— 开始 --> 结束。
颜色属性
1. RGB：Red、Green、Blue
2. HEX：十六进制表示
3. HSL：色调、饱和度、亮度
  1. 色调：0是红色，120是绿色，240是蓝色
  2. 饱和度：0%是暗灰色，100%是全色
  3. 亮度：0%是黑色，100%是白色
HTML元素样式：
1. style：用来定义行内样式，作用于单个元素；
2. <style>：用来定义内部样式，作用于单个页面；
3. <link>：用来链接外部样式，作用于多个页面。
修改超链接样式：
1. a:link 未访问过
2. a:visited 访问过
3. a:hover 鼠标悬浮
4. a:active 激活状态（鼠标按下去的时候）
可以使用超链接创建页签 <a href="#C4">Jump to Chapter 4</a>
<img>标签
1. 从技术上讲，图像并没有插入到网页中：图片链接到网页。<img>标签为引用的图像创建一个保留空间。
2. 建议使用style定义宽高（style会覆盖width和height）
3. 可使用<picture><source><img>的组合创建适配各种尺寸和格式的图片
4. 可使用<img usemap><map><area>的组合创建可点击区域的图片（最后1）
图片尺寸总结
1. 如果图片尺寸小于元素尺寸，图片会重复铺满整个元素。
2. 使用background-repeat: no-repeat;属性禁止图片重复。
3. 使用background-attachment: fixed;background-size: cover;可使图片覆盖元素且不被拉伸，多余部分会被裁除。
4. 使用background-attachment: fixed;background-size: 100% 100%;可使图片覆盖元素且被拉伸。
用<link>设浏览器Tab图标：link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<table>元素
1. 可以使用border-collapse: collapse;使表格的双层边框坍缩成单层边框。
2. th默认加粗居中，可以通过text-align: left;修改字体位置。
3. 使用<th colspan="2">Name</th>将横向单元格合并为一个。
4. 使用<th rowspan="2">Name</th>将纵向单元格合并为一个。
5. 使用<caption>标签为表格添加说明，<caption>需要紧跟<table>标签。
6. 使用padding属性定义文字和边框之间的距离，使用border-spacing属性定义单元格之间的距离。
7. 构造表格的斑马格样式（最后2）
8. 构造表格的列样式（最后3），且<colgroup>只能使用以下属性：width、visibility、background、border。
<List>
1. 使用list-style-type属性定义无序列表的标识。
2. 使用type属性定义有序列表的标识。使用start属性定义有序列表从哪里开始。
3. 使用<dl><dt><dd>构造描述列表。
使用margin属性可使<div>居中（最后4）
使<div>元素同行排列的几种方法：
1. float:left;
2. display: inline-block;
3. display: flex;
4. display: grid; grid-template-columns: 33% 33% 33%;
网页自适应设计
1. 使用<meta name="viewport" content="width=device-width, initial-scale=1.0">自适应视窗宽高和缩放。
2. 可使用<picture><source><img>的组合创建适配各种尺寸和格式的图片。
最佳实践
1. 声明文档类型<!DOCTYPE html>
2. 元素标签和属性使用小写
3. 将属性值使用双引号括起来
4. 总是为图片指定alt、width和height属性
5. 等号两边不要使用空格
6. 避免使用长代码行
7. 合理使用空行和缩进
8. <title>元素非常重要
9. 在<html lang="en-us">元素种使用语言标记
10. 正确使用字符标记<meta charset="UTF-8">
11. 使用<meta name="viewport" content="width=device-width, initial-scale=1.0">元素保持自适应
12. 使用<link rel="stylesheet" href="styles.css">引入CSS文件
13. 使用<script src="myscript.js">引入script文件

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <!-- 正方形坐标：左上右下，先X轴再Y轴 -->
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <!-- 圆形坐标：中心点坐标+半径 -->
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

  <colgroup>
    <col span="3">
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>

div {
  width:300px;
  margin:auto;
}

西西同学不简单

关注

17
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
《HTML w3school》学习笔记

在线学习地址：HTML Tutorial (w3schools.com)
复制链接

扫一扫

专栏目录

《HTML w3school》学习笔记

“相关推荐”对你有帮助么？