Front end foundation label

1. Special symbols

Sharp horn
< left horn > right horn
Space:
&Nbsp: the space occupies the width [font] and has a strong influence
&Emsp: the width occupied is exactly one Chinese width, and it is basically not affected by the font
Version: & copy
Trademark: & Trade & reg

2.div and span labels

div: it has no specific meaning. It is used to divide the page area and monopolize one line
span, which has no practical significance, is mainly used in the independent modification of text. The width of the content takes up as much space as possible

3. List

List - ordered list:

1. Labels can be placed in li at will, but ol can only prevent li
2. Numbers are generated automatically
3. Type: 1, a, a, I, I start: C

<ol type = "a">
	<li>Ordered list</li>
</ol>

List - unordered list

1. Only Li can be placed in UL, and other labels can be placed in Li
2. The default is black solid circle
3.type disc default circle hollow circle square square none nothing (most used)

<ul>
	<li>Unordered list<li>
<ul>	

List - custom list

<dl>
	<dt>I'm a picture<dt>
	<dd>I am writing<dd>
<dl>	

4. Picture label

route

. / current path
... / jump one level

Picture label properties

title = "prompt after mouse hovering"
alt = "prompt after the picture is not displayed (loading failed)"
width
Height height

Hyperlink label

Jump to different pages
content
_ blank: new window
_ self: default current window
<a href=""> <img src="" alt=""> </a>

Table table

1. Basic structure of the table

<table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

2. Table related attributes

1. width 2 height 3 border 4 Border color 5 Background color bgcolor
6. Horizontal alignment align = "left or right" or center 7 Cellspacing = "distance between cells"
8.cellpadding = "gap between cell and content"

<table border="1" width="50%" height="500px" align="center" bordercolor="red" bgcolor="blue" cellspacing="20"
       cellpadding="100">
       <tr>
           <td>1</td>
           <td>2</td>
       </tr>
       <tr>
           <td>3</td>
           <td>4</td>
       </tr>
   </table>

3. Tr & TD attribute

1. height 2 Background color bgcolor 3 align = "left" / right center 4 Vertical alignment of text valign = "top" / middle or bottom
Note: if the width of a cell is set, the width of the whole column will be affected

4. Table consolidation

colspan = "number of columns of cells to be merged" must be given to td
rowspan = "number of rows of cells to be merged" must be given to td

 <table border="1" height="300" width="300">
        <tr>
            <td>No hair</td>
            <td colspan="2" rowspan="2" align="center">Wei </td>
            <!-- <td>Liao </td> -->
        </tr>
        <tr>
            <td rowspan="2" align="center">Shu Kingdom</td>
            <!-- <td colspan="2">western liang</td> -->
            <!-- <td>Youzhou</td> -->
        </tr>
        <tr>
            <!-- <td>Nanzhong</td> -->
            <td colspan="2" align="center">Wu kingdom</td>
            <!-- <td>Jingzhou</td> -->
        </tr>
    </table>

Form label

<form method = "get perhaps post" action = "Where to send form data">
input:
A:attribute type Define input type
a) Text box type = "text" Password box type = "password"
b) Submit box type = "submit" and <button>Submit button</button> equally
c) Button box type = "button" Simple button
d) Reset box type = "reset" Clear effect
B:attribute placeholder A short prompt that describes what is expected in the input field
C:attribute name Must be set,Otherwise, when submitting the form,The data entered by the user will not be sent to the server
D:attribute value
  <form action="http://www.baidu.com" method="post">
       User information: <input type="text" placeholder="Please enter your user name,Note size=write" name="username"><br>
       password: <input type="password" name="mima"><br>
       <!-- <input type="submit" value="Sign in"> -->
       <!-- Submit information to action Specified location -->
       <button type="submit">Sign in</button><br>
       <input type="reset" value="empty">
       <input type="button" value="aaaa">
   </form>

Keywords: Front-end html css

Added by obesechicken13 on Mon, 14 Feb 2022 13:44:47 +0200