HTML笔记——1Day

一、背景知识1. 两位前驱图灵和冯·诺依曼2. 计算机基础3. 应用软件1C/S 结构需要安装偶尔更新不跨平台2B/S 结构无需安装无需更新可跨平台4. 浏览器知识5. 网页相关的概念网页的组成结构 HTML表现 CSS行为 JavaScript二、HTML基础1. 简介2. HTML 初体验3.HTML标签1标签又称元素是HTML的基本单位。2标签分为双标签与单标签绝大多数都是双标签。3标签名不区分大小写但推荐小写因为小写更规范。4双标签5单标签6标签之间的关系:并列关系、嵌套关系,可以使用tab键进行缩进:4.HTML标签的属性(1用于给标签提供附加信息。(2)可以写在起始标签与单标签中形式如下(3有些特殊的属性没有属性名只有属性值例如inputdisabled(4)注意点1. 不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写,后面会详细总结)。2. 属性名、属性值不能乱写,都是W3C规定好的。3. 属性名、属性值,都不区分大小写,但推荐小写。4. 双引号,也可以写成单引号,甚至不写都行,但还是推荐写双引号。5. 标签中不要出现同名属性,否则后写的会失效,例如:input typetext typepassword5.HTML基本结构1在网页中如何查看某段结构的具体代码——点击鼠标右键选择“检查”。2【检查】和【查看网络源代码】的区别3网页的基本结构如下1. 想要呈现在网页中的内容写在body标签中。2.head标签中的内容不会出现在网页中。3.head标签中的title标签可以指定网页的标题。4. 图示:6.HTML注释1. 特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见。2. 作用:对代码进行解释和说明。3. 写法:4注释不可以嵌套,以下这么写是错的。(反例)快捷键7.HTML文档声明W3C推荐使用HTML 5的写法! DOCTYPE html或! DOCTYPE HTML或! doctype html注意文档声明,必须在网页的第一行,且在html标签的外侧。8.HTML字符编码1使用规则原则1:存储时,务必采用合适的字符编码。否则:无法存储,数据会丢失!原则2:存储时采用哪种方式编码,读取时就采用哪种方式解码。否则:数据错乱(乱码)!但可以拯救9.HTML设置语言1. 第一种写法(语言-国家/地区),例如:zh-CN:中文-中国大陆(简体中文)■ zh-TW:中文-中国台湾(繁体中文)■ zh :中文■ en-Us:英语-美国■ en-GB:英语-英国例如10.HTML标准结构输入!,随后回车即可快速生成标准结构。配置VScode的内置插件emmet,可以对生成结构的属性进行定制。在存放代码的文件夹中,存放一个favicon.ico图片,可配置网站图标。三.HTML进阶1.开发者文档· W3C官网:www.w3c.org. W3School:www.w3school.com.cn· MDN:developer.mozilla.org--平时用的最多。2.HTML排版标签1.h1最好写一个,h2~h6能适当多写。2.h1~h6不能互相嵌套,例如:h1标签中最好不要写h2标签了。3.p标签很特殊!它里面不能有:h1~h6、p、div标签(暂时先这样记,后面会说规律)。3.HTML语义化标签1· 概念:用特定的标签,去表达特定的含义。2· 原则:标签的默认效果不重要(后期可以通过cSS随便控制效果),语义最重要!3· 举例:对于h1标签,效果是文字很大(不重要),语义是网页主要内容(很重要)。4●优势:代码结构清晰可读性强。有利于SEO(搜索引擎优化)。方便设备解析(如屏幕阅读器、盲人阅读器等)。4.块级元素与行内元素1. 块级元素:独占一行(排版标签都是块级元素)。2. 行内元素:不独占一行(目前只学了:input,)3. 块级元素 中能写 行内元素 和 块级元素(简单记:块级元素中几乎什么都能写)。4. 行内元素 中能写 行内元素,但不能写 块级元素。5. 一些特殊的规则:h1~h6不能互相嵌套。p中不要写块级元素。5.常用的文本标签1. 用于包裹:词汇、短语等。2. 通常写在排版标签里面。3. 排版标签更宏观(大段的文字),文本标签更微观(词汇、短语)。4. 文本标签通常都是行内元素。6.不常用的文本标签备注1. 这些不常用的文本标签,编码时不用过于纠结(酌情而定,不用也没毛病)。2.blockquote与address是块级元素,其他的文本标签,都是行内元素。3. 有些语义感不强的标签,我们很少使用,例如:small、b、u、q、blockquote4. HTML标签太多了!记住那些:重要的、语义感强的标签即可;截止目前,有这些:h1~h6、p、div、em、strong、span7.HTML图片标签基本使用、总结:1. 像素(px)是一种单位。2. 尽量不同时修改图片的宽和高,可能会造成比例失调。3. 暂且认为img是行内元素4.alt 属性的作用:搜索引擎通过alt属性,得知图片的内容。 -- 最主要的作用。当图片无法展示时候,有些浏览器会呈现alt属性的值。盲人阅读器会朗读alt属性的值。