Featured image of post HTML 笔记



  • heading are defined with <h1> to <h6>

  • links are defined with the <a> tag.

  • HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

  • All HTML elements can have attributes.

  • The alt attribute specifies an alternative text to be used, if an image cannot be displayed.

  • Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size.

  • The <hr> element is used to separate content (or define a change) in an HTML page.

  • With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed.

  • The HTML `' element defines a line break.

  • Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.

  • The HTML <ins> element defines inserted/added text.

  • The HTML <q> element defines a short quotation.

  • The HTML <blockquote> element defines a section that is quoted from another source.

  • The HTML <abbr> element defines an abbreviation or an acronym.

  • The HTML <bdo> element defines bi-directional override.

  • HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

  • CSS stands for Cascading Style Sheets.

  • The CSS font-family property defines the font to be used.

  • The CSS padding property defines a padding (space) between the text and the border.

  • The CSS margin property defines a margin (space) outside the border

  • Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

  • Link border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

  • Image Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

  • Image HTML allows animated GIFs.

  • Image Background If you want the background image cover the entire element, you can set the background-size property to cover.Also, to make sure the entire element is always covered, set the background-attachment property to fixed.

  • A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).Block level elements in HTML:<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

  • An inline element does not start on a new line and only takes up as much width as necessary.Inline elements in HTML: <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

  • The <div> element is often used as a container for other HTML elements.

  • The <span> element is often used as a container for some text.

  • HTML elements can have more than one class name, each class name must be separated by a space.

  • Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.

  • The id value is case-sensitive and must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

  • The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripts.

  • The <base> element specifies the base URL and base target for all relative URLs in a page.

  • According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.

  • There are five different ways to create multicolumn layouts. Each way has its pros and cons:

    HTML tables (not recommended)
    CSS float property
    CSS flexbox
    CSS framework
    CSS grid
  • A web page should look good on any device!

  • If the CSS width property is set to 100%, the image will be responsive and scale up and down, and if the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

  • The responsive text size can be set with a “vw” unit, which means the “viewport width”.

  • Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

  • Text surrounded by <kbd> tags is typically displayed in a monospace font.

  • A common character entity used in HTML is the non-breaking space:  .

  • Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

  • The non-breaking hyphen () lets you use a hyphen character (‑) that won’t break.

  • Entity names are case sensitive.

  • URL encoding replaces non-ASCII characters with a “%” followed by hexadecimal digits.

  • URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

comments powered by Disqus