HTML MegaDoc

KnightHacker2077

已于 2022-06-03 06:50:36 修改

阅读量306

点赞数

分类专栏： Frontend 文章标签： html

于 2022-01-10 04:25:26 首次发布

本文链接：https://blog.csdn.net/DOITJT/article/details/122402867

版权

Frontend 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

<!DOCTYPE html>: required doctype tag.
<html>: HTML root tag
- <head>: all stuff that are essential but not visible to users
  - <meta charset="utf-8">: sets the character set your document should use to UTF-8
  - <title>: the title on the browser tag, not the header on the actual page
- <body>: the page that is visible to the user

Empty element: a tag that doesn't have a closing tag, e.g. <img src="..." alt="...">

Attributes:

action: the URL to send the data when the form is submitted.
method: HTTP method, get/post, to send form data

Heading

In total there are 6 headers, <h1> ~ <h6>
Here are <h1> ~ <h6> from top to bottom

List

2 types of lists

Ordered: 有编号，<ol>
Unordered: 无编号，有radio button，<ul>

ordered list

<ol>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ol>

unordered list

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

Link

<a href="...">some text</a>
a = anchor
href = hypertext reference

<a href="https://www.google.com">Google</a>

** DO NOT omit the http/https in the href, they can make a huge difference

Form

HTML user input

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>