#Study notes for the first week
##November 15
First your own web page
<!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 my first web page</title>
</head>
<body>
<a href="https://Www.bilibilili. COM / "title =" China's best animation website "> BiliBili</a>
<h1 title="this is my frist page ">
Li Yi's first website
</h1>
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.WxdSl9EFsf60fQ4_WM8PeAHaEn?w=300&h=187&c=7&r=0&o=5&dpr=2&pid=1.7">
</body>
</html>
Understanding of some key things (the above code is an example)
<!DOCTYPEhtml>: Prompt the class content under the browser HTML5 Standard rendering for <html lang="en"> Tell the natural language under the browser why the language (English, Chinese, etc.) <meta charset="UTF-8"> Explain what standard the following contents are stored in the computer, here refers to uncoine 8 Standard of <meta http-equiv="X-UA-Compatible" Solve the problem of mobile terminal
About the composition of each element
Overall element
Element = start tag < > + end tag < / > + element content + element attribute
Element attribute = attribute name + attribute value
Attributes: global attributes (common to all elements)
Local attributes (attributes of some elements)
###What is semantics?
Semantics is the meaning represented by each element.
For example, the h1 element represents a first-class title, and the p element represents a paragraph. What each element displays has nothing to do with semantics. It is displayed according to the default css code, and all displays can be changed through css,
So we can't think about what kind of display we need to write an element.
##November 16
###Element
Text element h element p element pre element span element
The following are introduced one by one;
####h element (Title element)
The following is the code display (body part)
<body>
<h1>&title</h1>
<h2>&title</h2>
<h3>&title</h3>
<h4>&title</h4>
<h5>&title</h5>
<h6>&title</h6>
</body>
The following is the running effect
&Title
&Title
&Title
&Title
&Title
&Title
(the display effect can be modified, so it does not mean that the difference between titles at all levels is their display content)p element (paragraph element)
Code display
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>Quibusdam, at quisquam dolorum exercitationem consectetur magnam!</p>
<p>Animi, tenetur dignissimos ad architecto id deleniti!</p>
</body>
Show code effects
Lorem ipsum dolor sit amet consectetur adipisicing.
Quibusdam, at quisquam dolorum exercitationem consectetur magnam!
Animi, tenetur dignissimos ad architecto id deleniti!
####pre element
There will be blank folding in the web page display, that is, when there are multiple blank symbols, only one blank symbol will be displayed, and the pre element can retain multiple elements in the element content.
The following is the code display
<body>
<pre> I love messi messi is the best player </pre>
</body>
Effect display
I love Messi is the best play####The span element has no semantics. In order to add special attributes to something (written through css), it is not displayed because it has not learned css.
Block level elements and row level elements (previously, there was no such concept in the html5 standard)
Block level elements: one row is exclusive
Row level element: does not monopolize a row
####a element
Hyperlink element
href hyperlink properties
#####1. The simplest hyperlink jump is realized through the a element
code implementation
<body>
<a href="https://www.bilibili.com/">bilibili</a>
</body>
Code effect
bilibili#####2. Jump within the article through hyperlinks
<body> <a href="#cp1">1 chapter</a> <a href="#cp2">2 chapter</a> <a href="#cp3">3 chapter</a> <a href="#cp4">4 chapter</a> <a href="#cp5">5 chapter</a> <a href="#CP6 "> Chapter 6</a> <h2 id="cp1">1 chapter</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sunt quidem aliquam tempora consequuntur perferendis explicabo excepturi provident nam iure? Atque perspiciatis consequuntur itaque molestiae, cupiditate laudantium amet est unde nisi cum a fuga mollitia nostrum eligendi consectetur reiciendis corporis? Dolore iste deleniti, dolores modi sint est. Voluptate, beatae esse eos incidunt eum, iusto, earum nisi sit cupiditate commodi ea! Ipsum pariatur consequuntur eos molestias accusantium, laudantium qui commodi sequi, aperiam, laboriosam asperiores rem facere doloribus sunt hic et. Molestiae iusto explicabo distinctio neque eveniet quae deleniti possimus obcaecati animi a! Quaerat repellendus recusandae ipsum, architecto officia quidem blanditiis? Labore.</p> <h2 id="cp2">2 chapter</h2> <p>Fugiat non aspernatur laudantium nesciunt quos alias eveniet sunt omnis minima sed iure, maxime facere, vero modi rerum expedita ab? Odit, harum totam quam vel dolor, voluptatem architecto cumque repellendus id quis dignissimos alias minima accusantium adipisci ratione culpa repudiandae maiores in pariatur expedita? Ipsam natus officiis repellendus nobis eos deleniti! Nam, laboriosam. Rem consectetur eveniet ipsum qui, sed necessitatibus! Nesciunt similique fuga dolorem dolores amet rerum dolorum exercitationem nulla, iusto voluptate odit nisi earum ut tempore eligendi sit ad quasi cumque dolore cum? Labore itaque id repellat aut distinctio pariatur? Saepe voluptates laboriosam maiores suscipit at incidunt tenetur aperiam!</p> <h2 id="cp3">3 chapter</h2> <p>Deleniti illum voluptatibus, ad amet cum distinctio quas nesciunt modi maxime at iste nostrum expedita soluta placeat sit iure odio fuga, odit, provident animi consectetur eveniet eos debitis dignissimos! Soluta similique, doloribus autem maiores a dolores. Pariatur libero nostrum, sit minima exercitationem, soluta, eius a corrupti porro laborum odit voluptatem molestias atque. Voluptate nesciunt ipsam ut animi cum deserunt, neque, cumque nemo similique nisi doloremque culpa magnam repudiandae est ullam tenetur at suscipit omnis architecto, delectus corrupti? Alias incidunt earum quidem, modi in odit natus, tenetur asperiores, ad minus iure. Labore quia repellendus distinctio id doloremque, explicabo earum! Rerum, nemo?</p> <h2 id="cp4">4 chapter</h2> <p>Quibusdam maiores ducimus iste cumque saepe facilis deserunt quisquam expedita hic eos earum, sunt non nisi harum explicabo distinctio voluptate! Eos reprehenderit cum a, fuga saepe, quia aliquam odio officiis temporibus repellat adipisci magni, quo necessitatibus odit deserunt neque fugit doloremque amet. Eveniet aspernatur architecto, minima porro, vitae fugit laudantium rem repellendus ex, modi voluptatem illum corrupti et repellat qui nesciunt harum est distinctio voluptas autem dolorum sapiente quia enim. In quas quos consectetur labore quaerat, provident, voluptatum iusto officia enim numquam, aliquid consequatur eaque exercitationem nisi. Ullam, alias perspiciatis recusandae eum ducimus nisi dolore saepe iusto enim assumenda natus?</p> <h2 id="cp5">5 chapter</h2> <p>Magnam, consectetur? Quae repudiandae, quos inventore eligendi quidem, sequi est reiciendis dolorum libero assumenda dicta magni provident sint modi eius impedit consectetur error deserunt repellat minima magnam nihil explicabo fuga nulla. Reiciendis architecto labore at a dolore officiis eaque autem doloribus laboriosam! Rerum est ut corporis consequuntur quod? Dolorem atque, optio ipsa quis quidem culpa nesciunt officiis voluptatum nostrum minima dolor praesentium repellendus quas quam ea. Saepe ipsa aut, ipsum omnis sequi totam quidem voluptate deleniti qui corrupti dolorem consectetur corporis nam blanditiis dolores quaerat iusto nulla exercitationem facilis quos voluptatem eligendi ad perspiciatis vel. Fuga facere fugiat repellat maxime.</p> <h2 id="cp6">6 chapter</h2> <p>Aliquam nihil dolor beatae ducimus, ad harum exercitationem vel minima assumenda odit obcaecati similique nemo, earum soluta, incidunt natus et facilis mollitia vero. Illo natus odio amet sequi, quod, harum optio vero ratione nam quia, aliquam perspiciatis ducimus quam autem blanditiis totam? Numquam veritatis pariatur iure accusamus minus veniam debitis. Ab est dolores, facere natus, placeat nam vero voluptate ducimus at officiis quo itaque labore? Esse ipsum in ullam totam accusantium, aliquam atque deserunt est autem saepe quos, veritatis natus facilis quidem dolorum ipsam a maiores, hic quasi vitae! Nulla hic nesciunt omnis quasi eveniet eaque ab natus reiciendis rem.</p> </body>
The code can generate lorem 1000 if you want to have a better display effect, but it will make the copy too long.
Notes of the above code
id is a global attribute
There are three kinds of links: 1. Ordinary link 2. Anchor link 3. Function link (trigger js code and execute function)
The link above is an anchor link.
About target attribute
_ Blandk (open in a blank window)
_ Self (overwrite itself is opened on the current page)
<body>
<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
<a href="https://www.huya.com/" target="_ Self "> tiger teeth</a>
</body>
The code is as follows
##November 17th
####Picture element
ima element
src attribute; address of picture
alt attribute; the description of the picture when it is invalid
The ima element is used with the alt element and the a element figure
Here is the code written
<figure>
<h2 title=" The best">messi</h2>
<a href="https://baike.baidu.com/item/%E9%87%8C%E5%A5%A5%C2%B7%E6%A2%85%E8%A5%BF/4443471" target="_blank">
<img usemap="#me-ssi" src="https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/fc1f4134970a304ee68964ded3c8a786c9175c6f.jpg" alt="messi">
</a>
<map name="me-ssi">
<area shape="circle" coords="537,836,50" href="https://baike.baidu.com/item/%E5%AE%89%E5%BE%B7%E9%9B%B7%E6%96%AF%C2%B7%E4%BC%8A%E6%B6%85%E6%96%AF%E5%A1%94/4515309" target="_blank" >
</map>
messi
##November 18
###Multimedia elements
####Video video
The link path ends in. mp4 format
<video src=""></video>
####Audio audio
The link ends with a general book. mp3
<audio src=""></audio>
Some properties for video and audio
1 controls
Control the display of controls (pause fast forward, etc.)
2 autoplay
Auto play
Autoplay is not supported in some browsers
Because it will create a bad experience for users
3 muted
Mute playback, because some browsers can't support automatic playback, but as long as they mute playback
4 loop
Loop Playback
Because some browsers do not support MP3, we can add a sub element source in the video in consideration of compatibility
In source, two src formats can be used, one is MP4 format and the other is media format
###List element
####Ordered list
ol(ordered list)
li(list item)
<body>
<ol>
How many steps does it take to put an elephant in the refrigerator
<li>
Open the refrigerator
</li>
<li>
Put the elephant in the fridge
</li>
<li>
Turn off the refrigerator
</li>
</ol>
</body>
Display effect
- How many steps does it take to put an elephant in the refrigerator
- Open the refrigerator
- Put the elephant in the fridge
- Turn off the refrigerator
- How many steps does it take to put an elephant in the refrigerator
- Open the refrigerator
- Put the elephant in the fridge
- Turn off the refrigerator
- College entrance examination 500 points
- good health
- Dear teachers
- College entrance examination 500 points
- good health
- Dear teachers
<dt>Offside</dt>
<dd>
The popular understanding of offside is
There was no defense in front of the attacker at the moment of passing the ball
</dd>
</dl>