Semantic
What is semantics
- Each HTML element has a specific meaning
a element: hyperlink
p element: paragraph
h1 element: first level title
- All elements have nothing to do with the display effect
The effect of elements displayed in the page should be determined by CSS.
Because browsers have default CSS styles, each element has some default styles.
Important: what element to choose depends on the meaning of the content, not the effect shown
Why semantic?
- For search engine optimization (SEO)
Search engine: Baidu, soso, Bing, Google
Every once in a while, search engines will grab the page source code from the whole Internet
- To make the browser understand the web page
Reading mode, voice mode
Text element
Elements supported in HTML5: HTML5 element periodic table
h
Title: head
h1 ~ h6: indicates level 1 Title ~ level 6 title
p
paragraphs
lorem, random number of fake articles, words without any actual meaning, is often used when a large amount of text content is needed for the test
span [no semantics]
No semantics, only for style setting
Previously: some elements would monopolize a row (block level elements) while some elements would not (row level elements)
By HTML5, this statement has been abandoned. Now it is controlled by css, which is called block box and line box.
pre
Pre formatted text element
White space folding: continuous white space characters (space, line feed, tab) in the source code will be folded into a space when the page is displayed
Example:
<!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>Blank fold</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>
effect:
Exception: the content in the pre element will not be blank folded
The content that appears inside the pre element will be displayed on the page in source code format.
Example:
<!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>This is pre Page of element</title>
</head>
<body>
<pre style="font-family:Microsoft Heya">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Vero consectetur aperiam suscipit
perspiciatis tenetur beatae minima ab odio pariatur totam dolore illo modi
eaque, iure reprehenderit repudiandae consequatur quia? Assumenda!</pre>
</body>
</html>
effect:
This element is usually used to display some code in a web page.
The essence of the pre element function: it has a default css attribute
When displaying code, it is usually covered with code elements, and code represents the code area.
a element
Hyperlinks
<a href="" target=""></a>1 7
href attribute
hyper reference: usually indicates the jump address
- Normal link
- Anchor link: the position of the specific content in the web page when jumping
id attribute: global attribute, which indicates the unique number of the element in the document
<div class="ul-color">
<ul>
<li>
<a href="#Chapter1 "> Chapter 1 < / span ></a>
<a href="#Chapter2 "> Chapter 2</a>
<a href="#Chapter3 "> Chapter 3</a>
<a href="#Chapter4 "> Chapter 4</a>
</li>
<li>
<a
target="_blank"
href="https://www.baidu. COM / "> Baidu</a>
</li>
</ul>
</div>
<div>
<h1 class="position" id="chapter1">Chapter 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">Chapter 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">Chapter 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">Chapter 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>
effect:
- Function link
Click to trigger a function
- Execute JS code, javascript:
- Send mail, mailto:
The user's computer is required to have mail sending software installed: exchange
- Dial, tel:
The user is required to install dialing software on the computer or use mobile access
target attribute
Indicates the position of the jump window.
Value of target:
- _ self: open in the current page window, default
- _ blank: open in a new window
Picture element
img element
image abbreviation, empty element
src attribute: source
alt attribute: when the picture resource fails, the text of this attribute will be used to replace the picture
With element a
And map elements
map: map
Sub element of map: area
mdn official explanation: the HTML element defines a hotspot area on the image, which can be gu associated with a hyperlink. Element is used only inside the element.
Official examples:
<map name="primary"> <area shape="circle" coords="200,250,25" href="another.htm" /> <area shape="default" nohref /> </map>
shape
The shape of the associated hotspot. The specifications of HTML 5 and HTML 4 define the value rect, which defines a rectangular area; circle, which defines a circular area; Polygon poly, which defines a polygon; By default, this means that the entire shape is exceeded. Many browsers, especially Internet Explorer 4 and later, support arcs, polygons and rectangles as valid values of shapes; These values {{non standard_inline}}.
alt
Displays an alternate text string on a browser that does not display an image. This text should be able to convey to the user the same choice as displaying an image without text. In HTML4, this attribute is required, but it can be an empty string (""). In HTML5, this attribute is required only when the href attribute is used.
coords
Set specific coordinate values for the hot spot area. The value and meaning of this value depend on the shape attribute described by this value. For rectangles or rectangles, the coords value is two x,y pairs: upper left and lower right. For a circle, this value is x,y,r, where x,y are a pair of coordinates that determine the center of the circle, and r is the radius value. For polygons and polygons, this value is each point of the polygon represented by x,y pairs: x1,y1,x2,y2,x3,y3, and so on. In HTML4, the value may be the number of pixels or percentage. Is there a% difference; In HTML5, it can only be the number of pixels
When measuring coordinates, in order to avoid measurement errors, professional measurement tools need to be used:
ps,pxcook
And figure elements
Refers to the definition, which is usually used to wrap the picture, picture title and description
Child element: figcaption
Multimedia elements
Video video
audio
video
<video src=""></video>
Controls: controls the display of controls. The value can only be controls
For some attributes, there are only two states: 1 Don't write 2 The value is the attribute name, which is called Boolean attribute
Boolean attribute. In HTML5, you don't need to write the attribute value
Autoplay: Boolean attribute, autoplay.
muted: Boolean property, mute playback.
loop: Boolean attribute, looping
audio
<audio src=""></audio>
Exactly the same as the video
compatibility:
1. These two elements are not supported in older browsers
2. Different browsers support different audio and video formats
List element
Child elements in a list element can only be li elements
Ordered list
ol: ordered list
li: list item
<ol>
<li> </li>
</ol>
Unordered list
Change ol to ul
ul: unordered list
Unordered lists are often used to make menus or news lists.
Definition list
Usually used for the definition of some terms
dl: definition list
dt: definition title
dd: definition description
Container element
Container element: this element represents a block area inside which other elements are placed
div element
No semantics
Semantic container element
Header: usually used to represent the page header, and can also be used to represent the header of the article
Footer: usually used to represent the footer or the end of an article
Article: usually used to represent the whole article
section: usually used to represent a chapter of an article
aside: usually used to represent a sidebar
Element containment relationship
Previously: block level elements can contain row level elements, and row level elements cannot contain block level elements, except a element
The inclusion relationship of an element is determined by the content category of the element, which can be viewed in mdn.
For example, see if the h1 element can contain a p element
Summary:
- Container elements can contain any element
- a element can contain almost any element
- Some elements have fixed child elements (UL > Li, ol > Li, DL > DT + DD)
- Title elements and paragraph elements cannot be nested with each other and cannot contain container elements