First day of learning web front end

Posted by superhoops on Tue, 07 Dec 2021 12:05:25 +0100

html table label

Table -- > caption (table title)
The code syntax is as follows:

<table border="1">
       <caption>My form</caption>
  </table>

table - > colSpan (horizontal row)

 <table border="1">
       <caption>My form</caption>
       <tr>
           <td>12</td>
           <td colspan="2">wode</td>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
   </table>

form

form attribute action (where the address of the website is entered), medtion (where the attribute values are get and post), target (where get and post are filled in)
Code and syntax

<form action="wwww.baidu.com" method="GET" target="_blank">
      <p>
          <input type="text" placeholder="Enter account number">
      </p>
      <p>
          <input type="password" placeholder=" Input password">
      </p>
   </form>

Some attributes of Input form - > type, text,password,radio (to realize the function of radio box, the name value of radio should be the same), checkbox (check box), file (upload file), smbit (submit button), reset (reset); Attributes: disabled: (Forbidden), readonly (read only), maxlength (maximum length)

  <form action="wwww.baidu.com" method="GET" target="_blank">
      <p>
          <input type="text" placeholder="Enter account number" value="I can only read" readonly>
      </p>
      <p>
          <input type="password" placeholder=" Input password" value="I was directly disabled" disabled>
      </p>
      <p>
          Gender:<input type="radio" name="aa" id="">male <input type="radio" name="aa">female
      </p>
      <p>
          <input type="file" name="" id="">
      </p>
   </form>

label

Label label - > attribute for: you can write in the id and use it with the radio radio button
Code and syntax:

 <input type="radio" name="aa" id="man">male <input type="radio" name="aa" id="woman">female
   <hr>
   <label for="man">Choose male</label> <label for="woman">Choose female</label>

textarea text field

textarea text field – > colsmore rows, rows more columns
Code and syntax;

<textarea name="textarea" id="" cols="30" rows="10"></textarea>

select drop-down list

Label in the select drop-down list
option: the value displayed after clicking the drop-down list
optgroup: group the values displayed in the drop-down list
Code and syntax

<select name="" id="">
    <optgroup label="Hunan Province">
        <option>Yueyang City</option>
        <option>Hengyang City</option>
        <option>Changsha City</option>
        <option>Miluo City</option>
    </optgroup>
    <optgroup label="Hubei province">
        <option>I'm from Hubei</option>
        <option>I'm from Hubei</option>
        <option>I'm from Hubei</option>
        <option>I'm from Hubei</option>
    </optgroup>
   </select>

rule
(1) . the submit button "submit" can trigger the request sent by the server
(2) Refresh the current page when the form is submitted
(3) . form usually does not use the action attribute. Now it uses ajax to send the form to the server
(4) . the form control needs to set the name and id attributes
(5) . form controls can not be used in form

iframe tag

Iframe tag – > attribute iframe attribute src (fill in the address of the corresponding website)

H5 semantic label

Header, article content, footer bottom side bar nav navigation main body
Syntax and code

<header>head</header>
  <article>content</article>
  <aside>sidebar </aside>
    <main>theme</main>
  <footer>bottom</footer>

Multimedia title

Audio: audio tag -- -- > SRC (which is the address of the printed audio)

 <audio src="http://wwww.baidu.com/cc.mp3"></audio>

Related attributes: Official website https://www.runoob.com/html/html5-audio.html
video can write prompt words in the label. (if the browser is incompatible, this message will be displayed, and if it is compatible, it will not be displayed).
Code and syntax

<video src="https://www.runoob.com/try/demo_source/movie.mp4"></video>

Related attributes: Official website https://www.w3school.com.cn/tags/tag_video.asp

canvas

Canvas canvas
For details, please refer to the official website:
https://www.w3school.com.cn/tags/html_ref_canvas.asp

Resource location

". /" refers to the same level directory. In many cases. / demo.html can be abbreviated as demo.html. Personally, it is not recommended to omit it
"... /" indicates the parent directory, and so on

How to write css files

Inline, internal, external
They are:

 <style>
        /* Internal style */
        div{
            width:200px;
            height: 200px;
        }
    </style>
    <!-- External style -->
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <!-- inline style  -->
    <div style="width: 200px; height: 200px;"></div>
</body>

Topics: Front-end html