HTML

学习记录
106 阅读11分钟

1. 网页介绍

软件分类

系统软件

  • windows linux macOS

应用软件

  • office qq

游戏软件

  • 绝地求生 王者荣耀

客户端和服务器

  • 客户端: 能看见的部分
  • 服务器: 为软件提供服务

服务器语言

  • java(推荐,,工作好找) PHP c# python Node.js(js编写服务器,前端必须学)

客户端形式

  1. 文字客户端: 用命令的形式使用软件,开发人员常用
  2. 图形化界面(C/S): 鼠标属性点击缩放拖动使用
  3. 网页(B/S架构): 访问网页来使用软件
网页优点
  1. 不用安装
  2. 不需更新
  3. 跨平台[最重要,开发成本降低,app需要在不同平台各自开发一个app,ios 安卓 pc 鸿蒙系统...]
网页语言
  • HTML CSS JavsScript

网页和浏览器

浏览器作用

  • 渲染网页呈现出来

网页结构

  • 结构 html
  • 表现 css
  • 行为 javascript

2. 注释

  1. 多行注释 <!-- 注释中的内容 -->
    1. 不能嵌套注释
  2. 单行注释 //
  • 在网页中看不见,可以在源码上看见
  • 要简单明了

3.标签 = 元素

  1. 父元素
    1. 直接包含子元素叫做父元素
  2. 子元素
    1. 直接被父元素包含的元素时子元素
  3. 祖先元素
    1. 直接/间接包含后代元素
    2. 一个元素的父元素也是她的的祖先元素
  4. 后代元素
    1. 直接或间接被祖先元素包含的元素
  5. 兄弟元素
    1. 拥有相同父元素的元素

分类

  1. 单标签:<img> <img/> 两种都可以
  2. 双标签

标签属性

  1. 位置: 双标签的开始标签/单标签
  2. 形式: 键值对/属性名
  3. 作用: 设置标签中的内容如何显示
  4. 注:
    1. 属性和标签名/其他属性应该使用空格隔开
    2. 属性名不能瞎写,更具文档中的规定编写
    3. 属性可以有多个

4.网页的基本结构

<!doctype html>

  1. 是什么: 文档声明
  2. 作用: 告诉浏览器当前网页的版本
  3. 注意: html不区分大小写

<html>

  1. 是什么: 根标签/根元素
  2. 限制: 网页中的所有内容都要写根元素的里边
  3. lang='en' : 当前语言是英文的,会在浏览器中弹出是否翻译成中文(浏览器是中午的)
    1. en 英文
    2. zh 中文

<head>

  1. 是什么: 网页的头部
  2. 效果: 不会在网页中直接出现
  3. 作用: 帮助浏览器/搜索引擎来解析网页
    1. 浏览器读网页
    2. 搜索引擎有爬虫程序,把网页源代码所有信息爬到数据库

<meta>

  1. 是什么: 帮助浏览器去解析网页的
  2. <meta charset='utf-8'> 设置网页的字符集,避免乱码
  3. 作用: 避免出现兼容性问题,设置网页的原数据
  4. charset 指定网页的字符集
  5. name 指定数据的名称
  6. content 指定的数据的内容
    1. keywords 表示网站的关键字,关键字之间用逗号隔开
    2. description 指定网站的描述,会显示在搜索引擎的搜索结果
  7. http-equiv 网页重定向
// 提高网页浏览器爬虫好爬取,以提高的搜索排名
<head>
   <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
   // 三秒后跳转界面到百度
   <meta http-equiv='refresh' content='3;url=http://www.baidu.com'>
</head>

<title>

  1. 是什么: 浏览器的标题
  2. 显示在浏览器的标题栏
  3. 作用: 搜索引擎判断网页的主要内容之一是根据title中的内容来
  4. 浏览器中: title标签的内容会作为搜索结果的超链接上的文字显示

<body>

  1. 是什么: html的子元素,表示网页的主题,网页中所有可见的都应该写在body中

5. 编码

  • UTF-8 万国码

6. vscode

插件

live插件

  1. 作用: 改代码浏览器会自动同步刷新
  2. 插件推荐: Live Server
  3. 实施: 实时更新的服务器打开网页
  4. 优点: 地址栏不是磁盘地址,而是真真正正的服务器地址,契合真实项目上线的环境(是部署在服务器上)

快捷键

  1. ctrl+enter 光标下移,内容不下移
  2. ctrl+/ 注释
  3. alt+shift+箭头: 整行复制
  4. 输入lorem: 自动生成英文句子

7.html语法

  • 关注标签的语义,而不是样式

实体

空格

  1. 背景: 在网页中编写多个空格默认情况会自动被浏览器解析为一个空格
  2. 解决: &nbsp;

小于号 大于号

  1. 背景: 会把大小于号解析成标签
  2. 问题: 在html中有些时候,不能直接书写一些特殊符号,例如连续大的空格,字母两侧的大于和小于号
  3. 解决: 使用html中的实体(转义字符)
    1. 空格 &nbsp;
    2. 大于号 &gt;
    3. 小于号 &lt;
    4. 版权符号 &copy;
    5. www.w3school.com.cn/html/html_e… 查看

语义化标签

标题标签 h1-6

  1. 重要性: h1仅次于title,一般一个界面只有一个h1
  2. 使用频率: h1-3常用, h4-6很少用
  3. 特点: 块元素

<hgroup>

  1. 含义: 对标题进行组合
  2. 特点: 块元素

<p>

  1. 含义: 段落标签
  2. 特点: 块元素[独占一行]

<em>

  1. 含义: 语音语调的突出
  2. 效果: 斜体
  3. 特点: 行内元素[在页面不会独占一行]

<strong>

  1. 含义: 强调
  2. 效果: 加粗
  3. 特点: 行内元素

<blockquote>

  1. 含义: 引用别人的话,长引用
  2. 效果: 展现为一个左、右两边进行缩进的段落。
  3. 特点: 块元素

<q>

  1. 含义: 短引用
  2. 特点: 行内元素

<br/>

  1. 含义: 换行
  2. 特点: 块元素

<b>

  1. 含义: 强调
  2. 效果: 加粗
  3. 特点: 行内元素

<i>

  1. 含义: 表现因某些原因需要区分普通文本的一系列文本
  2. 效果: 斜体
  3. 特点: 行内元素w

<small>

  1. 含义: 被重新定义为表示边注释和附属细则，包括版权和法律文本
  2. 效果: 字体变小一号
  3. 特点: 行内元素

<sub>

  1. 含义: 下标元素
  2. 效果: 文本相比，展示得更低并且更小
  3. 特点: 行内元素

<sup>

  1. 含义: 上标元素
  2. 效果: 与主要的文本相比，展示得更高并且更小
  3. 特点: 行内元素

块元素 行内元素

块元素

  1. 作用: 在网页中一般通过块元素来对页面进行布局
  2. 使用情况: 一般在块元素中放行内元素,块元素
  3. p元素: 不能放任何块元素

行内元素

  1. 作用: 用来包裹文字

语义化标签

  • 不是必须的,可以用可以不用
  • 以下都是h5新增的

<header>

  1. 含义: 网页的头部
  2. 使用情况: 可以有很多header

<mian>

  1. 含义: 网页的主体部分
  2. 使用情况: 一个页面中只会有一个main

<footer>

  1. 含义: 网页的底部
  2. 使用情况: 可以有很多footer
  3. 以上三个标签时h5以后新增的标签,用的不多,不是必须需要的,主要是看在SEO中的作用,实际上在SEO中的作用不明显,所以用的少

<nav>

  1. 含义: 网页中的导航

<aside>

  1. 含义: 侧边栏或者标注框

<articl>

  1. 含义: 独立的一个文章

<section>

  1. 含义: 独立的区块,上面的都不能用时,使用section,表示其他的意思

h5之前

  1. div

    1. 含义: 没有语义
    2. 使用: 目前来讲div还是我们主要的布局元素
    3. 特点: 块元素

  2. span

    1. 含义: 没有语义
    2. 使用: 一般用于网页中选中文字
    3. 特点: 行内元素

列表

  • 列表内可以互相嵌套

有序列表

  1. ol>li

无序列表

  1. ul>li

定义列表

  1. dl>dt+dd*2

超链接

  1. 作用: 从一个页面跳转到其他页面/当前页面的其他位置

  2. <a href='https://www.baidu.com'>

  3. 特点: 行内元素

  4. 嵌套: 放所有标签出来本身标签

  5. 颜色: 紫颜色-访问过的链接 蓝色-未访问过的地址

  6. 属性

    1. href 跳转链接
    2. target 指定超链接打开的位置[ _self 默认值 在当前页面打开超链接 ; _blank 在一个新页面中打开超链接]
    3. 跳转到指定那个位置[href='#' - 页面顶部; href='#目标元素的id属性值' - 跳转到指定位置]

  7. 占位符:

    1. 开发中位置跳转路径时,可以用href='#',作为占位符
    2. href='javascript:;' 点击后什么也不会发生,不会跳到顶部

相对路径

  1. 上一级目录 ../
  2. 当前目录 ./ ; 可以省略不写

绝对路径

  1. www.baidu.com
  2. C://......

图片标签

  1. 作用: 向当前页面中引入一个外部图片

  2. <img/> <img> 单标签

  3. 属性

    1. src 指定外部图片的路径
    2. alt 对图片的描述,图片加载不出来时显示,浏览器爬虫会把alt的内容和图片进行关联[图片不写alt属性不会被搜索引擎收录]
    3. width
    4. height [宽度和高度如果只修改了一个,则另有一个会等比例缩放] [一般在PC端,不建议修改图片,最好让美工直接切好,调小浪费内存,调大失真]

  4. 特点: 替换元素,既有块元素也有行内元素,不独占一行

  5. 图片格式:

    1. jpeg(jpg) 支持颜色多,不支持动图,不支持透明度 [一般用来显示照片 可以压缩]
    2. gif 支持的颜色少,支持简单透明,支持动图 [颜色的单一的图片 动图]
    3. png 颜色丰富,支持复杂透明 [专为网页而生的]
    4. webp 谷歌推出专门用来表示网页中的图片的一种格式 [具备其他图片格式的所有优点,且文件还特别小,谷歌压缩算法很先进] [缺点: 兼容性不好]
    5. base64 图片使用base64进行编码,可以将图片转换为字符,通过字符形式来引入图片 [一般都需要一些和网页一起加载的图片从才会使用base64,相比起来速度快]
    6. 效果一样,用小的,加载速度快; 效果不一致,用效果好的[效果和大小中取一个平衡]

内联框架

  1. 作用: 向当前页面引入一个其他页面
  2. <iframe>
  3. 属性
    1. src 指定要引入的网页路径
    2. frameborder 指定内联框架的边框

音视频

  • 默认情况下不允许用户自己控制播放停止

音频

  1. <audio scr='./XXXX.mp3' controls autoplay>

  2. 作用: 向页面中引入一个外部的音频文件

  3. 属性

    1. src 路径
    2. controls 允许用户自己控制播放
    3. autoplay 音频文件是否自动播放 [大部分浏览器都不会自动对音乐进行播放]
    4. loop 循环播放

  4. 不兼容情况

    1. 背景: ie8浏览器不兼容auido标签
    2. 解决: 支持的浏览器,会去寻找source标签,不支持的,会忽略audio和source标签,从而显示文字
<audio controls>
   对不起,您的浏览器不支持播放音频,请升级浏览器!
   <source src='./XXXX.mp3'>
</auido>
  1. ie8等老版本的支持播放音频的文件 <embed src='XXX.mp3' type='audio/mp3'> [缺: 会自动播放,必须加上width height]
    1. type 值为文件具体大的类型/文件具体类型
<audio controls>
   <source src='./XXXX.mp3'>
   <source src='./XXXX.ogg'>
   <embed src='XXX.mp3' type='audio/mp3' width='300' height='200'>
</auido>
  1. 音频格式
    1. 背景: 一些浏览器不支持部分音频文件
    2. 解决: 多写几种音频文件的sorce
<audio controls>
   对不起,您的浏览器不支持播放音频,请升级浏览器!
   <source src='./XXXX.mp3'>
   <source src='./XXXX.ogg'>
</auido>

视频文件

  1. <video>

  2. 属性

    1. scr
    2. autoplay
    3. loop
    4. controls

  3. 兼容性

<video controls>
   <source src='XX.mp4'>
   <source src='XX.webm'>
   <embed src="XX.mp4" type='video/mp4'>
</video>

现实情况

  1. 背景: 本地存储视频音频文件占服务武器内存量大,加载速度上需要更大的带宽,成本高
  2. 解决
    1. 七牛云: 托管到这个平台,引入别人的链接
    2. 上传到一些视频平台,引入别人的链接,白嫖

9.属性

id

  1. 使用范围: 每个标签都可以添加一个id属性
  2. 特点:
    1. 唯一标识符,同样一个页面不能出现重复的id属性
    2. 区分大小写

10.

  1. 标签写在根元素外部/p元素中嵌套了块元素/根元素中才出现了除head和body以外的子元素
    1. 原因: 浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
    2. 修正: 源码加载到内存(F12)后进行修证
    3. 修正的影响: 性能会慢一点
avatar
文章
阅读
粉丝