新闻详情

新闻详情

首页 / 资讯中心 / 详情

HTML学习笔记2

发布时间:2026/10/1 21:31:23来源:尧图网络
HTML学习笔记2
1VSCode的Live Server插件有什么作用我们无法在没有任何插件的情况下直接用VSCode打开自己写的代码Live Server通过对网页注入一段JS脚本实现了这个功能使我们在使用VSCode时更方便同时可以让网页显示的内容根据我们对html文件的修改实现自动刷新。然而插件存在自己的弊端比如当我们直接打开单个文件的时候通过空白处右键无法直接打开网站所以必须使用文件夹同时Live Server的自动刷新功能仅限于html文件所以其他形式的文件是无法通过这个插件实现自动刷新的。2关于HTML的注释在编写源代码的时候有时我们需要对代码进行解释注释的内容会被浏览器忽视我们无法在网页中看到这些信息但我们在查看源代码的时候仍然可以看到注释。当我们试图进行注释时可以在标签的前方加上!--,在后方加上--比如这是一条注释→!--这是一条注释--但是值得注意的是单个注释无法与其他注释进行嵌套否则在代码运行的时候可能会出现错误。添加注释有快捷键可以使用ctrl/3我们现在使用的html一般为html5,并且绝大部分浏览器在渲染的时候都会默认根据html5的语法进行渲染但部分浏览器可能会因为不会默认html5导致渲染出错这时候就要对文档进行一个文档声明向别人宣称我的文档应该以html5的标准进行渲染该文档声明的写法就是!DOCTYPE html。通常标签名默认使用小写但在文档声明里DOCTYPE默认使用大写而html则仍然是小写这是最标准的写法。若想让浏览器使用其他方式进行渲染需要把文档声明里的html改成对应的内容详细写法可参考W3C4当我们在编写代码的时候有时需要对所选择的语言进行说明常见的语言有zh-CN简体中文zh-TW(繁体中文)zh(中文)和en英文且编写的方式一般是在html中的html后面加上“lang”。关于其他语言可以在W3C或则W3School等网站中进行查询。还有解释语言并不会对实际编写内容造成影响但他会告诉浏览器使用的语言种类方便进行翻译。以下内容是相关网站的网址5关于标准写法上文我们曾说过如果在编写源代码的时候只写一行marquee我是一个中国人。/marquee在进行渲染的时候是可以正常显示出来的但实际上这种写法是非常不严谨的之所以浏览器可以把这串代码渲染出来是因为它在检查之后对代码进行了一定的修正随后就更改成了这样htmlhead/headbodymarquee我是一个中国人/marquee/body/html实际上这仍然不是最严谨的写法比如没有对编码的方法语言进行说明同时也没有标题。比较严谨的写法应该是!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8title标题/title/headbodymarquee我是一个中国人/marquee/body/html其中的!DOCTYPE html对文档进行了说明html langzh-CN对使用的语言进行了说明meta charsetUTF-8则对编码的方式进行说明。编码的方式还有GBK等其他的方法但我认为现在的UTF-8非常常用这点不需要特别记忆。6关于排版标签这类标签通常是双标签被大量用于新闻等地方在没做其他修改的情况下h1~h6分别代表了文字的重要性和大小。数字越小则实际字体的重要性和大小就会越大p标签一般用于划分段落div则用于整体布局无实际意义。同样的以上所有标签在使用时都要加上,比如在使用p时要写成p内容/p.7关于语义化标签以上所讲的h1~h6,以及p和div都属于语义化标签它们会在赋予文字意义的同时对文字施加效果比如变大加粗变成斜体字......,但重要的是我们不能光看效果不看语义不能为了效果而偏离语义。用特定语义的标签去表达特定的含义对引擎的优化设备的解析等都有很大的好处。8关于块级元素和行内元素块级元素独占一行行内元素不独占一行。块级元素内能写行内元素和块级元素但行内元素中只能写行内元素不能写块级元素。有一些特殊规则在h1~h6之间不能互相嵌套p中不能写块级元素这些特殊规则很少但十分重要。9关于文本标签文本标签通常用于包裹词汇短语等。一般都是行内元素但是有例外情况。常用的标签名有em,strong和span,前两者起到强调作用实际使用上差别不大span则类似div,无实际意义用于包裹短语。如果说div是个大袋子那span就像一个小袋子。语义感强的有以上几个标签当然存在例如i和del这样的冷门标签但是它们通常很少用。所以不做特殊强调。10关于图片标签标签名为img通常用于导入图片。img的标签属性有很多比如src,alt,width,height等。src用于描述图片的路径如果导入了一个不存在的路径则图片不能正常显示alt则为对图片的描述通常不会在网页中直接表现出来类似于之前使用的注释。width和height则可以对图片的长宽进行调整会对图片进行横向或者纵向的压缩。图片长宽使用的单位为像素px常见的图片大小有1600*9001920*10801k,2560*1440(2k),3840*2160(4k)等。
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

HowToCook 白菜猪肉炖粉条完整指南:原料量化、分步火候与东北家常炖菜原理详解 2026/10/1 22:31:13

HowToCook 白菜猪肉炖粉条完整指南:原料量化、分步火候与东北家常炖菜原理详解

文档教程 【免费下载链接】HowToCook Programmers guide about how to cook at home. 项目地址: https://gitcode.com/GitHub_Trending/ho/HowToCook 点击查看 免费下载 白菜猪肉炖粉条是 HowToCook(程序员做饭指南)仓库中收录的东北经典家常…

阅读更多 →
Claude Code UI 完全指南:从命令行到图形化操作 2026/10/1 22:31:13

Claude Code UI 完全指南:从命令行到图形化操作

如果你用 Claude Code 写过几个完整的任务,我相信你心里多半会冒出同一个念头:怎么没有鼠标点一点就能看到项目结构、会话进度和代码差异的界面?不是命令行不好用,而是当任务从“改一行代码”变成“重构整个模块”时,终…

阅读更多 →
微信开源WeKnora:生产级RAG框架架构解析与本地部署实操 2026/10/1 22:31:13

微信开源WeKnora:生产级RAG框架架构解析与本地部署实操

1. 从一条开源公告说起:WeKnora 到底是个什么东西微信团队在开源社区扔出了一个叫 WeKnora 的项目,圈子里讨论度不低。我第一时间把仓库拉下来跑了一遍,又翻了翻 issue 区和几个技术群的讨论,大概摸清了它的定位。简单说&#xff…

阅读更多 →
基于Jev与TypeSafe的电商客服质检Demo:意图识别、情绪监控与危险话术拦截实战 2026/10/1 22:31:13

基于Jev与TypeSafe的电商客服质检Demo:意图识别、情绪监控与危险话术拦截实战

1. 从客服质检的痛点说起:为什么我选择动手做这个 Demo电商客服这个岗位,表面看是“打字回复”,实际背后是一整套高压力的情绪劳动。我身边做运营的朋友经常吐槽:大促期间一个客服同时挂十几个会话,客户上来就是“你们…

阅读更多 →
Web前端静态网页仿写:拆解、还原与验收的完整指南 2026/10/1 22:31:13

Web前端静态网页仿写:拆解、还原与验收的完整指南

很多人第一次接触前端时,接到的第一个任务就是"网页仿写"——对着一个现成的网站,做出一个长得差不多的静态页面。我见过太多人把这个任务理解成"打开浏览器右键查看源代码,复制粘贴保存,改改文字颜色就算完事&quo…

阅读更多 →
SpringBoot热部署失效根因与Jrebel实战调试指南 2026/10/1 22:31:06

SpringBoot热部署失效根因与Jrebel实战调试指南

1. 热部署失效不是Bug,是SpringBoot与IDEA的协作契约被悄悄打破了 你刚改完一行Controller代码,CtrlF9编译完,刷新浏览器——页面还是旧的。再点Debug启动,控制台输出“Started Application in 3.2 seconds”,可新逻辑…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉