author:get lostのsheep Share your experience of learning here,I hope I can help my friends at the front end of beginner's school Become a better front-end developer If there is a mistake in reading the front-end vegetable chicken in the University, thank you for your correction
DAY1 step into HTML
What is HTML?
HTML Is a markup language that tells browsers how to organize pages. He doesn't C,C++,java,js And other languages. HTML Complete the general structure of a page in the simplest and most understandable way.
HTML tag format (Syntax): < tag name > content < / tag name > or < tag name / > (special single closed tag)
As shown in the following code:
<p>I am a HTML Label for</p>
We can add some styles to HTML to make our HTML more beautiful and achieve the desired effect
Center a paragraph of text:
<p align='center' >Wow, I'm centered!</p> <!--Here align='center'Is a centered style-->
Note: this writing method is not recommended now and may be disabled in future versions! A more appropriate way to write is to add CSS styles.
HTML common tags
- h1 - h6 label
<!--This is how we use it--> <h1>I'm a first-class title</h1> <h2>I'm a secondary title</h2> <h3>I'm a three-level title</h3> <h4>I'm a level 4 title</h4> <h5>I'm a level five title</h5> <h6>I'm a level six title</h6>
The renderings are as follows:
The font sizes of h1 to h6 labels are bold from large to small, and one element occupies one line.
The p tag is a paragraph tag, which is the same as the h1 tag. Each element has an exclusive line, but it is not bold.
ul / ol label
ul and ol are list tags, ul stands for unordered list tags, and ol stands for ordered list tags. List tags are very important HTML elements. We often use them as navigation bars after modifying CSS styles.
<!--Unordered list--> <ul type=""> <li>Apple</li> <li>Banana</li> <li>Grape</li> </ul> <!--Ordered list--> <ol type=""> <li>Apple</li> <li>Banana</li> <li>Grape</li> </ol>
The type attribute can be assigned within the ul / ol tag
|ul type value||type value interpretation|
|ol type value||type value interpretation|
|a||Lowercase (a... z)|
|A||Capital letter arrangement (A... Z)|
|i||Lowercase Roman numeral i|
|I||Lowercase Roman numeral i|
- input form label
The input tag can do many things. It is also an HTML tag we often use. For example:
(br the label is a newline character)
<input type="button" style="height: 20px; width: 50px;"/>input Effect button <br/><br/> <input type="text" placeholder="I am an input box"/> <br/><br/> <input type="checkbox" name="cb"/>Apple <input type="checkbox" name="cb"/>Banana <br/><br/> <input type="radio" name="ra"/>Apple <input type="radio" name="ra"/>Pear <input type="radio" name="ra"/>Grape <br/><br/> <input type="range"/> <br/><br/> <input type="file"/>
|type attribute value||type value interpretation|
|text||Input box (default)|
|password||Password (input information is not visible)|
|radio||Radio box (set the same name attribute for the same group)|
|checkbox||Check box (set the same name attribute for the same group)|
|range||Slidable drag bar|
|button||Button (rarely used in general)|
|submit||Submit button (used to submit data to the server)|
|reset||Reset button (used to clear the user's input in the form)|
- img picture label
Picture tag, hence the name meaning, can introduce the pictures you need in HTML and put them in the correct position
<img src="./1.jpg" style="height: 200px; width: 200px;" title="picture" alt="I am a picture">
img tags have some important properties:
|src||Resource location (as:. / picture. jpg)|
|alt||When the picture cannot be displayed due to network problems, resource location errors and other problems, the corresponding content in alt will be displayed|
|title||When the mouse moves over the picture, the picture introduction will appear|
The picture displays normally and shows title:
Display the corresponding content in alt when the picture cannot be displayed:
Content of next issue
- a hyperlink label
- em and strong accent labels
- Label focus label
- Pre pre format label
- HTML semantics
- HTML block level elements and inline elements
- How do browsers render HTML
**Chapter end language** The front-end is easy to get started, but it needs continuous learning to update its knowledge A thousand mile trip begins with one step. If you like the article, you can use your little hand to praise and pay attention~~ Long term renewal......