尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
DAY1 HTML
一. HTML 初体验1. 第一步鼠标右键 新建 文本文档 输入以下内容并保存。2. 第二步修改后缀为 .html 然后双击打开即可。(这里的后缀名使用 .htm 也可以但推荐使用更标准的 .html 。)3. 程序员写的叫 源代码要交给浏览器进行渲染。4. 借助浏览器看网页的 源代码具体操作 在网页空白处鼠标右键 查看网页源代码二. HTML 标签1. 标签 又称 元素是HTML的基本组成单位。2. 标签分为双标签 与 单标签 绝大多数都是双标签。3. 标签名不区分大小写但推荐小写因为小写更规范。4. 双标签示例代码marquee尚硅谷/marquee5. 单标签示例代码input6. 标签之间的关系并列关系、嵌套关系可以使用 tab 键进行缩进:marquee尚硅谷input/marqueeinput三. HTML 标签属性1. 用于给标签提供 附加信息。2. 可以写在起始标签 或 单标签中形式如下例如marqueeloop1bgcolororange尚硅谷inputtypepassword /marquee3. 有些特殊的属性没有属性名只有属性值例如inputdisabled4. 注意点:1. 不同的标签有不同的属性也有一些通用属性在任何标签内都能写后面会详细 总结。2. 属性名、属性值不能乱写都是W3C规定好的。3. 属性名、属性值都不区分大小写但推荐小写。4. 双引号也可以写成单引号甚至不写都行但还是推荐写双引号。5. 标签中不要出现同名属性否则后写的会失效例如inputtypetexttypepassword(只执行前面的四. HTML 基本结构1. 在网页中如何查看某段结构的具体代码—— 点击鼠标右键选择“检查”。2. 【检查】 和 【查看网页源代码】的区别 【查看网页源代码】看到的是程序员编写的源代码。 【检查】看到的是经过浏览器 “处理” 后的源代码。 备注日常开发中【检查】用的最多。3. 网页的 基本结构 如下1. 想要呈现在网页中的内容写在 body 标签中。2. head 标签中的内容不会出现在网页中。3. head 标签中的 title 标签可以指定网页的标题。4. 图示5. 代码htmlheadtitle网页标题/title/headbody....../body/html五. 安装 VSCode六. 安装 Live Server 插件注意1务必使用VSCode打开的是文件夹否则 Live Server 插件无法正常工作注意2打开的网页必须是标准的HTML结构否则无法自动刷新七. HTML 注释1. 特点注释的内容会被浏览器所忽略不会呈现到页面中但源代码中依然可见。2. 作用对代码进行解释和说明。3. 写法!-- 下面的文字只能滚动一次 --marqueeloop1尚硅谷/marquee4. 注释不可以嵌套。八. HTML 文档声明1. 作用告诉浏览器当前网页的版本。2. 写法!DOCTYPE html3. 注意文档声明必须在网页的第一行且在 html 标签的外侧。九. HTML 字符编码1.使用原则:原则1存储时务必采用合适的字符编码 。 否则无法存储数据会丢失原则2存储时采用哪种方式编码 读取时就采用哪种方式解码。 否则数据错乱乱码2.总结1.平时编写代码时统一采用UTF-8 编码最稳妥。2.为了让浏览器在渲染 html 文件时不犯错误可以通过 meta 标签配合 charset 属性指 定字符编码。headmetacharsetUTF-8//head十. HTML 设置语言1. 主要作用 让浏览器显示对应的翻译提示。 有利于搜索引擎优化。2. 具体写法htmllangzh-CN十一. HTML标准结构1.HTML标准结构如下!DOCTYPE htmlhtmllangzh-CNheadmetacharsetUTF-8title我是一个标题/title/headbody/body/html2.输入 ! 随后回车即可快速生成标准结构。3.配置 VScode 的内置插件 emmet 可以对生成结构的属性进行定制。4.在存放代码的文件夹中存放一个 favicon.ico 图片可配置网站图标。十二.开发者文档W3C官网 www.w3c.orgW3School www.w3school.com.cnMDN developer.mozilla.org —— 平时用的最多。十三. 排版标签1. h1 最好写一个 h2~h6 能适当多写。2. h1~h6 不能互相嵌套例如 h1 标签中最好不要写 h2 标签了。3. p 标签很特殊它里面不能有 h1~h6 、 p 、 div 标签暂时先这样记后面会说规律。十四. 语义化标签1.概念用特定的标签去表达特定的含义。2.原则标签的默认效果不重要后期可以通过 CSS 随便控制效果语义最重要3.举例对于 h1 标签效果是文字很大不重要语义是网页主要内容很重要。4.优势 代码结构清晰可读性强。 有利于 SEO搜索引擎优化。 方便设备解析如屏幕阅读器、盲人阅读器等。十五. 块级元素 与 行内元素1. 块级元素独占一行排版标签都是块级元素。2. 行内元素不独占一行目前只学了 input 稍后会学习更多。3. 使用原则十六.文本标签_常用的1. 用于包裹词汇、短语等。2. 通常写在排版标签里面。3. 排版标签更宏观大段的文字文本标签更微观词汇、短语。十七.文本标签_不常用的十八. 图片标签
RELATED

相关推荐

SpringBoot+Vue+MyBatis二手车交易系统:从需求分析到全栈实战

SpringBoot+Vue+MyBatis二手车交易系统:从需求分析到全栈实战

二手车交易系统这个项目,我拿到手里的第一反应是:它不能只做一个普通的增删改查。二手车和普通电商的最大区别在于商品的高度“非标性”,每一辆车的品牌、车龄、里程、排放标准、变速箱、所在地都不一样,而且从发布车源、买家看车…

📅 2026/10/4 19:08:20
【ICML 2025】General Agents 论文解读:通用智能体必然包含世界模型|从强化学习理论视角

【ICML 2025】General Agents 论文解读:通用智能体必然包含世界模型|从强化学习理论视角

摘要 本文解读 ICML 2025 论文《General agents need world models》,也就是「通用智能体必然包含世界模型」这一结论的来源。该论文提出智能体即世界模型这一必要性定理,通过融合有界目标条件智能体的形式化定义、复合目标查询构造与信息论意义上的识别…

📅 2026/10/4 19:08:20
量产烧录一致性如何保障?从镜像校验到产线防呆的工程实践

量产烧录一致性如何保障?从镜像校验到产线防呆的工程实践

量产烧录这个环节,在整条电子制造业链条里存在感一直很低。很多人觉得它无非就是把编译好的固件写进存储芯片,点一下烧录器,看到绿色PASS,然后装箱出货。但我在原厂一级代理的位子上待了十几年,见过太多产品死在“烧录…

📅 2026/10/4 19:08:20
MORE NEWS

更多资讯

📰

插件开发实战:从plugin.json到TypeScript SDK与CLI全解析

1. 从“plugins”这个词说起:它到底在解决什么问题“plugins”这个词,放在今天的开发语境里,早就不是浏览器装个广告拦截器那么简单了。我最早接触插件体系是在编辑器领域,那时候大家还在手动改配置文件、复制粘贴脚本&#xff0c…

📰

Cesium高程数据实战:从地形选型到采样与业务应用

做Cesium开发这几年,凡是涉及地形的项目,几乎都要先在高程数据这个问题上绕几圈。很多刚入坑的同事第一反应是“new一个Viewer,地形不就出来了?”,确实,默认的Cesium Ion世界里有一份全球地形,但…

📰

OpenClaw 吾码小龙虾:Electron + Vue 3 桌面端接入 TaoToken 统一 Key 的配置大纲

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

35.7k Star开源项目实战:用Claude Code驱动Remotion自动生成视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

环形均分纸牌与中位数贪心:从七夕祭到通用解法

做这道题之前,我一直觉得“环形均分纸牌”和“中位数贪心”是两套互不相干的知识点:一个负责模拟搬运过程,一个负责在数轴上找最优位置。直到完整刷完 P10453 七夕祭,我才意识到这两个东西其实是一体两面——前者给出问题模型&…

📰

同一个项目,两本说明书:README.md 写给人类,AGENTS.md 写给 AI——用 TaoToken 统一 Key 打通双轨协作

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬