HTML5及CSS学习demo1和demo2

最新推荐文章于 2024-04-12 02:57:04 发布

原创最新推荐文章于 2024-04-12 02:57:04 发布 · 8.5k 阅读

103 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #html5 #1024程序员节

HTML5及CSS学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了HTML5和CSS的学习路径，包括网页编程语言的功能、浏览器工作原理，以及VSCode安装技巧。详细讲解了HTML5的标签、基本结构，如标题、段落、图像和超链接，还分享了VSCode写博客的便捷方法，如使用Markdown和相关插件。

HTML5及CSS学习

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

各种网页编程语言的功能

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

浏览器工作原理

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

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入 html 代码，发现 <head> 标签内有一个 <link> 标签引用外部 CSS 文件；
浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件；
浏览器继续载入 html 中 <body> 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个 <img> 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的 <script> 标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了 </html> 的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript 让浏览器换了一下 <link> 标签的 CSS 路径；
浏览器召集了在座的各位 <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基本结构

<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>

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为在新窗口打开