一课前前序知识1.认识两位先驱图灵 和 冯诺依曼2.计算机基础计算机由硬件和软件组成软件分为系统软件和应用软件3.CS架构和BS架构应用软件分为CS架构和BS架构C/S架构特点需要安装偶尔更新不跨平台B/S架构特点无需安装无需更新可跨平台前端工程师主要开发B/S架构的应用4.浏览器相关知识浏览器的内核内核是浏览器的核心用于处理浏览器所得到的各种资源5.网页相关概念网页具备结构表现行为结构HTML表现CSS行为JavaScript二正式学习HTMLHTML全称HyperText Markup Language译为超文本标记语言超文本暂且理解为“超级的文本”和普通文本比内容更丰富标记文本要变成超文本就需要用到各种标记符号语言每一个标记的写法、读音、使用规则构成标记语言HTML发展史准备工作1.安装chrome浏览器2.安装VSCode3.安装Live Server 插件1.可以更加方便的打开网页2.打开网页的方式更贴近项目上线3.代码出现改动后可以自动刷新4.根据自己的情况去配置一下VSCode的自动保存注意1务必使用VSCode打开的是文件夹否则LiveServer插件无法正常工作注意2打开的网页必须是标准的HTML结构否则无法自动刷新1.HTML初体验1.第一步鼠标右键 新建文本文档 输入以下内容并保存marquee尚硅谷让天下没有难学的技术/marquee2.第二步修改后缀为.html然后双击打开即可这里的后缀名使用htm也可以但推荐使用更标准的.html3.程序员写的叫源代码要交给浏览器进行渲染。4.借助浏览器看网页的源代码具体操作在网页空白处鼠标右键 查看网页源代码2.HTML标签1.标签又称元素是HTML的基本组成单位2.标签分为双标签与单标签绝大多数都是双标签3.标签名不区分大小写但推荐小写因为小写更规范4. 双标签5.单标签6.标签之间的关系并列关系、嵌套关系可以使用tab键进行缩进marquee尚硅谷让天下没有难学的技术input/marquee3.HTML标签属性1.用于给标签提供附加信息。2.可以写在起始标签或单标签中形式如下3.有些特殊的属性没有属性名只有属性值例如input disabled4.注意点1.不同的标签有不同的属性也有一些通用属性在任何标签内都能写后面会详细总结2.属性名、属性值不能乱写都是W3C规定好的3.属性名、属性值都不区分大小写但推荐小写4.双引号也可以写成单引号甚至不写都行但还是推荐写双引号5.标签中不要出现同名属性否则后写的会失效例如input typetext typepassword4.HTML基本结构1.在网页中如何查看某段结构的具体代码一一点击鼠标右键选择“检查”2.【检查】和【查看网页源代码】的区别【查看网页源代码】看到的是程序员编写的源代码【检查】看到的是经过浏览器“处理”后的源代码备注日常开发中【检查】用的最多3.网页的基本结构如下1.想要呈现在网页中的内容写在body标签中。2.head标签中的内容不会出现在网页中。3.head标签中的title标签可以指定网页的标题。4.图示5、代码htmlheadtitle网页标题/title/headbody....../body/html5.HTML注释1.特点注释的内容会被浏览器所忽略不会呈现到页面中但源代码中依然可见2.作用对代码进行解释和说明3.写法--下面的文字只能滚动一次--marquee1oop1尚硅谷/marquee--下面的文字可以无限滚动--marquee尚硅谷123/marquee4.注释不可以嵌套以下这么写是错的。反例! --我是一段注释-- 我是一段注释 ----6.HTML文档声明1作用告诉浏览器当前网页的版本。2.写法旧写法要依网页所用的HTML版本而定写法有很多。参考W3C官网-文档声明新写法一切都变得简单了W3C推荐使用HTML5的写法!DOCTYPE html或!DOCTYPE HTML或!doctype html3.注意文档声明必须在网页的第一行且在html标签的外侧。7.HTML字符编码1计算机对数据的操作存储时对数据进行编码。读取时对数据进行解码。2编码、解码会遵循一定的规范一一字符集3.字符集有很多中常见的有了解1.ASCII大写字母、小写字母、数字、一些符号共计128个2.ISO8859-1在ASCII基础上扩充了一些希腊字符等共计是256个3.GB2312继续扩充收录了6763个常用汉字、682个字符4.GBK收录了的汉字和符号达到20000支持繁体中文5.UTF-8包含世界上所有语言的所有文字与符号一一很常用4.使用原则原则1存储时务必采用合适的字符编码否则无法存储数据会丢失原则2存储时采用哪种方式编码读取时就采用哪种方式解码否则数据错乱(乱码)5总结平时编写代码时统一采用UTF-8编码最稳妥为了让浏览器在渲染html文件时不犯错误可以通过meta标签配合charset属性指定字符编码headmeta charsetUTF-8/8.HTML设置语言1.主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化2..具体写法html langzh-CN9.HTML标准结构HTML标准结构如下!DOCTYPE htmlhtml langzh-CNheadmeta_charsetUTF-8title我是一个标题/title/headbody/body/html输入随后回车即可快速生成标准结构配置VScode的内置插件emmet可以对生成结构的属件进行定制在存放代码的文件夹中存放一个favicon.ico图片可配置网站图标10.开发者文档W3c官网www.w3c.orgW3Schoolwww.w3school.com.cnMDNdeveloper.mozilla.org——平时用的最多11.HTML排版标签1.h1最好写一个h2~h6能适当多写2.h1~h6不能互相嵌套例如h1标签中最好不要写h2标签了3.p标签很特殊它里面不能有h1~h6、p、div标签12.HTML语义化标签概念用特定的标签去表达特定的含义原则标签的默认效果不重要后期可以通过CSS随便控制效果语义最重要举例对于h1标签效果是文字很大不重要语义是网页主要内容很重要优势代码结构清晰可读性强有利于SEO搜索引擎优化方便设备解析如屏幕阅读器、盲人阅读器等13.块级元素与行内元素1.块级元素独占一行排版标签都是块级元素2.行内元素不独占一行目前只学了input稍后会学习更多3.使用规则1.块级元素中能写行内元素和块级元素简单记块级元素中几乎什么都能写2.行内元素中能写行内元素但不能写块级元素3.一些特殊的规则h1~h6不能互相嵌套。p中不要写块级元素。我们以后还会学到一些特殊的规则但不会很多。14.常用的文本标签1.用于包裹词汇、短语等2.通常写在排版标签里面3.排版标签更宏观大段的文字文本标签更微观词汇、短语4.文本标签通常都是行内元素常用的15.不常用的文本标签1.这些不常用的文本标签编码时不用过于纠结酌情而定不用也没毛病2.blockquote与address是块级元素其他的文本标签都是行内元素。3有些语义感不强的标签我们很少使用例如small、b、u、q、blockquote4.HTML标签太多了记住那些重要的、语义感强的标签即可截止目前有这些h1~h6、p、div、em、 strong、span16.HTML图片标签1.像素px是一种单位学到CSS时我们会详细讲解2.尽量不同时修改图片的宽和高可能会造成比例失调3.暂且认为img是行内元素学到CSS时会认识一个新的元素分类目前咱们只知道块、行内4.alt属性的作用搜索引擎通过alt属性得知图片的内容。一一最主要的作用当图片无法展示时候有些浏览器会呈现a1t属性的值盲人阅读器会朗读alt属性的值练习效果图