HTML基础

网页三要素

HTML:网页的基本结构

CSS:网页的展示效果

JS:网页的功能与行为

HTML简介

HTML(HyperText Markup Language,超文本标记语言),用于构建网页的基本结构及其内容的标记语言

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

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

HTML文档结构

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>我的测试站点</title>

    </head>

    <body>

        <p>

            我的猫咪脾气暴

        </p>

        <img src="cat.png" alt="猫咪照片" />

    </body>

</html>

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

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

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

HTML元素标签不区分大小写

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

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

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

<head>

meta : charset  / name / http-equiv

<meta charset="utf-8"> 定义文档字符编码

<meta name="keywords" content="HTML"> 关键字

<meta name="description" content="HTML 基础"> 页面描述

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1.0"> 主要用于移动端,定义设备屏幕上用来显示网页的区域

<meta http-equiv="expires" content="31 Dec 2021">HTTP头部自定义meta,用于相特定的网站提供一些信息  详情可参照 https://wiki.whatwg.org/wiki/MetaExtensions

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

<style>:CSS样式

<link>:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 当前页面的图标

<link rel="stylesheet" href="my-css-file.css"> 链接到样式表

<link href="fancy.css" rel="alternate stylesheet" tyle="text/css" title="Fancy">可替换的样式表

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

<script>可执行脚本

<script type="text/javascript" src="javascript.js">

属性:

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

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

script解析时序图

<body>

元素样式

内联元素

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

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

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

常用的内联元素:

<a>:超链接

<span> :

<br>:换行

<i>:

<em>:

<strong>:加粗

<label>:标签

<q>:

<var>:

<cite>:参考引用

<code>:代码片段

块级元素

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

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

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

常用的块级元素:

<div>

<p>

<h1>-<h6>

<ol>

<ul>

<dl>

<table>

<address>

<blockquote>

<form>

行内块级元素

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

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

常用的内联元素:

<img>

<input>

<td>

语义化标签

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

不适用语义化标签

<div></div>

<div>

    <diy>

        <div>

            <img>

         <div class="figcapt ion"></div>

        </div>

    </div

</div>

<div></div>

使用语义化标签表达

<header></header>

<section>

    <article>

     <figure>

            <img>

         <figcaption></figcaption>

        </figure>

    </article>

</section>

<footer></footer>

语义化-区块

<header>

展现介绍性信息

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

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

使用示例:

        <header>

            <h1>HTML</h1>

            <p>

                <time pubdate datetime="2021-08-15"></time>

            </p>

        </header>

<nav>

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

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

使用示例:

<nav>

    <ol>

        <li><a href="#">HTML</a></li>

        <li><a href="#">CSS</a></li>

        <li><a href="#">JS</a></li>

    </ol>

</nav>

<article>

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

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

使用示例:

    <article>

        <h1>Weather forecast for Beijing</h1>

        <article>

            <h2>15 August 2021</h2>

            <p>Rain</p>

        </article>

        <article>

            <h2>16 August 2021</h2>

            <p>Periods of rain</p>

        </article>

        <article>

            <h2>17 August 2021</h2>

            <p>Heavy rain</p>

        </article>

    </article>

<section>

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

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

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

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

使用示例:

    <h1>Choosing an Apple</h1>

    <section>

        <h2>Introduction</h2>

        <p>This document provides a guide to help with the important task of choosing the correct Apple</p>

    </section>

    <section>

        <h2>Criteria</h2>

        <p>There are many different criteria to be considered when choosing an Apple -size,color,firmness,sweetness,tertness...</p>

    </section>

<aside>

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

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

使用示例:

    <p>我今天要去参加字节跳动青训营</p>

    <aside>

        <h4> 青训营 </h4>

        <p>青训营是字节跳动技术团队发起的技术系列培训&人才选拔项目</p>

    </aside>

<footer>

表示最近一个章节的页脚

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

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

使用示例:

    <footer>

        <p>Posted by:ByteFE</p>

        <p><time pubdate datetime="2021-08-15"></time></p>

    </footer>

使用语义化标签的案例

语义化标签案例

语义化-分组

<figure>/<figcaption>

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

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

使用示例:

    <figure>

        <img src="cat.jpeg" alt="a cat">

        <figcaption>Cat Picture</figcaption>

    </figure>

<blockquote>

块级引用元素

cite属性表示该来源的url

使用示例:

    <blockquote cite="http://www.huxley.net/bnw/four.html">

        <p>Words can be like X-rays, if you use them properly they'll go through anything</p>

    </blockquote>

<dl>/<dt>/<dd>

用于描述键值对

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

使用示例:

    <dl>

        <dt>Firefox</dt>

        <dd>

            A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

        </dd>

    </dl>

<cite>

<cite>元素通常用于引用作品标题

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

<time>

机器可读的时间和日期

datetime表示此元素关联的时间日期,若不指定则该元素不会被解析为日期

<p><time pubdate datetime="2021-08-15"></time></p>

<address>

某个人或组织的联系信息

<mark>

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

<code>

代码片段

<small>

免责声明、注意事项

多媒体元素

<img>

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

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

decoding解码方式:异步,同步

loading懒加载

使用示例:

<img src="smiley.gif" alt="Smiley face">

<picture>

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

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

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

使用示例:

    <picture>

        <source media="(min-width:600px)" srcset="mdn-logo-wide.png">

        <img src="mdn-logo-narrow.png" alt="MDN">

    </picture>

    <picture>

        <source srcset="xxx.webp" type="image/webp">

        <img src="xxx.jpg" decoding="async" loading="lazy">

    </picture>

音视频

<video>/<audio>

src:嵌入视频文件的路径

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

autoplay是否自动播放

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

使用示例:

    <video controls>

        <source src="/flower.webm" type="video/webm">

        <source src="/flower.mp4" type="video/mp4">

        Sorry,your browser doesn't support embedded videos.

    </video>

    <audio controls src="xxx.mp3">

        your browser does not support the <code> audio </code> element.

    </audio>

    <video src="friday.mp4">

        <!-- 字幕文件 -->

        <track default kind="captions" srclang="en" src="friday.vtt"/>

        sorry ,your browser does not support embedded video.

    </video>

HTML解析

DOM(文档对象模型):对节点结构化表述,并定义了一种方式可以使程序对该结构进行访问,将web页面和脚本语言链接起来

构建DOM树

样式计算,构建CSSOM树

将DOM与CSSOM组合成一个Render树

布局计算

绘制

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
昆明综合高中|昆明综合高中
昆明综合高中
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部