初学前端的第二篇笔记

一、html入门1.html注释1)特点注释的内容会被浏览器所忽略不会呈现到页面中但源代码中依然可见。2)作用对代码进行解释和说明。(也可用来使某段代码暂时不参与运行)3)写法!-- 下面的文字只能滚动一次 -- marquee loop1尚硅谷/marquee !-- 下面的文字可以无限滚动 -- marquee尚硅谷123/marquee4)注释不可以嵌套就近原则2.html文档声明1)作用告诉浏览器当前网页的版本。2)写法!doctype htmlhtml5并且html文档声明不限制大小写其他写法参照w3c官网https://www.w3.org/QA/2002/04/valid-dtd-list.html。3.html字符编码1)计算机对数据的操作存储时对数据进行编码。读取时对数据进行解码。2)编码、解码会遵循一定的规范——字符集3)字符集的使用原则原则1存储时务必采用合适的字符编码 。 否则无法存储数据会丢失原则2存储时采用哪种方式编码 读取时就采用哪种方式解码。 否则数据错乱乱码5总结平时编写代码时统一采用UTF-8编码最稳妥。为了让浏览器在渲染html文件时不犯错误可以通过meta标签配合charset属性指 定字符编码。实例head meta charsetUTF-8/ /head4.html设置语言1主要作用让浏览器显示对应的翻译提示。有利于搜索引擎优化。2具体写法html langzh-CN3)lang属性的编写规则1.语言-国家/地区2.语言-具体种类不推荐使用5.html标准结构1结构​ !DOCTYPE html html langzh-CN head meta charsetUTF-8 title我是一个标题/title /head body /body /html ​2输入!随后回车即可快速生成标准结构。3配置V Scode 的内置插件 emmet 可以对生成结构的属性进行定制。4在存放代码的文件夹中存放一个 favicon.ico 图片可配置网站图标。五、html基础1.开发者文档W3C官网 www.w3c.orgW3School www.w3school.com.cnMDN developer.mozilla.org——平时用的最多2.排版标签1 h1最好写一个 h2~h6 能适当多写。2.h 1~h6 不能互相嵌套例如h1 标签中最好不要写h2 标签了。3.p 标签很特殊它里面不能有h1~h6 、p、双 div 标签。3.语义化标签重点理解概念用特定的标签去表达特定的含义。原则标签的默认效果不重要后期可以通过 CSS 随便控制效果语义最重要举例对于h1标签效果是文字很大不重要语义是网页主要内容很重要。优势1.代码结构清晰可读性强。2.有利于 SEO搜索引擎优化。3.方便设备解析如屏幕阅读器、盲人阅读器等。4.行内元素与块级元素1. 块级元素独占一行排版标签都是块级元素。2. 行内元素不独占一行3. 使用原则5.常用文本标签1. 用于包裹词汇、短语等。2. 通常写在排版标签里面。3. 排版标签更宏观大段的文字文本标签更微观词汇、短语。4. 文本标签通常都是行内元素。6.不常用的文本标签7.图片标签1基本使用附10月1日作业