1: Preface (what is Web technology?)
The purpose of writing this article is to record some of the author's own learning gains, or learning process. It's just my personal opinion and understanding, because I'm just getting started. There may be many omissions and mistakes. Please forgive me.
Let's get down to business. First, what is Web technology?
After my Baidu search, the original meaning of the web is spider web and web, which is called web page in web design. Web technology refers to the general term of technologies for developing Internet applications, generally including web server technology and web client technology. For beginners, just know these points and understand its main framework.
This is the framework of the whole Web technology. Those who study the Web deeply can understand it!
2: The first step in learning the Web: html
Html is an abbreviation for HyperText Markup Language. We use HTML to build Web pages, which are called Web pages.
Html is a brick by brick of the Web world. It defines the meaning and structure of Web content. In addition to HTML, other technologies are usually used to describe the performance and display effect of a Web page (such as CSS), or function and behavior (such as JavaScript).
HTML is not a programming language, but a markup language used to define the content structure.
Behind any web page you see in the browser is an HTML document. You can see it by clicking the right mouse button on the web page - > view the source code (using console tools).
HTML and CSS (Cascading Style Sheets) and JavaScript, which we will learn later, are the three swordsmen for building widely used Web programs.
Now let's begin to learn how to write HTML documents.
1: First code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>Page title</title> </head> <body> <h1>My first Web page</h1> <p>It's a little ugly at the moment:</p> </body> </html>
This code can let us clearly understand the general mechanism of html. Let's analyze it.
The analysis is as follows: <!DOCTYPE html>: Declare the document type. For historical reasons, it is dispensable now. <html></html>: <html>Element. This element wraps the entire page and is a root element into which other elements are nested. <head></head>: <head>Element. This element is a container that contains everything you want to include in HTML In the page but don't want to HTML The content displayed in the page. These contents include keywords and page descriptions you want to appear in search results, CSS Style, character set declaration, etc. <meta charset="utf-8">: This element sets the document usage utf-8 Character set encoding, utf-8 The character set contains most of human text. Basically, he can recognize all the text content you put on it. There is no doubt about using it, and it can avoid many other problems in the future. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: Specifies the icon of the page that appears on the browser tab.(Try it: you can download one at will.ico Icon file to working directory) <title></title>: Set the page title to appear on the browser tab when you tag/When collecting a page, it can be used to describe the page. <body></body>: <body>Element. Contains all the content you can see on the page, including text, pictures, audio, games and so on.
3: Summary of common elements in html
After carefully reading the first paragraph of HTML, I believe you must have a certain understanding of HTML. But html is far more than that,
And so on. Now I will introduce some common and practical elements to you. They are all dry goods.1: Text display
<p>show contents</p>
2: Notes
stay vs code In the platform **ctrl+/ **You can comment.
3: Empty element
Generally speaking, elements have start tags, content tags, and end tags. However, some elements have only one start tag, which is usually used to insert / embed something in the location of the element, such as < br >, < HR >, < input >, < img >, < a >, etc. We call it an empty element as follows:
<!-- Line feed --> <p>I can<br>Line feed</p> <!-- Horizontal split line --> <hr> <!-- Input box --> <input>
4: Element attribute
Elements can have related attributes. Attribute contains additional information about the element that will not be displayed in the browser.
<!-- Paragraph input box with attributes --> <p title="This is a title attribute">Move the mouse up and try!</p> <!-- Input box with attributes --> <input type="text"> <input type="password">
5: Title
HTML provides 6 levels of titles from large to small, which are: < H1 > ~ < H6 >, as follows:
<h1>This is heading 1</h1> <hr> <h2>This is heading 2</h2>
6: Text format
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
There are many kinds of text formats. We won't list them one by one here. If you have any special text needs, you can go to the rookie tutorial to learn.
7: Hyperlinks
<a href="https://www.baidu. com/" target="_ Blank "> Baidu</a>
explain:
href is the address URL to jump to (uniform restore locator)
target attribute is_ blank means to open a hyperlink on a new page (the default is to open it on the current page, i.e. _self)
The content contained in the hyperlink tag (currently the text "Baidu click") is displayed on the page for users to click
8: Picture
Insert a picture on the page as follows:
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
explain:
The src attribute is the URL of the location where the picture file is to be displayed, that is, the path of the picture file
alt property the text (placeholder) to display when there is a problem getting the picture
You can specify a high width for the picture, but it is not recommended (which may cause the picture to deform)
9: Tables and lists
Form:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
List:
<ul type="square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
These two parts are relatively simple. You can do it. Just tap the keyboard.
10: Form form
<form>
<!-- Text box, note placeholder Prompt -->
user name:<br>
<input type="text" name="name" placeholder="enter one user name"><br>
<!-- Password box -->
password:<br>
<input type="password" name="ps" placeholder="Please input a password"><br>
Age:<br>
<!-- Digital input box, note min and value attribute-->
<input type="number" name="age" min="18" value="18"><br>
<!-- radio button, be careful checked attribute -->
Gender:<br>
<input type="radio" name="gender" value="male" checked> male<br>
<input type="radio" name="gender" value="female"> female<br>
<input type="radio" name="gender" value="other"> other<br>
<!-- Drop down list, note selected attribute -->
Party:<br>
<select name="party">
<option value="D">the Democratic Party of the United States</option>
<option value="R" selected>republican party</option>
<option value="N">without party affiliation</option>
</select><br>
<!-- Checkbox -->
Which means of transportation do you have:<br>
<input type="checkbox" name="vehicle1" value="Bike"> Bicycle<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> motorcycle<br>
<input type="checkbox" name="vehicle3" value="Car"> Car<br>
<input type="checkbox" name="vehicle4" value="Jet"> aircraft<br>
<!-- Date Pickers -->
Your working date:<br>
<input type="date"><br>
<!-- File selector -->
Upload your photos:<br>
<input type="file" name="photo"><br>
<!-- Text entry area, note rows and cols attribute -->
Your suggestion:<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- Form submission/Reset button to cancel or transfer the data in the form to the server for processing -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
This usage scenario is generally used in web research and user data.
11: Block element and inline element
When a block element is displayed in the browser, it usually starts (and ends) with a new line. For example:
<h1>, <pre>, <ul>, <table>，<div>Wait.
Inline elements, on the contrary, are always displayed one by one and do not start a new line. For example:
<span>, <input>, <td>, <a>, <img>Wait.
Conclusion:
Here is the general content of html. I believe friends who read it carefully must have some understanding. In the future study, I will often update the content about Web technology. See you next time!!!