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. 排版标签更宏观大段的文字文本标签更微观词汇、短语。十七.文本标签_不常用的十八. 图片标签