【前端】字节青训营学习笔记-HTML基础_第1页
【前端】字节青训营学习笔记-HTML基础_第2页
【前端】字节青训营学习笔记-HTML基础_第3页
【前端】字节青训营学习笔记-HTML基础_第4页
【前端】字节青训营学习笔记-HTML基础_第5页
已阅读5页,还剩4页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【前端】字节青训营学习笔记-HTML基础

HTML根底

网页三要素

HTML:网页的根本结构

CSS:网页的展示效果

JS:网页的功能与行为

HTML简介

HTML〔HyperTextMarkupLanguage,超文本标记语言〕,用于构建网页的根本结构及其内容的标记语言

超文本:文本中包含指向其他文本的链接

标记语言:将文本以及文本相关的其他信息结合起来,展现出关于文档的结构,如HTML,XML,KML,Markdown等等

HTML文档结构

我的测试站点

我的猫咪脾气暴

HTML文档包含多个HTML元素,元素具备不同的特性

HTML元素=开始标签+结束标签+元素内容

一些元素只有一个标签,如:img,input,br等

HTML元素标签不辨别大小写

元素可以嵌套在其他标签中

元素可以拥有属性,属性包含元素的额外信息

:放在HTML文档最前面,加上之后就会按照W3C的HTML5规范来解析渲染页面:根元素,包含整个页面的内容:对用户不可见,其中包含示例面向搜索引擎的关键字,页面描述、字符编码声明、CSS样式:该元素包含能够被用户访问到的内容,包含文本、图像、视频、游戏、音频等

meta:charset

/name/http-equiv

定义文档字符编码

关键字

页面描述

主要用于移动端,定义设备屏幕上用来显示网页的区域

HTTP头部自定义meta,用于相特定的网站提供一些信息

详情可参照/wiki/MetaExtensions

:页面的标题,显示在浏览器的标签页上

:CSS样式

:

当前页面的图标

链接到样式表

可替换的样式表

使用例如:https://mdn.github.io/css-examples/alt-style-sheets仅在一些特定的浏览器中支持示例火狐浏览器

可执行脚本

属性:

defer:立即下载,延迟执行,表示脚本可以等到dom被完全解析和显示之后在执行,只对外部脚本有效。有defer属性的脚本会阻止DOMContentLoaded事件,直到脚本被加载并且解析完成。

async:立即下载脚本,不阻碍其他操作,比方下载其他资源或者加载其他脚本,只对外部脚本有效

script解析时序图

元素样式

内联元素

只占据它对应标签的边框所包含的空间

只能容纳文本或其他内联元素

只能通过修改水平边距、边框或者行高的方式改变尺寸

常用的内联元素:

:超链接

:换行

:加粗

:标签

:参考引用

:代码片段

块级元素

占据其父元素的整行,总是从新行开始

能容纳其他块元素或者内联元素

可以通过控制宽高、行高、边距、边框等改变尺寸

常用的块级元素:

-

行内块级元素

元素在行内排列,不会独占一行

支持宽高以及垂直边距边框

常用的内联元素:

语义化标签

根据内容的结构,选择适宜的标签构建出便于开发者阅读的可维护性更高的代码结构,同时能够让机器更好的解析。

不适用语义化标签

使用语义化标签叙述

语义化-区块

展现介绍性信息

通常包含一组介绍性或者辅助导航的元素,如标题,Logo,搜索框,作者名称等

不能放在footer,address或者另一个header元素内部

使用例如:

HTML

在当前文档或者其他文档中提供导航链接,如菜单,目录,索引等

用来放置一些热门的链接,不常用的链接通常放到footer里置于底部

使用例如:

HTML

CSS

JS

独立的文档、页面、应用、站点

可独立分配的或者可复用的结构,如论坛的帖子、新闻文章、博客、用户提交的评论、交互式组件等

使用例如:

WeatherforecastforBeijing

15August2008

Rain

16August2008

Periodsofrain

17August2008

Heavyrain

按主题将内容分组,通常会有标题

section通常出现在文档的大纲中

不要把section当作普通容器使用,比方说用于美化页面片段样式,此时用dic更适宜

如果元素里边是独立的整块内容,可独自发布,那么更适合用article

使用例如:

ChoosinganApple

Introduction

ThisdocumentprovidesaguidetohelpwiththeimportanttaskofchoosingthecorrectApple

Criteria

TherearemanydifferentcriteriatobeconsideredwhenchoosinganApple-size,color,firmness,sweetness,tertness...

表示一个和其余页面内容几乎无关的局部,或者说独自拆出来不会影响整体的内容

通常放在侧边栏用于展示广告、tips、引用内容等

使用例如:

我今天要去加入字节跳动青训营

青训营

青训营是字节跳动技术团队发起的技术系列培训&人才选拔工程

表示最近一个章节的页脚

通常包含该章节的作者,版权数据或者文档链接等信息

footer内的元素不属于章节内容,不包含在大纲中

使用例如:

Postedby:ByteFE

使用语义化标签的案例

语义化标签案例

语义化-分组

/

包裹被独立引用的内容,图标、插图、代码等,通常会有一个标题

与其相关联的图表的表明/标题,通常位于第一个或者最后一个

使用例如:

CatPicture

块级引用元素

cite属性表示该来源的url

使用例如:

WordscanbelikeX-rays,ifyouusethemproperlythey'llgothroughanything

//

用于描述键值对

通常用于元数据、术语定义等场景

使用例如:

Firefox

Afree,opensource,cross-platform,graphicalwebbrowserdevelopedbytheMozillaCorporationandhundredsofvolunteers.

元素通常用于引用作品标题

包括论文,文件,书籍,电影等的引用

机器可读的时间和日期

datetime表示此元素关联的时间日期,假设不指定那么该元素不会被解析为日期

某个人或组织的联系信息

在引用中使用表示需要引起注意

代码片段

免责声明、考前须知

多媒体元素

src属性是必须的,嵌入的文件路径

alt属性包含一条对图像的文本描述,非强制的。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。图像无法加载时,浏览器会在页面上显示alt属性的文本。

decoding解码方式:异步,同步

loading懒加载

使用例如:

元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供相应的图像版本

media属性:依据媒体条件渲染相应的,类似媒体查询

type属性:MIME类型,根据浏览器支持性渲染相应的

使用例如:

音视频

/

src:嵌入视频文件的路径

controls是否展示浏览器自带的控件,可以创立自定义控件

autoplay是否自动播放

source元素表示视频的可替代资源〔不同格式、清晰度、读取失败或无法解码可以依次尝试〕

使用例如:

Sorry,yourbrowserdoesn'tsupportembeddedvideos.

yourbrowserdoesnotsupporttheaudioelement.

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论