[前端学习] HTML + CSS 学习笔记（一）

Paxlsean

已于 2023-06-17 11:25:32 修改

阅读量82

点赞数

文章标签： html css 学习前端

于 2023-06-17 10:17:02 首次发布

本文链接：https://blog.csdn.net/weixin_49160784/article/details/131257431

版权

HTML + CSS 学习笔记（一）

计算机：硬件、软件
- 硬件：
1. 输出设备
2. 输入设备
3. 存储器：内存、硬盘
硬盘：持久化存储、容量大（能安装多少个游戏，取决于硬盘的大小）
内存：暂时性存储、速度读写快（能同时玩几个游戏，取决于内存的大小）
1. CPU：中央处理器（运算器+控制器）
- 软件：
1. 系统软件：windows、Linux、Mac、Harmony
2. 应用软件：QQ、微信、腾讯视频……

系统架构

C/S架构（Client/Server）：APP

需要安装、偶尔更新、不跨平台

B/S架构（Browser/Server）：web网页

无需安装、无需更新、可跨平台
浏览器
浏览器内核是浏览器的核心，用于处理浏览器所得到的各种资源
1. Chrome：早期webkit内核，现在Blink内核
2. Safari：webkit内核
3. IE(2022年停止维护)：Trident内核
  (Edge：Chromium内核)
4. Firefox：Gecko内核
5. Opera：Blink内核
网页组成

结构（HTML）+ 表现（CSS）+ 行为（JS）

HTML（超文本标记语言，HyperText Markup Language）
- 注释
使用包括起来，可单行注释也可多行注释
- 文档声明
在第一行添加代码<!DOCTYPE html>，表明当前网页是HTML5（不算HTML的标签，是一种特殊标记）
- 字符编码
  - 字符集（常见的几种）：
  1. ASCII：大写字母、小写字母、数字、一些符号，共计128个
  2. ISO 8859-1：在ASCII的基础上，扩充了一些希腊字符等，共计256个
  3. GB2312：继续扩充，收录了6763的常用汉字，682个字符
  4. GBK：收录汉字和符号达到20000+，支持繁体中文
  5. UTF-8（最常用）：万国码，包含世界上所有语言的文字与符号
  - 使用原则
  1. 存储时，务必使用合适的字符编码，否则数据会丢失
  2. 存储时与读取时采用的字符编码需一致，否则会乱码
  - 浏览器解码
  在<head></head>标签中加入代码<meta charset="utf-8"，表示告诉浏览器用utf-8解码
- 设置语言
在<html>中设置lang属性，例如<html lang="zh-CN">
常用属性值zh-CN —— 简体中文，en-US —— 英语-美国
- HTML结构
  - 基本结构
```
<html>
<head>
    <title>标题</title>
</head>
<body>
    网页内容
</body>
</html>
```
  - 标准结构
```
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        网页内容
    </body>
</html>
```
- HTML排版标签
  - 标题标签
  <h1></h1>~<h6></h6>：表示1 ~ 6级标题，h1是最重要的，最好只有1个。不能互相嵌套
  - 段落标签
  <p></p>：中间不能嵌套<h1>~<h6>、<p>、<div>使用
  - div 标签
  <div></div>：把标签里的内容分为独立的区块，单独占一行，容器级标签
  - 换行标签
  <br>：单标签，没有结束标签，单独一个<br>强制换行
  - 水平线标签
  <hr>：单标签，没有结束标签
- 语义化标签
  用特定的标签表达特定的含义
  - 语义化的好处
  1. 代码可读性强
  2. 有利于SEO（搜索引擎优化）
  3. 方便设备解析
- 块级元素与行内元素
  - 块级元素
  自动换行，独占一行，可设置宽高，默认宽度为父元素宽度，例如div、h1~h6、p、ul、ol、dl、li、dd、table、hr、header、section、aside、footer等
  - 行内元素
  无法自动换行，一行可放多个，不可设置宽高，默认宽度是本身内容宽度，行内元素的padding可以设置，margin只能设置水平方向的边距，例如span、img、a、lable、input、textarea、button、select等
  - 使用规则
  1. 块级元素中能写：块级元素、行内元素（几乎什么都能写）
  2. 行内元素中能写：行内元素，不能写块级元素
  3. h1 ~ h6不能互相嵌套
  4. p 标签中不能写块级元素
- 常用的文本标签
  用于包裹词汇和短语等，通常写在排版标签内
  1. em：要着重阅读的内容，斜体( i 标签也是斜体，但 em 具有强调和突出的语气，现在 i 标签多用于呈现字体图标)
  2. strong：十分重要的内容，加粗显示( b 标签也是加粗，但 strong 具有强调和突出的语气)
  3. span：无语义，用于包裹短语的通用容器
- 图片标签
  <img>：单标签，属性有src（路径）、alt（图片描述）、width（宽）、height（高）。
  
  设置图片大小时，只设置图片的宽/高，图片默认会以等比例缩放，同时设置宽和高时会压缩/拉伸图片，造成图片比例失调。
  
  例：
```
<img src="xxx.jpg" alt="xx图片" width="100px" >
```
- 相对路径和绝对路径
  - 相对路径
  ./xx.jpg 或 xx.jpg：同级的文件位置
  ./a/xx.jpg：同级的目录里面的文件位置
  ../xx.jpg：上一级目录下的文件位置
  - 绝对路径
  1. 本地绝对路径，从盘符出发,例C:/demo/image/xx.jpg
  2. 网络绝对路径，网络图片链接地址，例http://tupian.com/1.png
- 常见图片格式
  1. jpg 格式：是一种有损的压缩格式。支持颜色丰富、占用空间小、不支持透明背景、不支持动态图
  2. png 格式：是一种无损的压缩格式。支持颜色丰富、占用空间略大、支持透明背景、不支持动态图
  3. bmp 格式：不进行压缩的一种格式。支持颜色丰富、占用空间极大、不支持透明背景、不支持动态图
  4. gif 格式：仅支持256种颜色、支持简单透明背景、支持动态图
  5. webp 格式：谷歌推出的一种格式，专门用来在网页中呈现图片，具备上述几种格式的优点，但兼容性不太好
  6. base64 格式：把图片进行base64编码，形成一串特殊的文本，要通过浏览器打开
- 超链接
  <a></a>标签，从当前页面进行跳转
  - 基本属性
  <a href="https://xx.com/" target="_black"></a>
  href 属性：要跳转的位置
  target 属性：_black：在新标签页打开链接；_self：在原标签页打开链接
  <a>是行内元素，但是可以包裹除自身外的任何元素
  - 跳转到文件
  1. 浏览器直接打开文件
  2. 浏览器不能打开的文件，自动跳转到下载
  3. 强制触发下载，使用download属性，属性值即为下载文件名称，可不写值
  - 跳转锚点
```
<a href="#maodian">跳到锚点位置</a>


<a name="maodian"></a>

<p id="maodian"></p>

<a href="#">回到顶部</a>
<a href="">刷新页面</a>

<a href="javascript:alert(666)">点击弹窗显示666</a>
```
  - 唤起指定应用
```

<a href="tel:10010">电话联系</a>

<a herf="mailto:123456@qq.com">发送邮件</a>

<a herf="sms:10086">发送短信</a>
```
- 列表
  - 有序列表（Ordered list）
```
<ol>
  <li>第一点<li>
  <li>第二点<li>
  <li>第三点<li>
</ol>
```
  - 无序列表（Unordered list）
```
<ul>
  <li>广州</li>
  <li>深圳</li>
  <li>上海</li>
</ul>
```
  - 自定义列表（Defined list）
```
<dl>
  <dt>标题一</dt>
  <dd>描述一</dd>
  <dt>标题二</dt>
  <dd>描述二</dd>
  <dt>标题三</dt>
  <dd>描述三</dd>
</dl>
```
  - 注意事项
  1. 使用其他元素用li包裹：
```
<li><a href="http://xx.com"></a></li>`
```
  1. 不要单独使用li，最好写在<ol>或<ul>中
  2. 可以嵌套使用：
```
<ul>
  <li>
    <span>上海</span>
    <ul>
        <li>外滩</li>
        <li>
            <a href="http://xxx.com/">xxx</a>
        </li>
        <li>迪士尼乐园</li>
    </ul>
  </li>
</ul>
```

Paxlsean

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[前端学习] HTML + CSS 学习笔记（一）

无法自动换行，一行可放多个，不可设置宽高，默认宽度是本身内容宽度，行内元素的padding可以设置，margin只能设置水平方向的边距，例如。设置图片大小时，只设置图片的宽/高，图片默认会以等比例缩放，同时设置宽和高时会压缩/拉伸图片，造成图片比例失调。：单标签，属性有src（路径）、alt（图片描述）、width（宽）、height（高）。，表明当前网页是HTML5（不算HTML的标签，是一种特殊标记）自动换行，独占一行，可设置宽高，默认宽度为父元素宽度，例如。：单标签，没有结束标签，单独一个。
复制链接

扫一扫