web1 복습, most frequent tag28

카테고리 없음

web1 복습, most frequent tag28

SOME코딩 2021. 12. 10. 22:29

기본 html 탬플릿?!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>google</title>
  </head>
  <body>
  </body>
</html>

https://www.advancedwebranking.com/html/

most frequency

1. <html>

2. <head> : inside element(<title>, <style>, <base>, <link>, <meta>, <script>, <noscript>)

3. <body>

4. <title> : in <head>. text-only.

added to favorites, search-engine results

5. <meta> : in <head>, metadata

attribute

1) charset : character encoding

2) content : associated with the 'http-equiv' or 'name' attribute.

3) http-equiv : HTTP header information

4) name : name of metadata

ex) <meta name="author" content="John Doe">

6. <div> : section in a document that is styled with CSS.(line break before and after)

7. <a> : hyperlink

attribute

1) download : the file specified in the href will be downloaded when clicks

ex) <a href="/images/myw3schoolsimage.jpg" download="filename"> -> 클릭하면 filename.jpg로 저장된다.

2) href : URL of the link

3) hreflang : language of the linked document. only used if the href attribute is set.

ex) <a href="https://www.w3schools.com" hreflang="en">W3Schools</a>

4) media : what media or device the linked document is optimized for. only used if the href attribute is set.

5) ping : Specifies the URL to be notified if the user follows the hyperlink.

6) referrerpolicy : which referrer information to send when the user clicks on the hyperlink.

ex) <a href="https://www.w3schools.com" referrerpolicy="origin">

7) rel : relationship between the current document and the linked document. only used if the href attribute is set.

ex) <a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>

8) target : where to open the linked document

values(_blank[new tab], _self[same frame], _parent[parent frame], _top[full body of the window], framename)

ex) <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

9) type : media type of the linked document. only used if the href attribute is set.

ex) <a href="https://www.w3schools.com" type="text/html">W3Schools</a>

21.12.11

8. <script> : embed a client-side script (JavaScript)

ex) <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

attribute

1) async : script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) (only for external scripts)

2) crossorigin : Sets the mode of the request to an HTTP CORS Request

3) defer : script is downloaded in parallel to parsing the page, and executed after the page has finished parsing (only for external scripts)

4) integrity : check the fetched script to ensure that the code is never loaded if the source has been manipulated.

downloads the file, then checks it, to make sure that it is a match with the hash

5) nomodule : script should not be executed in browsers supporting ES2015 modules

6) referrerpolicy : which referrer information to send when fetching a script

7) src : URL of an external script file

ex) <script src="myscripts.js"></script>

8) type : media type of the script

ex) <script type="application/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

ex) <script type="module" src="new_tab_page.js"></script>

9. <link> : the relationship between a document and an external resource (most used to link to style sheets)

most often used to link to external style sheets or to add a favicon to your website.

attribute(crossorigin, href, hreflang, media, referrerpolicy, rel, sizes, title, type)

1) href : The URL of the linked resource/document.

ex) <link rel="stylesheet" href="styles.css">

2) rel : Required. Specifies the relationship between the current document and the linked document

10. <img> : ex) <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

attribute(alt, crossorigin, height, ismap, loading, longdesc, referrerpolicy, sizes, src, srcset, usemap, width)

1) alt : required. alternate text for an image

2) src : path to the image

11. <span> : an inline container used to mark up a part of a text, or a part of a document.

<div> is a block-level element and <span> is an inline element.

12. <p> : paragraph, block-level element(https://www.w3schools.com/html/html_blocks.asp)

ex) <p>This is some text in a paragraph.</p>

13. <li> : list item. inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>)

ex) <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

14. <ul> : unordered list.(bulleted) together with the <li> tag to create unordered lists.

15. <style> : style information for a document(CSS)

16. <br> : a single line break. useful for writing addresses or poems. empty tag(it has no end tag.)

17. <h2>: <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading.

Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

18. <input> : an input field where the user can enter data.

input type(button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week)

19. <h1>

20. <form> : HTML form for user input

ex) <form action="/action_page.php" method="get">

attrubutes(accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, target)

1) action : where to send the form-data when a form is submitted.

2) method : how to send form-data

values(get : Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value

post : Sends the form-data as an HTTP post transaction)

The <form> element can contain one or more of the following form elements:

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>

21. <h3>

22. <nav> : a set of navigation links.

23. <footer> : a footer for a document or section.

24. <header> : a container for introductory content or a set of navigational links.

25. <iframe> : inline frame is used to embed another document within the current HTML document.

ex) <iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the <iframe> is.

attrubutes(allow, allowfullscreen, allowpaymentrequest, height, loading, name, referrerpolicy, sandbox, src, srcdoc, width)

26. <button> Always specify the type attribute

ex) <button type="button">Click Me!</button>

attributes(autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value)

1) type : values(butto, submit, reset)

27. <strong> : important text. displayed in bold.

Use the <b> tag to specify bold text without any extra importance!

28. <i> : a part of text in an alternate voice or mood. displayed in italic.

tag & attribute & value 공부 참고

https://www.w3schools.com/tags/tag_a.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div