语义化、核心常用元素

语义化
- 什么是语义化
- 为什么需要语义化？
文本元素
- h
- p
- span【无语义】
- pre
a元素
- href属性
- target属性
图片元素
- img元素
- 和a元素联用
- 和map元素
- 和figure元素
多媒体元素
- video
- audio
列表元素
- 有序列表
- 无序列表
- 定义列表
容器元素
- div元素
- 语义化容器元素
==元素包含关系==

语义化

什么是语义化

每一个HTML元素都有具体的含义

a元素：超链接
p元素：段落
h1元素：一级标题

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

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

为什么需要语义化？

为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

为了让浏览器理解网页

阅读模式、语音模式

文本元素

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

h

标题：head

h1 ~ h6：表示1级标题 ~ 6级标题

p

段落，paragraphs

lorem，乱数假文，没有任何实际含义的文字，常用于需要大量文字内容来做测验时

span【无语义】

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

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）
到了HTML5，已经弃用这种说法。现在由css来控制叫做块盒和行盒。

pre

预格式化文本元素

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空白折叠</title>
</head>
<body><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat a modi voluptatibus nobis, similique, blanditiis accusantium et, necessitatibus perspiciatis officiis doloribus odio. Tenetur ut temporibus,velit illo incidunt et delectus.</p>
</body>
</html>

效果：

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

在pre元素内部出现的内容，会按照源代码格式显示到页面上。
例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是pre元素的页面</title>
</head>
<body><pre style="font-family:微软黑雅">Lorem ipsum dolor sit ametconsectetur adipisicing elit. Vero consectetur aperiam suscipit perspiciatis tenetur beatae minima ab odio pariatur totam dolore illo modieaque, iure reprehenderit repudiandae consequatur quia? Assumenda!</pre></body>
</html>

效果:

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

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

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

a元素

超链接

<a href="" target=""></a>17

href属性

hyper reference：通常表示跳转地址

普通链接
锚链接:一般跳转的时网页内具体内容的位置

id属性：全局属性，表示元素在文档中的唯一编号

 <div class="ul-color"><ul><li><a href="#chapter1"><span height=50px width=100px>章节1</span></a><a href="#chapter2">章节2</a><a href="#chapter3">章节3</a><a href="#chapter4">章节4</a></li><li><atarget="_blank"href="https://www.baidu.com/">百度一下</a></li></ul></div><div><h1 class="position" id="chapter1">章节1</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae rem eaque earum tempore! Aliquam eum labore numquam animi architecto eos natus praesentium sed ipsum temporibus accusamus, dolor, blanditiis pariatur atque saepe ab! Commodi reiciendis ut nobis enim dolores. Id, ut nisi! Quia voluptatum animi nisi repudiandae quam, quis accusamus corrupti esse quaerat temporibus, suscipit quae nulla sed! Illo veritatis quibusdam quo doloremque totam consectetur non aut est dicta. Delectus quia, fugit recusandae doloribus esse rerum natus voluptatum sed unde quos sequi culpa est ex earum! Sit aut nulla excepturi maiores. Quidem nisi ipsum voluptatum minus laborum corrupti doloremque nihil ducimus odio. Est sed delectus expedita! Excepturi, enim repudiandae debitis molestiae fugiat dolore quo tenetur, neque omnis tempora doloremque. Porro eligendi ratione amet, molestias magnam quaerat eveniet totam nulla tenetur quisquam illo neque praesentium perferendis harum ipsum blanditiis officiis accusantium? Itaque ullam consequatur, ratione corrupti quisquam porro doloribus ipsa quasi reprehenderit aliquid nesciunt accusantium nisi molestiae. Porro, aliquid saepe quisquam et hic debitis aut, at suscipit esse ut minima eum expedita incidunt officia, inventore quasi tempora vel magni nisi illum cum reprehenderit tenetur officiis? Numquam, natus est? Odio consequuntur sit, quam molestias, iure suscipit nulla iusto magnam architecto qui saepe libero assumenda repellat incidunt cumque minus modi? Hic labore rerum, veniam qui nulla quidem velit nobis mollitia cumque praesentium itaque adipisci temporibus autem amet! Animi vero adipisci quod aliquam delectus. Fugiat nulla dolor inventore laudantium deserunt asperiores omnis maxime a expedita quae quod fuga laborum non accusamus minus perspiciatis voluptates natus officia reprehenderit repudiandae, quia, repellat error in? Eveniet, repellendus quas optio adipisci aliquam qui repudiandae omnis velit beatae, autem enim amet saepe culpa, placeat inventore esse voluptatibus vero fugit exercitationem. Esse ipsa reprehenderit adipisci commodi praesentium delectus enim, quisquam ullam illum quibusdam tempora nobis deleniti id? Consequuntur nesciunt repellendus nihil, esse exercitationem odio reprehenderit dolores deleniti at atque? Consequuntur repudiandae assumenda, laborum sapiente facere quo itaque nemo ipsum doloremque deserunt possimus minus aut officia molestias. Eos hic mollitia sed quibusdam velit, voluptas sunt optio dicta, accusamus accusantium perspiciatis! Voluptatum praesentium asperiores beatae ab esse vero ut voluptatem amet possimus labore, illo eveniet reiciendis aperiam architecto iusto doloremque accusantium unde maxime maiores illum sit. Similique alias iste odio, dolorem provident voluptates error molestias, libero in asperiores placeat esse voluptatum quisquam doloribus temporibus rerum eum quam nemo harum, magnam inventore repudiandae labore! Odio quidem accusantium illum ipsa quia quis quas magni ea, mollitia ullam, architecto asperiores tenetur non fugiat quae cupiditate aspernatur culpa alias repellendus vitae hic aperiam. Tempora nulla necessitatibus eos laboriosam corporis hic commodi quo deserunt voluptas nihil sint perferendis ut corrupti possimus a unde iure praesentium porro, quibusdam, vitae similique. Natus, harum quia? Expedita explicabo odio veniam error, officia impedit similique voluptas! Delectus tempore, quo sunt possimus fugit perferendis accusantium in facilis illo nulla totam dolore ullam facere autem asperiores debitis, impedit voluptatum eum, repudiandae veritatis! Cumque deleniti repudiandae quo et esse excepturi sapiente amet incidunt, necessitatibus totam dolor voluptatibus voluptatum itaque omnis eligendi. Minima, possimus saepe! Doloribus, enim quisquam ex neque officiis fugit assumenda, beatae fugiat, molestiae quas iusto porro dolorum. Explicabo vel autem odio, dolorum ex dignissimos molestias quia corrupti repudiandae necessitatibus fugiat facilis recusandae. Fugit quos totam quo iste. Perspiciatis nam totam sint autem nesciunt pariatur eaque recusandae explicabo magni cumque commodi eligendi voluptatem possimus atque vel, assumenda reiciendis sit tempora sed vitae, accusantium veniam quisquam qui. Tempore beatae doloribus, delectus sunt in accusamus laudantium ut amet rem, magnam necessitatibus repudiandae quo corporis pariatur laborum alias veritatis repellendus modi aliquam nihil maxime vero. Sunt at minus ipsa fugiat, aliquam tempore molestias maiores est cumque quidem quisquam repellendus maxime nam dolore. Dolorem magni dolores nostrum, dolorum veritatis repellat neque soluta. Ducimus, voluptas, enim perferendis nemo rem, dolore commodi molestias asperiores dolor qui eum eveniet? Nam, commodi quaerat sed aliquam doloremque, accusantium sapiente molestiae vel laudantium, debitis dolorum non excepturi vitae! Fugiat sit dolore ex! Beatae, quasi, vero excepturi nam placeat repellat consequatur aperiam explicabo deserunt quae nemo consequuntur, dolor in at laboriosam labore quod facere facilis ducimus. Et dicta, dignissimos quas ipsa mollitia in fugiat dolorum, ipsam magni, amet sequi voluptatibus? Saepe blanditiis libero itaque atque a laboriosam nulla inventore autem recusandae, iure quibusdam quasi, repellat consectetur vel, laudantium omnis pariatur repudiandae rem debitis aperiam ipsa vero asperiores delectus! Eos adipisci enim, officia atque fugiat hic ducimus, laudantium ea inventore nihil dignissimos temporibus aliquid minus. Nulla vero modi soluta nihil deserunt accusamus, quisquam, illum ratione dolores reiciendis id voluptates ducimus. Eaque reiciendis, voluptas pariatur laboriosam a porro maiores at similique consectetur vel esse, officia sint provident totam deserunt in laborum, maxime eum incidunt culpa hic dolores ut ducimus excepturi! Veniam earum similique suscipit, quam vitae aperiam ipsam illum. Voluptatibus eaque optio, hic, dignissimos dolores repellendus dolorum autem natus enim nesciunt nostrum, quae assumenda. Quisquam quae, officiis, optio voluptate autem dolorum earum minus nemo aliquid, nam totam id ducimus. Rem, corrupti quam sit quibusdam dignissimos reprehenderit provident aliquid facere ratione ab eveniet ad quisquam suscipit quia cumque at excepturi molestiae non! Cupiditate minima id voluptatibus quas aspernatur similique odit suscipit fugit itaque nobis molestias delectus blanditiis doloremque excepturi ullam, ratione culpa sunt! Nostrum dolore tempora, cupiditate officia veniam quaerat dicta voluptatibus cum suscipit? Odio quibusdam alias aliquid velit, qui earum. Error, corporis iure. Assumenda sit voluptatibus molestias, ipsam a obcaecati. Voluptatum quae eos eum quod ad fuga obcaecati molestias, sunt ab cupiditate eligendi alias amet sed tenetur maiores unde quidem quo modi quasi suscipit minus. Quae id eius labore repudiandae laboriosam ab ex! Voluptatem natus quae saepe alias, voluptas dolorem! Suscipit dolor officia vel eaque. Perferendis quidem suscipit exercitationem laboriosam. Commodi, error distinctio? Veniam autem laudantium ipsum? Placeat nesciunt doloremque minima eum. Magnam voluptates voluptas iure asperiores ratione corporis? Deleniti quam maxime minima adipisci, quaerat optio nostrum perferendis. Veritatis voluptates blanditiis eveniet quibusdam atque harum sequi doloribus ex consequatur suscipit, quidem optio cum expedita laudantium pariatur aspernatur mollitia consequuntur commodi. Porro ipsum nostrum unde excepturi aspernatur recusandae consectetur commodi non beatae. Maiores ipsum quam eligendi et ad tempora.</p><h1 class="position" id="chapter2">章节2</h1><p>Ratione distinctio illum earum minima commodi quae molestiae repellendus cumque enim, ex laborum culpa vitae maiores possimus quidem! Aspernatur velit harum optio vero odit unde natus illum, quidem alias dolore accusamus quia ab veniam beatae amet. Quae omnis, blanditiis architecto deleniti corporis non dolorum, fugiat sit eius amet nobis illum dolor animi iste nihil velit ratione quis! Veritatis, commodi dolores quas impedit sequi obcaecati distinctio eaque ipsam iusto itaque, dicta voluptatem illum rem architecto quibusdam cumque inventore optio? Accusantium ratione explicabo rem, fuga labore eius deleniti voluptatibus aut ex sint maxime iusto dolorem rerum praesentium? Possimus quam sequi alias a? Eum neque facere delectus voluptatem amet vel rem fuga quos. Et esse inventore dolorum sequi ut cumque id tenetur quod, sit minus, tempora, blanditiis voluptatem nulla quasi atque velit perspiciatis quam at. Officiis dolorem itaque voluptas quidem modi beatae voluptatum nemo, vitae nam explicabo iure rerum? Omnis ipsam explicabo voluptates cupiditate libero maxime soluta, temporibus assumenda sapiente autem debitis labore ab qui quam necessitatibus aliquid inventore quia modi accusantium saepe molestiae numquam? Necessitatibus laboriosam voluptatibus ratione totam aut optio quam eaque, officia dolores ab, iure, at fugit incidunt temporibus repellendus quibusdam error mollitia velit nostrum. Impedit consequuntur sed placeat, iure quos, nesciunt velit animi iste libero qui beatae amet, accusamus voluptate? Voluptatem debitis id cum voluptatibus adipisci doloremque consequatur consequuntur sed ipsum sint facere beatae, iusto excepturi laudantium repellendus tempore eum perspiciatis hic ad officiis consectetur optio in quos? Ut aliquam voluptatem harum maxime, laboriosam error quam dolore aperiam similique ex velit, atque commodi soluta nostrum eaque animi sapiente porro? Eum voluptatum praesentium harum, aut omnis, non illum veritatis distinctio quod animi placeat debitis veniam repellendus et? Consequuntur, illum delectus, odio illo nesciunt esse quos corrupti quae vitae doloribus veritatis assumenda earum dolor cumque itaque ratione ipsa expedita repellat a laborum. Ipsum quaerat corporis ab! Tempora dolorem voluptates inventore officia consequatur aperiam, ducimus cupiditate quae tenetur quod necessitatibus repudiandae similique. Omnis repellendus vitae, sed perferendis libero quisquam ipsam! Cumque vel fuga exercitationem qui deserunt. Earum, quaerat corporis fugiat reprehenderit saepe ea eum itaque maiores atque libero sequi. Laudantium error culpa veritatis assumenda repudiandae voluptatibus cupiditate nisi molestiae aperiam ducimus, deserunt reprehenderit perspiciatis quam, dignissimos deleniti expedita sint iure dolor nulla, ipsam fuga laboriosam dolorum cum eius. Commodi doloribus eos quos modi tenetur ducimus incidunt architecto, nesciunt enim debitis quis dolores aut dolor ratione explicabo totam quia! Ratione repellat exercitationem fugit. Cumque unde et similique itaque, ratione tempore aspernatur doloremque sequi in expedita debitis illum mollitia placeat eum. Unde exercitationem ipsam vero, excepturi ab cum quidem error delectus soluta tempora nostrum inventore perferendis animi, earum, voluptatem impedit quaerat dolorum! Voluptatibus id obcaecati perferendis nesciunt aspernatur veritatis earum doloremque deleniti commodi tempora dolor unde, quibusdam itaque delectus excepturi mollitia officiis dolorem minus est. Adipisci, explicabo itaque eaque velit repudiandae nobis quisquam, molestias et doloribus iusto pariatur nostrum, ea ex! In labore distinctio deserunt nobis, veritatis architecto cumque eveniet sint dicta temporibus ducimus. Accusamus, quam magni pariatur labore mollitia possimus quae suscipit necessitatibus quia vitae fugiat corporis ipsam ad totam, exercitationem amet ratione alias! Voluptates consequuntur id quidem reprehenderit ipsum voluptatum quasi, repellendus fuga consequatur molestias ducimus dignissimos, corrupti nihil saepe asperiores praesentium consectetur error. Ullam nulla sed labore assumenda sit? Rerum, tempora nemo! Provident ipsa amet iure dolor quibusdam magni sunt commodi repellendus aliquid quos nihil deleniti quis asperiores voluptatem sint voluptates mollitia, eligendi atque perspiciatis! Debitis ex, eum temporibus eveniet iste doloremque quaerat eaque distinctio, libero deleniti qui assumenda iure alias voluptatibus veniam voluptas quidem fuga voluptatum. Laboriosam accusantium corporis deserunt sit libero at nesciunt similique enim corrupti numquam nisi, autem error voluptates ex sequi molestias labore rerum. Dolorum ipsa vitae sint mollitia dicta veniam nobis, sed voluptates asperiores laudantium sit quia nemo fugit officiis delectus blanditiis. Officia perspiciatis doloremque, dicta minima reprehenderit, nulla itaque distinctio sit, et fugiat aliquid ullam quibusdam eos obcaecati tempore quam aspernatur debitis fugit deserunt ipsam laudantium explicabo. Magni cum repudiandae dolor iste odio illum corporis necessitatibus excepturi dolore placeat modi dignissimos, facilis reprehenderit sint. Quia quasi nemo esse beatae, enim nostrum porro. A numquam nisi, minima unde saepe ex odit consequuntur. Id totam eaque dolores, veritatis aspernatur qui perspiciatis quas laborum, quasi neque reiciendis error? Sit aperiam quos saepe tempore quaerat aspernatur dignissimos aliquid laboriosam exercitationem incidunt rerum, aliquam suscipit dolore, et, debitis nobis recusandae? Explicabo voluptatibus nesciunt, perferendis consequatur accusamus quisquam magni dolorum ipsa, odio id blanditiis nulla, perspiciatis eius! Atque quae voluptas, delectus accusamus voluptatibus porro tenetur officia dolorum reiciendis? Id magni repudiandae iure ex explicabo veritatis? Veritatis, atque iste. Natus voluptates saepe sunt facilis in neque ratione perferendis obcaecati, iste, sapiente a. Id fuga sunt excepturi blanditiis a rem laborum esse fugit nostrum officia saepe commodi neque, unde et? Officiis asperiores suscipit nostrum doloribus quam fugit ut sed voluptatum neque assumenda repellendus explicabo eveniet beatae quaerat ipsum minus, nulla obcaecati dicta pariatur. Nobis eos veniam, reprehenderit quod recusandae natus mollitia rerum facere vero similique in, quaerat esse perspiciatis soluta magni deleniti illo maxime suscipit dicta voluptatibus earum molestiae facilis doloremque. Veritatis, blanditiis, ex magni dolores fugiat ipsa, voluptate cum aperiam aspernatur suscipit consectetur sapiente ea molestias. Mollitia ipsam commodi libero rem labore id doloremque. Laboriosam voluptate culpa saepe rerum voluptas soluta inventore, ex numquam quaerat itaque ducimus pariatur consequatur exercitationem a quidem minus odit, facilis doloremque minima! Molestias repellat officia quos dignissimos enim vitae tempore consequuntur itaque voluptatem exercitationem! In vero optio commodi harum officiis impedit, velit reiciendis repellat laboriosam nulla praesentium pariatur, minus deleniti doloremque alias, officia eos cum laborum! Atque totam voluptate ipsa eveniet libero iure corrupti nemo dolor neque, ab enim officia quod minus, debitis dignissimos aliquam fugiat modi obcaecati aut necessitatibus quas deserunt perspiciatis aspernatur. Architecto culpa officia accusamus cum corporis et minima recusandae repellat ex quos quam voluptatum dolores, labore reiciendis! Facilis est sint vero laboriosam eius? Laborum error perferendis nam eius nobis sequi odio? Doloremque alias perferendis neque cupiditate non provident, vel, voluptate excepturi a cum, eveniet esse! Odio laborum magni reprehenderit asperiores itaque, adipisci beatae.</p><h1 class="position" id="chapter3">章节3</h1><p>Ab eaque impedit, dicta odit possimus quidem corporis illum sint facere atque error aliquam earum maiores itaque in commodi minima et corrupti omnis animi inventore nisi? Voluptatem dolor sunt amet consequatur? Explicabo distinctio aliquid a amet quod laborum debitis veniam accusamus ipsum, non corporis odit quidem asperiores sequi accusantium ratione illo repellat delectus placeat dolor iure facilis quasi? Vitae, expedita. Provident, repellat temporibus consequatur modi officia maiores blanditiis quos quod, velit ab nisi vel distinctio, fugit necessitatibus! Sequi aperiam sunt, ratione iusto maiores dignissimos nisi veritatis sed nulla. Assumenda exercitationem beatae nihil laborum. Eligendi nisi aspernatur iste aut culpa asperiores, inventore id placeat veritatis recusandae vero totam ipsam ea ducimus nulla odit reiciendis porro? Sit rem est, enim aliquam dignissimos repudiandae dicta amet consequuntur tempore placeat ratione numquam saepe recusandae inventore perspiciatis commodi deserunt eligendi blanditiis. Ab quo suscipit magni! Iusto dolores accusantium doloribus porro, assumenda reiciendis debitis suscipit culpa molestias explicabo dolorum! Eos reiciendis veniam facilis, at odio, corrupti ipsum aut esse similique cumque sint, adipisci itaque! Delectus quia placeat dicta. Reiciendis perferendis tenetur nesciunt ullam necessitatibus quos? Saepe dignissimos nemo autem id asperiores, reprehenderit debitis commodi iusto aliquid esse sed nisi nam facilis voluptate delectus obcaecati impedit aperiam cumque! Et fugiat placeat tempora itaque voluptate, incidunt, eius, quia culpa deserunt aperiam eveniet omnis magni. Sit officia dignissimos fugit rem voluptatem repellat dolorum temporibus quis consequatur, rerum illum quod eligendi neque. Est laborum eius non quidem nobis ea minus animi enim voluptatibus. Dolorum nesciunt accusantium cupiditate mollitia expedita harum, repellendus, eligendi reiciendis veritatis dolorem cum dicta nemo id similique deserunt! Esse, delectus! Voluptatem alias amet atque vero unde quo possimus magni nam at quaerat blanditiis eius neque dicta quasi suscipit, earum illo nulla libero! Eveniet magni voluptas provident nulla inventore veritatis sequi sed eius quis temporibus? Inventore, nihil culpa tempore reiciendis dolorem delectus fugiat iure suscipit? Obcaecati vero ex illo atque in quaerat officia dicta tenetur sequi? Laboriosam fugit sunt, consectetur debitis cupiditate hic libero cumque neque illum. Quo, repellendus molestias. Aperiam, assumenda asperiores id mollitia sunt nihil expedita temporibus eum rem facilis pariatur, repudiandae aliquam. Architecto eligendi ipsam nisi laudantium, vel nam iure eaque suscipit soluta sunt eveniet dolor aspernatur facere est assumenda minus, nihil laboriosam. Impedit officia harum vero dignissimos beatae fuga. Nobis voluptatem eos quo ut officiis! Amet velit libero nostrum. Eius qui dicta a, fugit distinctio accusantium laboriosam libero corporis quasi id cumque voluptates nesciunt placeat nostrum saepe repudiandae quo praesentium. Alias voluptate tempora in eligendi nam dolorem eius ducimus, voluptatem voluptatibus quas possimus minima id atque placeat quasi saepe mollitia laborum nisi asperiores odit voluptates natus non sunt maiores! Laboriosam, voluptatibus. Ab cumque alias perferendis animi, neque soluta a possimus laboriosam accusantium inventore ullam laborum at voluptates eligendi perspiciatis, dignissimos iusto. Ipsum quis ad magni consectetur accusamus et assumenda sapiente recusandae minus, animi molestiae saepe voluptates consequuntur, aut ipsa necessitatibus quaerat aspernatur sit ex reiciendis enim suscipit? Dolorem obcaecati ut perferendis, facere rerum quis accusamus eum perspiciatis esse vitae sapiente nisi veritatis laboriosam nemo adipisci magni recusandae voluptates velit possimus numquam reprehenderit. Aliquam optio veniam ab iusto, non animi, repellat perferendis rem reprehenderit nihil possimus molestias repudiandae commodi error recusandae excepturi facilis minima consectetur accusamus porro quasi repellendus magnam. A, incidunt! Ipsa, quaerat. Reiciendis ea ipsa minus eos labore modi non recusandae numquam architecto? Dignissimos omnis itaque dolores quibusdam quae asperiores exercitationem doloremque velit, ducimus ad sint et nostrum at reiciendis. Mollitia voluptatum cum, laudantium necessitatibus molestias itaque velit sint labore iure ratione. Dignissimos placeat dolorum rerum ex asperiores aliquid aperiam harum quas omnis quae accusamus, sed voluptates culpa necessitatibus aspernatur. Vel voluptatibus temporibus aut beatae quas consectetur sit culpa quam sed fugiat, voluptatum incidunt praesentium vero nostrum laboriosam ipsa pariatur est dicta corrupti dolores. Vero, hic? Illum voluptatum excepturi ullam modi, qui ab. Cupiditate, rerum? Mollitia vero impedit modi inventore nulla odio ratione fugit. Tenetur sunt natus atque consectetur omnis asperiores, voluptatibus et error nihil nobis perferendis inventore maxime nisi id! Fugiat, quod aliquam? Velit, doloremque. Soluta nesciunt ut laudantium, eum saepe excepturi at sunt molestiae nulla distinctio repellat animi eligendi quaerat. Nulla quas sunt odit ullam veritatis sed accusamus at error, corporis tempora inventore ad iste, voluptates voluptate suscipit quae veniam et enim omnis odio quaerat similique, tenetur molestiae minima. Rerum cupiditate illum quas deleniti ipsum similique voluptatibus pariatur, laboriosam praesentium deserunt dolorem, omnis ex quam exercitationem, eos esse quisquam? Eos expedita eius odit cupiditate, rem perferendis consectetur praesentium, veritatis quos est repellendus minima, laboriosam ducimus officia. Architecto doloribus rerum quidem, rem dolorem sit maxime nihil deserunt minus tenetur sint voluptatum aspernatur accusantium voluptatibus nam, sapiente autem ratione. Harum, fugit cumque recusandae reprehenderit quo pariatur veritatis dolorum atque optio ipsam nam nisi doloremque sint est eum, dicta ab officia odio laborum debitis exercitationem impedit. Eaque consectetur modi quibusdam autem architecto voluptatem soluta aliquid velit corrupti a possimus, iure vitae nisi. Repellat cumque illum neque assumenda dicta temporibus minus ipsum, doloribus deserunt maxime aliquid? Perferendis non voluptate recusandae deleniti sapiente praesentium asperiores similique et aliquam? Voluptatum, nemo, debitis numquam tempora est deleniti doloribus non optio, accusamus ipsam nesciunt consequatur repudiandae necessitatibus. Omnis ad quae quos ratione praesentium iure consequatur autem unde. Distinctio, dignissimos ipsam, eligendi aliquid ab laborum obcaecati eaque velit laudantium minus incidunt neque a provident odio unde rerum, explicabo eum similique! Natus animi repellendus, soluta eum non id culpa vero amet debitis nostrum ullam quod, illo sunt provident enim reprehenderit! Aut fugiat iste eveniet veniam veritatis a nobis dolorum consectetur sit eos, autem commodi cupiditate qui et excepturi quae ratione ea? Voluptatem magnam optio labore distinctio, dolorem magni sapiente laborum aspernatur possimus nemo molestias illum fugiat perspiciatis quae doloribus, sint autem voluptatum, neque asperiores sit rerum similique? Et voluptatem aut quae odit odio ratione a excepturi error eius, commodi facilis numquam animi facere ipsa amet? Quae, mollitia velit facere inventore nam laboriosam quam quis cupiditate sequi accusamus nulla tempora aut, consequatur amet hic voluptatibus ut, itaque et iste exercitationem tenetur sit expedita deserunt similique? Sit earum voluptate, nostrum placeat fugiat cumque.</p><h1 class="position" id="chapter4">章节4</h1><p>Rerum libero eius voluptates voluptatem labore expedita nisi aspernatur praesentium pariatur quis placeat provident vero odit deserunt obcaecati laborum culpa, commodi, quo optio. Cum dolor possimus mollitia nobis eos itaque, repudiandae quod quasi, vel, minima illum unde voluptates amet vero. Possimus sequi alias velit placeat impedit, enim dolorem minima ratione rem vero optio debitis est libero consequuntur mollitia necessitatibus error tempore illo modi, doloremque adipisci delectus ad. Labore doloribus ratione sequi architecto unde eius. Est perferendis temporibus, vel et quia consequuntur iste tempora iure provident blanditiis accusantium quis reiciendis architecto ipsam cum tenetur, eveniet mollitia ex harum nihil, ut corrupti voluptates voluptatem! Odio, accusantium. Quaerat, eum dignissimos, totam, porro explicabo quasi suscipit autem quia velit quis ad temporibus sequi libero odit eveniet perspiciatis labore laudantium quibusdam. Rem, distinctio cumque deleniti esse ipsa tenetur. Maxime possimus cumque earum culpa id saepe recusandae, hic enim fuga dignissimos, eligendi qui quod nisi consectetur deleniti exercitationem impedit repellendus, doloribus itaque. Optio at rem beatae. Asperiores quae suscipit maxime, voluptatum odit, ipsum, quam ut porro eius nesciunt consequuntur ad enim nam magnam cumque? Veritatis quae dolores numquam consequuntur voluptatibus cum ducimus officiis natus deleniti inventore a non reiciendis fuga quam, incidunt aliquam maxime temporibus. Laborum voluptatibus sunt consectetur necessitatibus tempora fugit corporis sequi sed placeat ex, debitis sit dolor similique. Possimus itaque, delectus mollitia architecto ut reprehenderit vitae expedita eligendi recusandae excepturi molestiae explicabo eaque, ex alias quas iste obcaecati veritatis officiis. Ex voluptate rem possimus eos voluptatum. Iure magni recusandae consequatur, commodi ipsa animi enim, est doloremque odit aliquid assumenda incidunt laborum illum iusto ab cumque quidem amet laboriosam odio. Expedita quia quibusdam nobis, dolores atque quo qui recusandae deleniti, molestias placeat illum doloribus vero magni illo beatae, obcaecati tempore aspernatur omnis asperiores. Quo, quibusdam, esse at sint repellendus mollitia iure ut ipsum officiis dignissimos error iusto animi, a ullam nisi magnam assumenda explicabo sequi optio incidunt saepe. Eum laudantium voluptate expedita et fugiat fugit veniam laborum, minus pariatur dignissimos, corporis architecto assumenda odit sint excepturi nulla illum eveniet tenetur, natus magni? Hic expedita repellat optio praesentium itaque mollitia commodi id quibusdam repellendus eaque. Placeat at iure fugiat. Expedita ut laudantium aliquam? Modi nostrum eius voluptates perspiciatis velit! Architecto tempore blanditiis accusantium? Excepturi ullam laborum exercitationem quam voluptas non modi qui delectus iste. Alias facere esse explicabo amet numquam vitae inventore laudantium commodi dolorem nam impedit dolores unde nesciunt exercitationem ea, omnis reprehenderit repellat aperiam. Voluptates quam ipsa aperiam. Quisquam esse nam est iure vel eaque error, consequuntur atque vero fuga itaque, veritatis perferendis enim voluptatibus, voluptate perspiciatis consequatur. Fugit animi debitis possimus placeat? Non, esse cupiditate animi itaque autem voluptas quia a magnam magni, omnis excepturi sapiente est. Animi dicta, sunt repellat in optio atque? Tempore commodi quibusdam numquam nobis alias voluptatibus eveniet necessitatibus, nesciunt esse nisi odio. Quo recusandae obcaecati cum expedita consectetur, quod sapiente deleniti nemo porro assumenda laborum aperiam veniam necessitatibus, quos explicabo reiciendis quas dolore animi repellendus distinctio quibusdam, praesentium exercitationem. Deleniti, aut consequatur aperiam tempora fugiat libero illo porro tempore accusamus voluptas? Nihil, nesciunt voluptatum repellat eum magni dolores, facilis aperiam iusto non ullam fugit nemo et recusandae exercitationem est sequi praesentium. Sint dolores facilis laborum eos laudantium repudiandae architecto eveniet soluta unde necessitatibus debitis, labore et maiores quia repellat iste porro recusandae perspiciatis cum. Quae necessitatibus aut magni voluptates nostrum cum. Voluptatibus adipisci laboriosam, non praesentium quisquam dolores magni alias repellat culpa fuga, aspernatur natus qui aliquam ipsam facere veritatis quibusdam nam nemo expedita et officia velit temporibus! Ipsam nemo dicta illum saepe soluta eum cumque perspiciatis adipisci eos? Sint, perferendis? Deserunt, non inventore. Veritatis, alias illo repellendus qui labore earum eligendi velit placeat illum, corporis omnis! Dolorem corrupti rem totam quam, cupiditate obcaecati ut? Iste, officia odit magnam autem cumque voluptates ad laborum qui rem eaque, cupiditate nam soluta placeat. Rerum laboriosam officiis non eum quidem dolorem, fugiat quos omnis voluptatem ipsum ullam error distinctio dolor eligendi deserunt, enim numquam architecto commodi alias animi veniam exercitationem quas odit voluptatibus. Consequatur molestias est beatae consequuntur voluptate doloribus, aspernatur laborum nostrum ab labore laudantium! Blanditiis nemo maxime rem quod obcaecati illo ducimus, aperiam tenetur consequatur ipsa ea dolore itaque rerum aliquid error animi soluta numquam, saepe amet? Voluptate repellat quaerat cum illum iste, beatae, aspernatur ab laborum error natus ullam quasi labore rerum! Fuga, incidunt non amet, iste dolores molestias commodi animi, sapiente praesentium explicabo nulla. Ullam eius, corrupti maxime laboriosam deserunt, corporis voluptas obcaecati nam ipsum, harum perferendis neque? Alias neque nostrum quae odit corporis, doloribus maiores deserunt expedita, saepe facere temporibus ipsam eius earum id iusto cupiditate sequi consequatur velit culpa, ratione distinctio est voluptates! Quo a rerum laboriosam officia neque, adipisci voluptates vero ullam aspernatur tempora laudantium consequatur earum, ipsam in cumque quos ducimus cum inventore eaque facilis corporis, perferendis consectetur tempore itaque. Inventore recusandae quos accusantium reprehenderit commodi beatae ea consectetur voluptatibus ipsum, amet, illo reiciendis magni velit modi sunt nobis expedita molestias fugit corrupti dignissimos, cumque odit. Veritatis repellendus in ratione, ullam illum, voluptatem tempora aliquid eum asperiores quod porro quasi magni quia itaque optio facilis nobis nisi? Consequatur expedita distinctio provident soluta sequi quae culpa enim, nulla quod facere tenetur natus nihil, quam consequuntur numquam porro amet laborum rem similique error laboriosam accusantium ipsam sit dolores. Porro hic quisquam explicabo cumque repellat laboriosam dolorum! Modi facere deserunt nemo enim, nesciunt, mollitia autem eaque totam officia distinctio ipsum dolor, pariatur cupiditate est possimus ipsam. Ut obcaecati quisquam dolor reiciendis error aspernatur eum blanditiis. In dolore laudantium amet? Sed similique aliquid, recusandae, corporis maiores ad optio illum molestias quas facere labore rerum. Impedit odio molestiae quo non quae autem asperiores at magnam, eum sunt mollitia cum. Asperiores est repudiandae quae totam voluptatem quaerat quidem, fugit praesentium accusantium alias modi temporibus ad iste molestias dolor, magnam maiores veritatis ipsa ea eum maxime? Ad tenetur delectus, vitae similique ex ab totam amet aperiam, aliquam dicta optio unde asperiores architecto quam, commodi quibusdam natus. Aperiam voluptatem consectetur, repellendus dolorum quod magnam, esse harum sapiente modi quibusdam id!</p></div>

效果:

功能链接

点击后，触发某个功能

执行JS代码，javascript:
发送邮件，mailto:

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

拨号，tel:

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

target属性

表示跳转窗口位置。

target的取值：

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

图片元素

img元素

image缩写，空元素

src属性：source

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

和a元素联用

和map元素

map：地图

map的子元素：area
mdn官方解释：HTML 元素在图片上定义一个热点区域，可以gu关联一个超链接。元素仅在元素内部使用。
官方例子：

<map name="primary"><area shape="circle" coords="200,250,25" href="another.htm" /><area shape="default" nohref />
</map>

shape
相关联的热点的形状。HTML 5和HTML 4的规范定义了值rect，它定义了一个矩形区域;圆圈circle，它定义了一个圆形区域;多边形poly，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是Internet Explorer 4和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。

alt
在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在HTML4中，这个属性时必需的, 但是可以是一个空的串("")。在HTML5中, 这个属性只有在href 属性被使用的时候才是必需的。

coords
给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形, 这个coords 值为两个X,Y对：左上、右下。对于圆形, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量.

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

ps、pxcook

和figure元素

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

子元素：figcaption

多媒体元素

video 视频

audio 音频

video

<video src=""></video>

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

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

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

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

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

loop: 布尔属性，循环播放

audio

<audio src=""></audio>

和视频完全一致

兼容性：
1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音频和视频格式不一样

列表元素

列表元素里面的子元素只能为li元素

有序列表

ol: ordered list

li：list item

<ol><li> </li>
</ol>

无序列表

把ol改成ul

ul：unordered list

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

定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

容器元素

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

div元素

没有语义

语义化容器元素

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

footer: 通常用于表示页脚，也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定，可以在mdn里面查看。

例如，查看h1元素中是否可以包含p元素

总结：

容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

HTML（二）语义化、核心常用元素相关推荐

搜索框语义化的html标签是,HTML标签语义化和常用的标签
如何理解标签语义化 HTML的历史在一开始,没有前端的概念,页面的HTML都是后端程序员去写的,后端程序员在页面布局的时候使用的是table去布局,样式丑陋并且出现很多table嵌套的情况. 之后出 ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)
一:Web入门 1:web文件命名在文件名中应使用连字符(-).搜索引擎把连字符当作一个词的分隔符, 但不会以这种方式处理下划线. 养成在文件夹和文件名中使用小写,并且使用短横线而不是空格来分隔的习 ...
web标准与HTML语义化
说来惭愧,学习前端已经有了一段时间,但对最基本也是极其重要的一些网站设计的基础思想都不太清楚.最近写项目发现了很多自己的不足,特此写一些文章来记录自己最近看书了解的一些知识与感悟. Web标准-结构. ...
HTML语义化的理解
1.什么是HTML语义化? "语义化"指的是在需要更少的人类干预的情况下,能够研究和手机信息,让网页能够被机器理解,最终让人类受益. 语义化的目的就是让大家直观的认识标签(mark ...
html语义化标签和无语义化标签
什么是HTML语义化标签语义化的标签,旨在让标签有自己的含义,让浏览器认识这个标签所传达的信息,是干什么的有什么作用. 比如:h1标题标签的语义是用它来标识网页或其他部分最重要的标题. 然而span ...
web开发—— 前端基础（6） ——语义化标签
在网页中HTML专门用来负责网页的结构,在使用html标签时,应该关注标签的语法,而不是它的样式! 首先:标题标签有6级,h1~h6,h1时一级标题,h6是6级标题,h1最重要,h6最不重要. 一般情 ...
html5新语义化标签
HTML5的浏览器兼容支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本,Chrome (谷歌浏览器),Safari, Opera等; 国内的遨游浏览器(Maxthon ...
input自适应_【正点原子FPGA连载】第十一章基于OV5640的自适应二值化实验-领航者ZYNQ之HLS 开发指南...
1)摘自[正点原子]领航者ZYNQ之HLS 开发指南 2)平台购买地址:https://item.taobao.com/item.htm?&id=606160108761 3)全套实验源码+手 ...

HTML（二）语义化、核心常用元素