前端开发学习(day2)

HTML学习

一、简介

根据W3C标准,一个网页主要由三部分组成:结构、表现还有行为,而HTML对应的就是结构,我们学习HTML实际上就是学习如何将各种组件组合成一个网页的大致框架。HTML即超文本标记语言,HTML使用标签的形式来标识网页的不同组成成分,超文本即超链接,使用超链接可以从一个页面跳转到另一个页面。

二、最基本的HTML页面


<html>
<head>
 <meta charset="UTF-8">
head>
<body>内容body>
html>

这是一个最基本的HTML页面,其中包含了文件声明 ,< html>、头部< head>,内容< body>。

三、基本标签及作用

doctype:HTML有许多版本,为了让浏览器知道我们是使用哪个版本编写的网页,需要通过doctype来告诉浏览器该网页的版本,我们现在通用的是HTML5版本的声明,即。
< meta>:自结束标签,只有开始没有结束标签,位于文档头部,可提供有关页面的元信息,比如针对搜索引擎的描述和关键词以及文档所使用的字符集等,若文档字符集与浏览器解码字符集不一致会产生乱码。可选属性有name以及content,name值可选description、keyword等,用于告诉搜索引擎该网站的主要内容以及关键字,content为description和keyword的文字表述,当我们搜索某个关键词时,某些含有这些< meta>关键词< /meta>的网页就会被爬取到然后显示出来。meta有一个关键属性为http-equiv,可选值refresh,为网页重定向,我们有时打开某些网站会自动跳转即应用了此属性。
< html>:用于告诉浏览器该文档是用HTML编写的,所有的内容都必须包含进标签中,如果编写过程中有内容没包含进去,在打开网页时浏览器会自动修正文档,不过这样会降低网页性能,因此编写时要尽可能规范。
< head>:包含了网页的元数据,这些内容用户是不可见的,这部分内容是网页为了方便搜索引擎爬取而添加的。

四、语义化标签

语义化标签的作用是告诉搜索引擎被该标签包围的内容的具体职能是什么。
< header>:网页的头部,用与放置一些logo、导航栏、搜素框等内容。
< main>:网页的主体,即网页中最主要的部分,也是产品经理最想呈现给用户的部分。
< footer>:网页的底部,主要放置一些版权信息、其他网站的友情链接等。
< article>:用来放置文章。
< h1>~< h6>:标题,从1到6重要性递减,最重要的部分用h1,可以让浏览器得知各部分重要性。
< hgroup>:标题群,用于多个标题,即正副标题等。
< aside>:放置侧边栏。
值得一提的是,以上这些标签都可以用< div>容器代替,< div>标签只用于存放内容,没有对搜索引擎起到提示作用,他的使用最为普遍。
< strong>:加粗,表强调。
< q>:表引用。
< blockquote>:表块引用。
< span>:用于选中块元素,仅仅表示内容。

五、图片、音视频标签

当我们在网页中要插入图片或者音视频时,可以用以下标签来插入,即:
< img>标签最重要的属性为src属性,用于选择图片路径,alt属性为图片描述,当图片未加载出来时,能看到图片描述。
除此之外,图片的格式也是我们要考虑的一点,一般而言,可供我们选择的图片有gif、jpeg、png三种格式,gif比较小,颜色单一透明,jpeg不透明,而png复杂透明,颜色多样,当效果一致时,我们应选择内存小的,不一致时,用效果好的。
< audio>、< video>分别用于插入音频和视频,可供选择的属性有control以及autoplay,分别用于控制音视频的开始暂停进度以及自动播放。
某些情况下src属性里的文件不可用,我们可以在内部添加< source>属性,用以备选几个文件,某个文件不可用时会自动跳到下一个文件直至找到第一个可用文件,这种方式更为常用。
对于图片路径,某些浏览器版本仅支持base64编码图形,我们要先通过base64加密图片获得编码后将编码写入路径。

六、文件的路径

对于开发者而言,采用相对路径更为便捷,我们用开发工具打开工程,在文件栏可以看到文件位置,./表示当前文件夹,…/表示上级文件夹,以此选择路径
绝对路径为文件的地址,文件位置较相对路径比较繁琐,因此在编写文档时推荐使用相对路径。

七、内联框架

< iframe>用于引入一个外部网站并嵌入我们自己的网页中,现在该标签已经不推荐使用了,可选属性为frameborder,为框架边距,iframe中的内容不会被爬虫抓取,爬虫仅仅能爬取框架,而认为框架里没有内容,因此用得比较少。

八、超链接

< a>用于引入一个超链接,该链接可用于跳转到其他页面,可选属性为herf,属性值为网站链接或者页面路径,#表示页面顶部,#id可用于跳转到页面固定id的位置,即锚点。

你可能感兴趣的:(前端开发学习(day2))