X日记

学习使我进步

HTML5及CSS学习

2020-8-25 X先生 Html/Css

课程B站的Pink前端教学

HTML5及CSS学习

学习路径:
HTML 20%
CSS3 50%
H5C3 10%包括新增的标签

各种网页编程语言的功能

  • 结构 网页元素整理分类HTML
  • 表现 版式,颜色 大小CSS
  • 行为 网页交互的编写后端 JS

浏览器工作原理

转载自Adazheng的博客
感谢博主能写出这么好的拟人的文章!

  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
  9. 终于等到了</html>的到来,浏览器泪流满面……
  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
  11. 浏览器召集了在座的各位<span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。
  • 可能大家刚开始看这个会十分蒙蔽,不明白他说的是什么,我相信等大家学完前端的基础后,回来在看这篇小文会会心一笑

vscode安装技巧

  • 现在打开我的学习文件夹要先打开vscode,再把文件夹拖进去,没有右键用打开的那个选项,操作起来十分麻烦,一不小心就把文件夹整个拖到桌面上了
  • 上网查找了一下有没有解决方法,发现了这篇教程 感谢作者!
  • 这篇教程基本上完美解决了这个问题,现在说一下我通过这个教程时所遇到的坑
    • 因为每个人的安装路径都不一样,所以要修改路径为盘符到你的code.exe的路径,如果忘记装在哪里可以直接搜索code.exe就可以找到了

vscode写博客

  • 这两个月以来,写博客真的对我的学习有了很大的提升,这里我要吹爆 markdown 这个标记语言太适合我们程序猿写笔记了,这里我就简介一下怎么用 vscode 写笔记

  • 首先你要安装好vscode,然后下载 markdownlint 这个插件然后了解最基本的markdown语法,就可以愉快的写笔记了!

  • 推荐菜鸟教程的markdown基本语法

  • 然后在你写笔记的时候,会出现一些黄色的波浪线,并且有警告,一般都是 MD XX ,这时就是你有书写不规范的地方,这时只需要对照markdownlint规则详细介绍及自定义参数设置这篇博客就能完美解决这个问题

  • 还有就是vscode默认是不支持数学公式的,需要安装 Markdown+Math 这个插件

  • 还有一个就是markdown的一个小小的瑕疵,他无法连着图片文件一起保存,所以就需要图床

  • 当然在CSDN里面我们就直接使用它里面的上传图片就可以了,其他好像也有一些方法,例如用GitHub上存储图片这个方面我使用的较少,还是需要大家自己去探索

HTML5及CSS学习demo2

本章导读:主要讲了各种标签的使用方法
包括标题标签,段落标签,换行标签,

HTML标签

<html> 双标签<br />单标签 </html> 
  • <html> 双标签<br />单标签 </html>
  • 有包含关系和并列关系

HTML基本结构

<html> <head> <title>网页的标题</title> </head> <body> 网页的内容部分 </body> </html> 
  • <html>
  • <head>
  • <title>网页的标题</title>
  • </head>
  • <body>
  • 网页的内容部分
  • </body>
  • </html>

vscode使用小技巧:

输入!并回车,输出基本模板
alt+B 打开浏览器预览
安装插件 open in browser,auto remane tag

各种标签的讲解

<!DOCTYPE html> <!DOCTYPE>告诉浏览器使用的HTML5版本
<html lang="en"> lang="当前文档的显示的语言" 中文"zh-CN",英语"en" <head> <meta charset="UTF-8"> charset规定文档的字符编码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动端开发的代码 <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head>  <body> </body>  </html> <!DOCTYPE html> <!DOCTYPE>告诉浏览器使用的HTML5版本
<html lang="en"> lang="当前文档的显示的语言" 中文"zh-CN",英语"en" <head> <meta charset="UTF-8"> charset规定文档的字符编码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动端开发的代码 <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>

HTML常用的标签

  • 标题标签<h1>-<h6>一级标题到6级标题 =md中的#

  • 段落标签和换行标签<p></p>段落标签

  • 换行标签 单标签 <br />强制换行(也可以这么写<br>)

    小知识:html里多个空格只会显示一个空格(回车算一个空格)
    段落和换行的区别,段落两行之间会有空隙,换行不会有空隙

文本格式化标签

  • 加粗 <strong>加粗标签</strong> <b>加粗标签*2</b>
    优先考虑strong
  • 斜体 <em>倾斜标签</em> <i>倾斜标签*2</i>
    优先考虑em
  • 删除线 <del>删除标签</del> <s>删除标签*2</s>
    优先del标签
  • 下划线 <ins>下划线标签</ins> <u>下划线标签*2</u>
    优先使用ins

特殊的标签 div 和 span

  • div 用来布局的 但是他是单独占一整行
  • span 在一行上显示多个span

图像标签和路径

图片标签

  • 图像标签<img src="图像URL" /> 单标签 同一目录下可以直接用图片名做url
  • 图像标签的参数 (参数之间用空格分开)
    • alt 如果图片不能显示用来替换的文字
    • height 图片高度
    • width 图片宽度
    • title 鼠标放到图片上显示的文字
    • border 边框宽度 css设定的情况比较多

路径

  • 相对路径 相对于html文件的路径

    • 同一级的相对路径 直接写文件名就可以
    • 下一级路径 下一级文件夹名/文件名
    • 上一级路径 …/文件名
  • 绝对路径 从盘符开始的路径

    • 如果找不到的话需要file协议(file:文件路径)
    • 使用时经常用图片网址作为绝对路径

    小知识 相对路径使用的是/ 绝对路径使用的是\

超链接标签 a

  • 超链接语法格式
<a herf="" target=""></a> 
  • herf 用于链接目标的地址(必须)

    • 外部链接 两个标签中间作为超链接开关
    • 内部链接 herf直接写文件名称就可以(盲猜也是使用相对路径)
    • 空链接 herf可以用空链接 用#代替
    • 下载链接 如果herf里是一个zip或文件则默认下载
    • 各种元素都可以做为超链接
    • 锚点链接 跳到本页中的某处的链接
      • herf属性里为’#名字’的形式<a herf="#two">
      • 然后在目标标签里<h3 id="two">
  • targrt 链接页面的打开方式 _self为默认值在当前页打开 _blank为在新窗口打开

注释标签和特殊字符

  • 注释标签 <!–这就是注释–>

  • 快捷键ctrl+/

  • 常用特殊字符

    符号名 字符代码
    大于号 &gt;
    小于号 &lt;
    空格 &nbsp;

标签: Html/Css