Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML study notes 2

HTML study notes 2

不言
Release： 2018-04-19 14:32:03
Original
1464 people have browsed it


The content of this article is about HTML learning notes 2. It has a certain reference value. Now I share it with you. Friends in need can refer to it

1 , table

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Copy after login

......define rows, define columns

Header represents: 

<tr>
<th>heading</th>
</tr>
Copy after login

If you want to represent a blank line, you can fill it with  space placeholder.


2. List



##First type: None Sequence listing -
    , use bold dot mark 

    <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
    Copy after login


    or use
      ...use an open circle point.


      ##Second type: Ordered list——

        , use numbers to mark 

        <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
        Copy after login


        Or use

          ... to indicate that the number starts from 50.



          ##Third type: Custom list——


          <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
          Copy after login

          Explanation:

          indicates the beginning of the list



          ##
          Indicates list items


          Indicates the definition of list items


          ## Note that paragraphs, line breaks, pictures, links, other lists, etc. can be used inside list items.




          3. HTML class

          Classifies HTML and can An element's class defines the CSS style.


          Set the same style for the same class. 

          <!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<p class="cities">
<h2>London</h2>
<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> 

</body>
</html>
          Copy after login



          #< ;p> is a block-level element used to set the same class.
          is an inline element. 

          <html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>
          Copy after login


          4. HTML website layout

          (1) Use

          for layout


          <head>
<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>
</head>
          Copy after login

          Use


          (2) HTML5 Provided new semantic elements



          Defines the header of a document or section

          < ;nav>Define a container for navigation links


          ##
          Define a section in a document



          ##

......