HTML核心概念与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/aixintianshideshouhu/article/details/103108998

HTML核心

第一个网页

注释

注释为代码的阅读者提供帮助，注释不参与运行

在HTML中，注释采用如下格式书写

<! -- 注释内容 -->

vscode中的注释快捷键：crtl + /

元素

其它叫法：标签、标记

<a href="www.baidu.com">百度</a>

整体：element (元素)

元素 = 起始标记 (begin tag) + 结束标记 (end tag) + 元素内容 + 元素属性

属性 = 熟悉名 + 属性值

属性的分类：

局部属性：某些元素特有的属性
全局属性：所有元素通用

<meta charset="UTF-8">

有些元素没有结束标记，这样的元素叫做：空元素

空元素的两种写法：

<meta charset="UTF-8>
<meta cahrset="UTF-8" />

元素的嵌套

元素可以互相嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)

标准文档结构

HTML：页面、HTML文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5

不写文档说明，将导致浏览器进入怪异渲染模式

<html lang="en">

</html>

根元素，一个页面最多只能有一个，并且该元素是所有元素的父元素或祖先元素。

HTML5版本中没有强制要求书写该元素

lang属性：language，全局属性，表示该元素内部使用的文字是使用那一种自然语言书写而成的。

<head>

</head>

文档头，文档头部的内容，不会显示到页面上。

<meta>

文档的元数据：附加信息。

<meta charset="UTF-8">

charset：指定网页内容编码

计算机中，低压电 (0-2 V) 0，高压电 (2-5 V) 1

表示2，使用10

计算机中只能存储数字

文字和数字对应

比如：a – 97，A – 65

该字典叫做字符编码表，如GB2312、GBK

UTF-8 是 Unicode编码的一个版本

<meta name="viewport" content="width=device-width, initial-scale=1.0">

适配手机端

<meta http-equiv="X-UA-Compatible" content="ie=edge">

解决IE浏览器的问题：告诉浏览器，如果你是IE浏览器，建议使用edge内核

<title>Document</title>

网页标题

<body>
</body>

文档体：页面上要参与显示的元素都放在文档体中

语义化

什么是语义化

每一个HTML元素都有具体的含义
a元素：超链接
p元素：段落
h1元素：一级标题
所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定
因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？

为了搜索引擎优化 (SEO)
搜索引擎：百度、搜搜、Bina、Google
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。

2.为了让浏览器理解网页
阅读模式、语音模式

文本元素

HTML中支持的元素：HTML5元素周期表

HTML5元素周期表

h

标题：head

h1~h6：表示一级标题到六级标题

<!--
	crtl + enter：从当前行切换到下一行
	crtl + shift + enter：从当前行切换到上一行
-->

<!--
	快速生成代码
	h1$*6>{$标题}
-->

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

p

段落：pararaphs

lorem，乱数假文，没有任何实际含义的文字

<!--
	p*2>loem1
-->

<p>Lorem.</p>
<p>Sint!</p>

span [无语义]

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行 (块级元素)，而某些元素不会(行级元素)
到了HTML5，已经弃用这种说法，其被内容类别代替

三原色包含：<span style="color:red">红</span>、<span style="color:green">绿</span>、<span style="color:blue">蓝</span>

pre

预格式化语言

空白折叠：在源代码中的连续空白字符 (空格、换行、制表)，在页面显示时，会被折叠为一个空格。

例外：在pre元素中的内容不会出现空白折叠。

在pre元素内部出现的内容，会按照源代码的格式出现在网页中。

<pre>
      1111111
      11   11
      11   11
      1111111
</pre>

<pre>
      var i = 2;
      if{i}{
          console.log{i}
      }
</pre>

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的CSS属性。

显示代码时，通常外面嵌套code元素，code表示代码区域。

<code>
        <pre>
            var i = 2;
            if{i}{
                console.log{i}
            }
        </pre>
</code>

HTML实体

实体字符，HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

&单词;
&#数字;

小于符号 <

&lt;
&#60

大于符号 >

&gt

空格符号

&nbsp;
non-breaking space

版权符号 ©

&copy;

&符号

&amp;

a元素

超链接

href属性

hyper reference (引用)：通常表示跳转地址。

普通链接：跳转到地址

<a href="https://www.douyu.com">百度</a>

锚链接：跳转到某个锚点。
id属性：全局属性，表示元素在文档中的唯一标号

    <!-- 目录 -->
    <!-- 
        a[href="chapter$"]*6>{章节$}
     -->
    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    <a href="#chapter5">章节5</a>
    <a href="#chapter6">章节6</a>

     <!--
         ((h1[id="chapter$"]>{章节$})+p>lorem30)*6
    -->
   <h2 id="chapter1">章节1</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur at ratione quia sed molestiae nulla necessitatibus, voluptate ipsum illo quaerat voluptatem aliquid perferendis similique rem reprehenderit quae vitae eveniet suscipit. Perspiciatis, tempora atque non velit magnam accusantium ut sunt suscipit nulla dolore earum expedita itaque beatae minima necessitatibus laudantium quam. Consectetur veritatis inventore dolore accusamus est, commodi consequatur error voluptatibus vel rem ullam enim eum, architecto saepe placeat hic repellendus! Dolore, nostrum necessitatibus, error repudiandae blanditiis ducimus hic deserunt molestias unde iste debitis reprehenderit ea culpa similique? Maxime repellendus voluptas omnis iure corrupti accusamus, voluptates tenetur, nihil, distinctio quas error.</p>
   <h2 id="chapter2">章节2</h2>
   <p>Facilis ipsa repudiandae mollitia modi ea sint accusamus molestiae ratione odio velit aut, necessitatibus dolorum deserunt? Illum quo id ducimus illo odio tenetur quisquam et placeat ullam, veniam, deleniti, possimus deserunt nisi sit molestias facere! Vero, ea minima. Cum eligendi cupiditate maiores eaque iusto in ab laboriosam fugit iste quas aliquid at tempora harum, recusandae laborum ea alias quam ipsum? Modi culpa soluta aliquam dolores temporibus corrupti distinctio perferendis officia vero laboriosam, et asperiores esse animi illum blanditiis. Distinctio aperiam quia unde ad illum fugiat cupiditate, minus sapiente natus doloremque dolor nemo labore dolores dicta officiis quod sed voluptates possimus!</p>
   <h2 id="chapter3">章节3</h2>
   <p>Aliquid laborum id, voluptas vitae doloremque temporibus fuga unde, consectetur vel dicta maxime consequuntur totam veniam, magnam voluptates molestias? Eius veniam ducimus, a architecto sequi corrupti commodi blanditiis delectus culpa quaerat, molestias doloremque sapiente accusantium enim omnis sit autem doloribus, non esse nemo voluptatibus eligendi quod. Amet repellendus ullam beatae repellat, tempora, cupiditate quae sed sit alias voluptatem accusantium maiores, corporis tempore et adipisci aliquam aliquid quidem accusamus reprehenderit maxime eos placeat at atque ipsum? Suscipit asperiores praesentium laborum omnis, voluptate possimus aspernatur nobis perspiciatis, illum consequatur distinctio nulla inventore natus hic. Dolore quaerat reiciendis rerum at? Laborum, amet dicta.</p>
   <h2 id="chapter4">章节4</h2>
   <p>Ipsam cumque voluptates unde voluptate odio deleniti corporis quos repudiandae! Consectetur qui odit tenetur deserunt sint, enim, laudantium culpa eius magni accusantium neque dolorum quaerat non alias obcaecati est dicta, voluptates optio corrupti. Quibusdam ratione rem nostrum impedit quae pariatur accusamus dolore eum veritatis saepe! Ex ullam ipsa placeat ratione eligendi, fugit quod adipisci labore ab in dolores, numquam pariatur consequuntur a, maxime assumenda illum laboriosam explicabo dolorem sit nihil officia maiores cum? Quisquam porro odio recusandae, aspernatur repellat, ratione perspiciatis vel hic quis velit quibusdam numquam aliquam illum, mollitia deserunt. Quas incidunt recusandae quasi obcaecati hic voluptatibus distinctio molestias.</p>
   <h2 id="chapter5">章节5</h2>
   <p>Dolorem perspiciatis, soluta sed suscipit aperiam recusandae labore omnis quam harum delectus voluptatem, laudantium tenetur, temporibus dicta accusantium et aliquid neque eaque. Sunt nam quidem, sed quibusdam dolores dicta quis enim commodi adipisci, accusantium in corporis amet? Tempore possimus rem aspernatur placeat necessitatibus ea cum ex consequuntur eius doloribus velit quisquam modi laudantium dignissimos similique, architecto nulla reiciendis enim sunt! Dolore eligendi corporis blanditiis tempora, asperiores numquam explicabo necessitatibus nisi! Dolores in aut consectetur. Ex nobis quasi dicta autem alias, est harum perspiciatis dolores ullam recusandae rerum qui velit incidunt repellendus corrupti placeat, quam obcaecati maxime tenetur beatae. Autem, aperiam?</p>
   <h2 id="chapter6">章节6</h2>
   <p>Repellendus magnam, praesentium aspernatur maiores debitis, optio asperiores sit aut eveniet explicabo necessitatibus quas tempore fugit non fuga minus molestiae rem. Repellat corporis earum et? Aspernatur tenetur voluptatum possimus earum odio libero nulla, maiores pariatur doloremque dignissimos? Minus, pariatur sapiente, sint natus dolorum saepe reiciendis culpa rerum totam illum expedita autem doloremque repellendus rem consectetur consequatur debitis illo fugiat iste nesciunt ut quos et, corporis ducimus! Sint, saepe. Explicabo veniam ea dicta, voluptatum hic illo velit, dolores harum praesentium deserunt sapiente modi neque expedita! Reprehenderit ducimus temporibus quis provident. Ipsam porro quis molestias. Expedita ex modi a porro, voluptatum eum.</p>
   <a href="#">回到顶部</a>

从当前网页跳转到另外一个网页中的锚点

	<a href="锚链接.html#chapter3">跳到锚链接页面的第三章</a>

功能链接
点击后，触发某个功能

执行js代码，javascript

	<a href="javascript:alert('你好!')">
	        弹出：你好！
	</a>

发送邮件，mailto
要求用户计算机上安装有邮件发送软件：exchange

    <a href="mailto:222222@qq.com">
        点击给我发送邮件
    </a>

拨打电话，tel
要求用户计算机上安装有拨号软件，或使用的是移动端访问。

    <a href="tel:123456">
        点击，给我拨打电话
    </a>

target属性

表示跳转窗口位置。

taret的取值：

_self：表示在当前窗口页面中打开，默认值
_blank：在新窗口中打开

路径的写法

站内资源和站外资源

站内资源：当前网站的资源。
站外资源：非当前网站的资源。

绝对路径和相对路径

站外资源：绝对路径
站内资源：相对路径

绝对路径

绝对路径的书写格式：

url地址

协议名:.//主机号:端口号/路径
schema;//host:port/path

协议名：http、https、file

主机名：域名、IP地址

端口号：如果协议是http协议，默认端口号是80；如果协议是https协议，默认端口号是443；

当前跳转目标和当前页面的协议相同时，可以省略协议。

    <a href="https://www.renren.com/">
        人人网
    </a>

相对路径

以./开头，./表示当前资源所在目录

可以书写../表示返回上一级目录

相对路径中./可以省略

   <a href="./subhtmls/a.html">
        subhtmls -> a.html
   </a>

图片元素

img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

<a href="http://www.baidu.com" target="blank">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1167115201,1022312245&fm=26&gp=0.jpg" alt="这是百度图标的图片">
   </a>

和a元素联用

   <a href="http://www.baidu.com" target="blank">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1167115201,1022312245&fm=26&gp=0.jpg">
   </a>

和map元素

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具。

px、pxcook

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素：figcaption

    <figure>
        <a href="http://www.baidu.com" target="_blank">
            <img usemap="#solarMap" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1810263825,3341516529&fm=26&gp=0.jpg">
        </a>
        <figcaption>
            <h2>百度图标照片</h2>
        </figcaption>
        <p>
            百度
        </p>
    </figure>

    <map name="solarMap">
        <!-- 
            shape:形状  coords:坐标  href：点击形状的坐标地址
            alt:当图片不能显示时，显示的文字。  target:跳转窗口位置
         -->
         <!-- 
            circle-圆形，告诉圆心坐标和圆的半径
          -->
        <area shape="circle" coords="122,148,50" href="https://www.douyu.com/" target="_blank">
        <!-- 
            rect-矩形，告诉矩形左上角坐标和右下角坐标
         -->
         <area shape="rect" coords="115,251,153,293" href="https://www.qq.com/" target="_blank">
         <!-- 
            poly-多边形，逆时针依次告诉各个点的坐标
          -->
        <area shape="poly" coords="0,0,0,50,50,50,50,0" href="http://www.renren.com/" target="_blank">
    </map>

多媒体元素

video

video 视频

audio 音频

controls：控制控件的显示，取值只能为controls

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性。

布尔属性，在HTML5中可以不写属性值。

autoplay：布尔属性，自动播放。

muted：布尔属性，静音播放。

loop：布尔属性、循环播放。

audio

和视频安全一致

关于兼容性

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致

在互联网中，音频格式一般是mp3，视频一般格式是mp4、webm

    <video autoplay controls style="width:1000px;">
        <source src="./video/test.mp4">
        <source src="./video/test.webm"> 
        <p>
            对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
        </p>
    </video>

列表元素

有序列表

ol：ordered list

type属性：控制前面的标志，建议使用CSS来控制
reversed属性：倒序显示(语义化)

li：list item

    把大象装冰箱，总共分几步？
    <ol type="A" reversed>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
    </ol>

无序列表

把ol改成ul

ul：unordered list

    XXX美女择偶条件：
    <ul>
        <li>有责任心</li>
        <li>会家务</li>
        <li>孝敬老人</li>
        <li>年薪30万</li>
    </ul>

无序列表常用语制作菜单或新闻列表

定义列表

通常用于一些术语的定义

dl：definition list

dt：definition title

dd：definition descripition

    <dl>
        <dt>HTML</dt>
        <dd>
            超文本标记语言，xxxxx
        </dd>

        <dt>元素</dt>
        <dd>
            组成HTML文档的单元，每个xxx
        </dd>
    </dl>

容器元素

容器元素：该元素代表一个区域，内部用于放置其它元素。

div元素

没有语义

    <div>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=331313560,2042471428&fm=26&gp=0.jpg" alt="皮卡丘">
    </div>
    <div>
        <ul>
            <li>Lorem.</li>
            <li>Id!</li>
            <li>Exercitationem?</li>
            <li>Veniam.</li>
        </ul>
    </div>

    </div>

    <div>

    </div>

    <div>

语义化容器元素

在HTML5中提出了许多语义化容器元素

header：通常用于表示页头，也可以用于表示文章头部

footer：通常英语表示页脚，也可以用于表示文章头部

article：通常用于表示正片文章

section：通常用于表示文章章节

aside：通常用于表示侧边栏

   <header>
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>                                                       
        </div>
    </header>

    <article>
        <header>
            <h1>硅谷项目管理之道</h1>
            <div></div>
        </header>
        
        <section>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat, eius?</p>
            <p>Mollitia id ex praesentium facere sed rerum nisi, voluptate eos?</p>
            <p>Neque mollitia quibusdam exercitationem porro ducimus repudiandae? Ad, quae aliquid!</p>
        </section>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, accusantium?</p>
            <p>Voluptas consectetur nostrum totam, placeat delectus ratione nulla praesentium sequi!</p>
            <p>Optio quaerat numquam ducimus labore nemo blanditiis expedita commodi in.</p>
        </section>
        <section>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, accusantium?</p>
                <p>Voluptas consectetur nostrum totam, placeat delectus ratione nulla praesentium sequi!</p>
                <p>Optio quaerat numquam ducimus labore nemo blanditiis expedita commodi in.</p>
        </section>
    </article>

    <aside>
		侧边栏
    </aside>

    <footer>

    </footer>