HTML + CSS 学习笔记(一)
- 计算机:硬件、软件
- 硬件:
- 输出设备
- 输入设备
- 存储器:内存、硬盘
硬盘:持久化存储、容量大(能安装多少个游戏,取决于硬盘的大小)
内存:暂时性存储、速度读写快(能同时玩几个游戏,取决于内存的大小)- CPU:中央处理器(运算器+控制器)
- 软件:
- 系统软件:windows、Linux、Mac、Harmony
- 应用软件:QQ、微信、腾讯视频……
-
系统架构
C/S架构(Client/Server):APP
需要安装、偶尔更新、不跨平台
B/S架构(Browser/Server):web网页
无需安装、无需更新、可跨平台
-
浏览器
浏览器内核是浏览器的核心,用于处理浏览器所得到的各种资源
- Chrome:早期webkit内核,现在Blink内核
- Safari:webkit内核
- IE(2022年停止维护):Trident内核
(Edge:Chromium内核) - Firefox:Gecko内核
- Opera:Blink内核
-
网页组成
结构(HTML)+ 表现(CSS)+ 行为(JS)
- HTML(超文本标记语言,HyperText Markup Language)
- 注释
使用
<!--
和-->
包括起来,可单行注释也可多行注释- 文档声明
在第一行添加代码
<!DOCTYPE html>
,表明当前网页是HTML5(不算HTML的标签,是一种特殊标记)- 字符编码
- 字符集(常见的几种):
- ASCII:大写字母、小写字母、数字、一些符 号,共计128个
- ISO 8859-1:在ASCII的基础上,扩充了一些希腊字符等,共计256个
- GB2312:继续扩充,收录了6763的常用汉字,682个字符
- GBK:收录汉字和符号达到20000+,支持繁体中文
- UTF-8(最常用):万国码,包含世界上所有语言的文字与符号
- 使用原则
- 存储时,务必使用合适的字符编码,否则数据会丢失
- 存储时与读取时采用的字符编码需一致,否则会乱码
- 浏览器解码
在
<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>
:单标签,没有结束标签 -
语义化标签
用特定的标签表达特定的含义- 语义化的好处
- 代码可读性强
- 有利于SEO(搜索引擎优化)
- 方便设备解析
-
块级元素与行内元素
- 块级元素
自动换行,独占一行,可设置宽高,默认宽度为父元素宽度,例如
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
等- 使用规则
- 块级元素中能写:块级元素、行内元素(几乎什么都能写)
- 行内元素中能写:行内元素,不能写块级元素
- h1 ~ h6不能互相嵌套
- p 标签中不能写块级元素
-
常用的文本标签
用于包裹词汇和短语等,通常写在排版标签内- em:要着重阅读的内容,斜体( i 标签也是斜体,但 em 具有强调和突出的语气,现在 i 标签多用于呈现字体图标)
- strong:十分重要的内容,加粗显示( b 标签也是加粗,但 strong 具有强调和突出的语气)
- span:无语义,用于包裹短语的通用容器
-
图片标签
<img>
:单标签,属性有src(路径)、alt(图片描述)、width(宽)、height(高)。设置图片大小时,只设置图片的宽/高,图片默认会以等比例缩放,同时设置宽和高时会压缩/拉伸图片,造成图片比例失调。
例:
<img src="xxx.jpg" alt="xx图片" width="100px" >
-
相对路径和绝对路径
- 相对路径
./xx.jpg 或 xx.jpg
:同级的文件位置
./a/xx.jpg
:同级的目录里面的文件位置
../xx.jpg
:上一级目录下的文件位置- 绝对路径
- 本地绝对路径,从盘符出发,例
C:/demo/image/xx.jpg
- 网络绝对路径,网络图片链接地址,例
http://tupian.com/1.png
-
常见图片格式
- jpg 格式:是一种有损的压缩格式。支持颜色丰富、占用空间小、不支持透明背景、不支持动态图
- png 格式:是一种无损的压缩格式。支持颜色丰富、占用空间略大、支持透明背景、不支持动态图
- bmp 格式: 不进行压缩的一种格式。支持颜色丰富、占用空间极大、不支持透明背景、不支持动态图
- gif 格式:仅支持256种颜色、支持简单透明背景、支持动态图
- webp 格式:谷歌推出的一种格式,专门用来在网页中呈现图片,具备上述几种格式的优点,但兼容性不太好
- base64 格式:把图片进行base64编码,形成一串特殊的文本,要通过浏览器打开
-
超链接
<a></a>标签
,从当前页面进行跳转- 基本属性
<a href="https://xx.com/" target="_black"></a>
href 属性:要跳转的位置
target 属性:_black:在新标签页打开链接;_self:在原标签页打开链接
<a>
是行内元素,但是可以包裹除自身外的任何元素- 跳转到文件
- 浏览器直接打开文件
- 浏览器不能打开的文件,自动跳转到下载
- 强制触发下载,使用
download
属性,属性值即为下载文件名称,可不写值
- 跳转锚点
<a href="#maodian">跳到锚点位置</a> <!-- href="路径#锚点"可跳转到其他页面的锚点位置 --> <!-- 锚点写法一,使用a标签的name属性 --> <a name="maodian"></a> <!-- 锚点写法二,使用id,HTML5推荐使用id作为锚点 --> <p id="maodian"></p> <!-- 特殊用法 --> <a href="#">回到顶部</a> <a href="">刷新页面</a> <!-- 写入js脚本 --> <a href="javascript:alert(666)">点击弹窗显示666</a>
- 唤起指定应用
<!-- tel:电话 --> <a href="tel:10010">电话联系</a> <!-- mailto:邮件 --> <a herf="mailto:123456@qq.com">发送邮件</a> <!-- sms:短信 --> <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>
- 注意事项
- 使用其他元素用
li
包裹:
<li><a href="http://xx.com"></a></li>`
- 不要单独使用
li
,最好写在<ol>
或<ul>
中 - 可以嵌套使用:
<ul> <li> <span>上海</span> <ul> <li>外滩</li> <li> <a href="http://xxx.com/">xxx</a> </li> <li>迪士尼乐园</li> </ul> </li> </ul>