Tags, Attributes, Form and lebel

HTML Tags

Tags I learnt recently.
<mark> : Highlight
<abbr> : When you hover on the element that's wrapped with <abbr>, it shows description.

You can use CSS to style your HTML.

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

<sup> : Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font like H₂0
<sub> : Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW^[1].

<p>H<sub>2</sub>0</p> 
<p>x<sup>2</sup>=4</p>

<blockquote>

I Don’t Have A Home To Go Back To. In Here, I Stand A Chance At Least. But Out There? I Got Nothing Out There.

Player 322

Would you like to play a game with me?He asked.

<blockquote>
    <p>I Don’t Have A Home To Go Back To. In Here, I Stand A Chance At Least. But Out There? I Got Nothing Out There.</p>
    <cite>Player 322</cite>
</blockquote>
<p><q>Would you like to play a game with me?</q>He asked.</p>

<pre> : Preformatted text which is to be presented exactly as written in the HTML file.

<kbd> : Span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the HTML standard.

Please press Ctrl + Shift + R to re-render an MDN page.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>

<code>

The push() method adds one or more elements to the end of an array and returns the new length of the array.

<p>The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>

<figure> : figure tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<figcaption> : defines a caption for a <figure> element. Element can be placed as the first or last child of the element. figcaption can be used only as children element of figure.

srcset Attribute

Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.

Each set of image information is separated from the previous one by a comma.
find more about srcset

<img src="a.jpg" srcset="a.jpg, a.jpg 2x" alt="대체문구">
<img
width="200px"
srcset="img/logo_1.png 300w,
        img/logo_2.png 600w,
        img/logo_3.png 700w"
src="a.jpg"
alt="test">

Attributes

poster: A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

<video src="" poster="" preload="" controls playsinline>
  <source src="" type="">
  <track kind="" src="" srclang="" label="">
</video>

Form

: a document section containing interactive controls for submitting information.

Get, Post

Sensitive info like password should not be seen, so it shouldn't be sent via get. It's better to use post.
Also, it's easier to send large size of image, lots of data via post then get. If it needs to be hidden, use post as well.

<form action="./010.html" method="get">
        <label for="one">이름 : </label>
        <input type="text" name="id" id="one">
        <label for="two">패스워드 : </label>
        <input type="password" name="pw" id="two">
        <button type="submit">로그인</button><br>
</form>

It sends the data to the file that action is linked which is ./010.html
When it's sent (when you click submit button this is what you see at the browser file:///Users/dahyeji/Desktop/likelion/01_11_2021/010.html?id=hailey707&pw=12345

You can see 👉 ?id=hailey707&pw=12345
/?device(key/name)=iPhone(value)

Label

To associate the <label> with an <input> element, you need to give the an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

<label for="id">아이디: </label>
<input type="text" name="userId" id="id">

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

<label for="male">남</label>
<input type="radio" name="sex" id="male" value="male">
<label for="female">여</label>
<input type="radio" name="sex" id="female" value="female">

<form action="./011.html" method="get">
        <label for="id">아이디: </label>
        <input type="text" name="userId" id="id">
        <label for="pw">패스워드: </label>
        <input type="password" name="userPw" id="pw"><br>
        <label for="male">남</label>
        <input type="radio" name="sex" id="male" value="male">
        <label for="female">여</label>
        <input type="radio" name="sex" id="female" value="female"><br>

        <p>좋아하는 프로그래밍 언어</p><br>
        <label for="js">javaScript</label>
        <input type="checkbox" name="언어" id="js" value="javaScript">
        <label for="python">python</label>
        <input type="checkbox" name="언어" id="python" value="python">
        <label for="python">C</label>
        <input type="checkbox" name="언어" id="c" value="c">
        <label for="python">Go</label>
        <input type="checkbox" name="언어" id="go" value="go">

        <button type="submit">회원가입</button>
    </form>

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

<label>Do you like dogs?
  <input type="checkbox" name="dogs">
</label>