Front end learning notes (IV) HTML introduction expansion

Time:2021-10-17

Before learning HTML, followHow do I get started with the web front end? The learning roadmap given in Wang Xiaohei’s answer, according to the basic HTML tutorial of w3school, I only learned the HTML list part. In the process of learning CSS, I gradually find that some HTML content (blocks, classes, etc.) is not familiar. Now, before starting to do the static web page of the hands-on small project, I want to give a tutorial on the basics of HTML, read all the basic tutorials of HTML, and try to knock it by hand.

1. HTML block element
<div>Is a block level element used to combine other HTML elements.
<span>Is an inline element, which is used as a container for the composition book.
The main purpose of both is to facilitate CSS styling. Div can also be used for text layout. (it was not good to use tables for text layout in the past!)

2. HTML class:
Setting the class attribute on HTML elements (usually div, etc.) can facilitate CSS to set styles. Example:

<div class="cities">

3. HTML layout:
Div element is often used as a layout tool to facilitate its positioning through CSS.
Example: use four<div>To create a multi column layout: (the float in CSS mentioned earlier is used in the middle, and the method of clear in the footer is used)
HTML:

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright W3School.com.cn
</div>

</body>

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

If you define the page layout using the new semantic elements provided by HTML:
Header defines the header of a document or section
NAV defines the container for navigation links
Section defines the section in the document
Article defines independent self-contained articles
Aside defines content other than content (such as sidebar)
Footer defines the footer of a document or section
Details defines additional details
Summary defines the title of the details element
HTML:

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>

</body>

CSS:

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

use<table>Elements can also be laid out, but this is not good. No code.

4. Responsive web framework: web design that can deliver web pages in variable size. You can mainly use float to achieve this. Example:

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>

<body>

<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.
</p>
</div>
</body>
</html>

Another way is to use an off the shelf CSS framework.
CSS framework, to put it bluntly, is a CSS file written by others, which defines the format of different classes. Then directly reference the class, you can implement some format properties, and you don’t need to write a complete CSS file yourself. For example, the following HTML files refer to the bootstrap framework, so you don’t need to write your own CSS files or other styles to make the text have special style attributes, and the web page content can be properly displayed on devices of different sizes:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

5. HTML framework
By using frameset, the window can be divided into several rows or columns to display different HTML files. In the following example, we set up a two column frameset. The first column is set to occupy 25% of the browser window. The second column is set to occupy 75% of the browser window. The HTML document “frame_a.htm” is placed in the first column, and the HTML document “frame_b.htm” is placed in the second column:

<frameset cols="25%,75%">
   <frame>
   <frame>
</frameset>

Note: in this case, the scroll bars of the two columns are separated.

Important: you cannot<body></body>Label and<frameset></frameset>Labels are used at the same time! However, if you add a text<noframes>Label, you must nest this text in<body></body>Inside the label. Example:

<html>

<frameset cols="25%,50%,25%">
  <frame>
  <frame>
  <frame>

<noframes>
<body>Your browser cannot handle frames</ body>
</noframes>

</frameset>

</html>

Other tips:
1) Row and column frames can be mixed and nested.
2) NoResize = “noResize”: make the frame non resizable.
3) Navigation frame (it feels more common): the navigation frame contains a list of links with the second frame as the target. The file named “contents. HTM” contains three links.

<html>

<frameset cols="120,*">

  <frame>
  <frame name="showframe">

</frameset>

</html>

4) Initially display the specified section within the frame: this example demonstrates two frames. One of the frames sets up a link to a specified section in another file. The section specified in this “link. HTM” file is used

< a name = "C10" > for identification.
<html>

<frameset cols="20%,80%">

 <frame>
 <frame>

</frameset>

</html>

5) Use the navigation frame to jump to the specified section: this example demonstrates two frames. The navigation frame on the left contains a list of links that target the second frame. The second frame displays the linked document. Navigation frame where the link points to the section specified in the target file.

<html>

<frameset cols="180,*">

<frame>
<frame name="showframe">

</frameset>

</html>

6. Inline frame iframe: used to display web pages within web pages. (dolls)

Front end learning notes (IV) HTML introduction expansion
You can use width and height to set the size of the inframe and frameBorder to set the border.
Iframe can also be used as the target of the link (i.e. the location where the web page is displayed after clicking the link, such as a new tab, etc.). For example:

<iframe name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

7. HTML script:<script>Tags are used to define client-side scripts, such as JavaScript.
Script elements can contain script statements or point to external scripts through the SRC attribute.
<noscript>Tags provide alternatives when scripts cannot be used, such as when the browser disables scripts or when the browser does not support client-side scripts.
How to deal with old browsers
If the browser can’t recognize it at all<script>Label, then<script>The content contained in the label will be displayed as text on the page. To avoid this, you should hide the script in the comment tag. Those old browsers (unrecognized)<script>The tag’s browser) will ignore these comments, so the contents of the tag will not be displayed on the page. Those new browsers will read these scripts and execute them, even if the code is nested within the comment tag. Example (JavaScript):

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

8. HTML file path:
The file path will be used when linking external files, including web pages, images, style sheets and JavaScript.
Relative path (using relative path is a good habit!):
<img>Picture.jpg is located in the same folder as the current web page
<img>Picture.jpg is located in the images folder of the current folder
<img>Picture.jpg is in the images folder of the root directory (the highest level directory) of the current site
<img>Picture.jpg is located one level above the current folder
Absolute file path:
Absolute file path refers to the complete URL to an Internet file, for example:
<img>

9. HTML header element
<head>The element is the container for all header elements. The following tags can be added to the head section:<title><base><link><meta><script>as well as<style>
(1)HTML <title>element
<title>The label defines the title of the document.
The title element is required in all HTML / XHTML documents.
The title element can:
Defines the title in the browser toolbar
Provides the title that appears when a page is added to a favorite
Page title displayed in search engine results
(2)HTML <link>element
<link>Tags define the relationship between documents and external resources.
<link>Labels are most commonly used to connect style sheets:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

(3)HTML <style>element
<style>Tags are used to define style information for HTML documents.
You can specify the style of HTML elements rendered in the browser within the style element:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

(4)HTML <meta>element
Metadata is information about data.
<meta>Tags provide metadata about html documents. Metadata is not displayed on the page, but is machine readable.
Typically, meta elements are used to specify the description of the page, keywords, the author of the document, the last modification time, and other metadata.
<meta>The label is always in the head element.
Metadata can be used in browsers (how to display content or reload pages), search engines (keywords), or other web services.
Keywords for search engines
Some search engines use the name and content attributes of meta elements to index your pages.
The following meta elements define the description of the page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The following meta elements define the keywords of the page:
<meta name="keywords" content="HTML, CSS, XML" />
The name and content attributes are used to describe the content of the page.
(5)HTML <script>element
<script>Tags are used to define client-side scripts, such as JavaScript.

10. HTML character entity
Some characters in HTML are reserved, such as greater than sign >, less than sign < and so on.
Example: writing with less than sign&lt;or<
The most common is uninterrupted spaces&nbsp;, because the browser will automatically reduce the space in HTML to one. So if you want to use spaces, you need to use this.
There are many character entities, so you need to refer to the reference manual for actual use. Writing entity names is easier to remember, but some browsers may not support entity names, and numbers are more supportive.

11. HTML URL (uniform resource locator)
Web address, such ashttp://www.w3school.com.cn/ht…, observe the following syntax rules:
scheme://host.domain:port/path/filename
Explanation:
Scheme – defines the type of Internet service. The most common type is http
Host – defines the domain host (the default host for HTTP is WWW)
Domain – defines the Internet domain name, such as w3school.com.cn
: Port – defines the port number on the host (the default port number for HTTP is 80)
Path – defines the path on the server (if omitted, the document must be in the root directory of the web site).
Filename – defines the name of the document / resource
Note: there are many schemes. Please understand them when using them~

URL character encoding: URLs can only be sent over the Internet using ASCII character sets. Therefore, other characters (including Chinese, etc.) will be replaced with% plus two hexadecimal digits. The URL cannot contain spaces. It is generally replaced by +. For specific URL code reference, please refer to the URL code reference manual.

12.HTML web server
To publish your own web page, you need to store it on the web server. For details, please refer to the web host tutorial.

13. HTML color
The color is a mixture of red, green and blue, three two digit hexadecimal digits. For example, #000000 is black and #ff0000 is red.
Most browsers also support color names (the automatic completion function of brackets will be displayed, which is very convenient). There are many color names, but only 16 colors are supported by the W3C’s HTML 4.0 standard.
Initially, there were 216 cross platform web security colors. But I don’t know the significance of doing so now.

14. DOCTYPE declaration (document type)
There are many types of documents in the web. Only by declaring at the beginning of the HTML file can the browser display the document correctly.
Example: <! DOCTYPE >, which is not an HTML tag, just provides a declaration for the browser.

Attached is the html4.01 quick reference manual from w3school
https://www.w3school.com.cn/html/html_quick.asp