HTML——day1

113 阅读3分钟

一、 网页相关知识;

  1. 网站由多个网页组成。
  2. 网站基本组成部分有文字、图片、音频、视频、超链接等;
  3. 网页本质是将设计稿转化为代码,放置在后台服务器,用户通过浏览器访问展示;
  4. 浏览器是通过内核来解析页面的,不同的浏览器内核不同; Snipaste_2023-03-02_18-59-03.png

二、Web标准

  1. web标准指是一系列标准,主要有三部分组成,分别是:结构(html)、表现(css)、行为(javaScript)。
  2. 不同浏览器的渲染引擎(内核)不同,对于相同代码解析的效果可能会存在差异;不同浏览器打开效果不同,用户体验极差,所以有了web标准。

三、HTML基础认知

  1. HTML(Hyper Text Markup Language)中文译为:超文本标记语言
  2. html专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频、超链接等内容进行描述,比如图片img,视频video、段落p等;
  3. 注意:html是超文本标记语言,不是编程语言
  4. html基本结构Snipaste_2023-03-02_19-09-07.png

vscode生成的基本框架代码解释#

  1. <!DOCTYPE html> 声明文档:规定浏览器是以哪一个版本的html去解析页面,以下是html5的语法规范;
  2. <html lang="zh-CN">: 语言:英文;
  3. <meta charset="UTF-8">:字符编码:将页面中的代码翻译成对应的语言; UTF-8 : 万国码;
  4. <title> :网页标题;

四、HTML常用标签

  1. h1-h6 : 标题标签;特点: 默认加粗,独自占一行 ;文字的大小依次减小,权重也依次减小;
  2. <br> :换行标签;
  3. <hr> :水平线;
  4. <img> : 图签标签;常用属性:src(图片路径)、alt(当图片加载错误或者找不到图片路径的时候,替换位置提示用户);
  5. <a href=""></a> :超链接标签a;href属性: 设置要跳转的目标位置,一般建议里面书写相对路径;target属性: 设置打开超链接a的方式,一般使用blank取值,实现新窗口打开链接;target=" blank";
  6. <video src="视频路径"></video> :视频标签;autoplay属性: 自动播放属性,高版本浏览器一般都是禁止自动播放的; muted属性: 静音播放,用来解决高版本浏览器不支持自动播放的问题; controls属性: 播放控件,不同的浏览器可能得到样式不一致,后期用js控制; loop属性: 循环播放,可以实现一直循环播放视频;
  7. <audio src=""></audio> :音频标签;src属性: 查找音频的路径 autoplay属性: 自动播放属性,高版本浏览器一般都是禁止自动播放的; controls属性: 播放控件,不同的浏览器可能得到样式不一致,后期用js控制; loop属性: 循环播放,可以实现一致循环播放视频;

文本格式化标签

  1. <b></b> <strong></strong> :两个标签都为加粗
  2. <i></i> <em></em> :都为 倾斜
  3. <u></u> <ins></ins> : 都为 下划线
  4. <s></s> <del></del> : 都为 删除线

五、特殊字符

浏览器在解析代码的时候有些特殊的符号需要专门设置自己的格式才能正常显示; Snipaste_2023-03-02_19-41-10.png

干货

  1. 删除当前行: ctrl + shift + k(win) / ctrl + d command+d(mac)
  2. 快速复制粘贴当前行: alt+shift+下键(win) option+shift+下键(mac)
  3. 跳出当前行到下一行: ctrl + 回车

要案例扣我!!!!