The Head first HTML&CSS knowledge point small note

Source: Internet
Author: User
Tags time and date

As the first book in the front-end, Head Html&css, some of the problems encountered in the learning process and the knowledge points needing attention are combed. Because this book is the type of entry, so the summary of the content is relatively basic, as a beginning to learn the front end of the milestone bar, to become senior FE when you look back to see the time of their own ...

Ps:chapter1&chapter2 content is simply not organized, starting from Chapter3

Chapter3 Web page Construction

<q> reference marks
This means that this is a specific content, which represents a paragraph of quoted text. By referencing text, you can add more meaning to the content of the tag.

For browser Browser, before the <q> element, browser only know this paragraph of text, which contains some double quote characters, and after using the <q> element, browser explicitly knows that this is a real reference.

Measurement: for chrome and IE, the default is <q> with double quotes to differentiate it from normal text.

The most important point: after using the <q> reference tag, you can use CSS to set the style of the reference so that it looks more distinctive. This is more than simply manually add double quotes to Nice!


It can also be used as a reference mark, but one thing to be aware of is that <blockquote> will have a new piece of content on its own and will be indented (ie and chrome).


<blockquote> and <q> are actually two different types of elements. <blockquote> is a block element that, when displayed, has a newline in front and back, and <q> is an inline element that always appears in the "inline" page text flow.

Block elements:

  Block elements maverick, inline elements drift.

Tips: block elements are often used as main component modules in Web pages, and inline elements are often used to mark small pieces of content. When designing a page, you typically start with a larger block (block Element) and then add inline elements when you refine the page. Can define the width, height is the block element, the other is an inline element.

Question:html has a sequence table <ol> and unordered list <ul>. Are there any other types of listings?

Answer: There is another list: Define list <dl>.

CHAPTER4 Connection

URL: Uniform Resource Locator Uniform Resource locators, which is usually what we call "Web address", "url" and so on. It is a global address that can be used to position any resource on the Web, including HTML pages, audio, video, and many other forms of web content.

In addition to specifying the location of the resource, the URL can also specify the protocol used to obtain the resource.

With a URL, you can request a browser to fetch a page (or other type of resource) from the Web. The Protocol section tells the browser what method to use to get the resource (in most cases, the protocol is HTTP). The site section (composed of servers and domain names) tells the browser to get resources from that computer on the Internet. The final absolute path tells us which page to look for.

If the browser requests a directory instead of a file to the Web server, For example: The browser may request:, when the Web server receives a request like this, It will try to find a default file in this directory. Usually the default file name is "index.html" or "default.html", if the server finds such a file, it will return it to the browser display.

Relative path and absolute path:

1. If there are many URLs in a Web page, they can be difficult to manage: the URLs are long, are not easy to edit, and also affect the readability of the HTML.

2. If a website is linked to a local page using a URL, moving the site or changing its name, you must modify all of the URLs to reflect the new site location. If you use a relative path, you do not have to make any changes to the href attribute of the <a> element as long as the page is still in the original folder, because the link is relative.

Therefore, you should use relative links to link pages in the same site, and use URL faces to link pages on other sites .

Chapter5 image

Three image formats commonly used in the Web: JPG, PNG, GIF

Q&a Summary:

The default way to display text on a computer screen is to be blunt, jagged, and poorly readable, so we need anti-aliasing (anti-aliasing) technology to soften its edges. Anti-aliasing can soften edges relative to the background color, so Matte (masks) in Photoshop Elements allow you to specify the background color, which is done when you soften the text.

If you put a transparent picture on a Web page, make sure that the mask color of the image is the same as the background color of the Web page. Transparent images can be in PNG or GIF format.

If the background color is only slightly adjusted, you may not notice any differences. If the background color changes greatly, PNG must be rebuilt with a new mask color.

PS: This chapter is mainly for the processing of pictures and the use of Photoshop, coding relevant knowledge points are not many.


HTML5 is the current HTML standard.

Document type definition doctype is used to tell the browser that you are using the HTML version, the chosen HTML standard is a "live standard", this standard will constantly change, add new features and new.

The <meta> tag in the

  Keep in mind that the standard is followed so that the page is displayed faster, and the differences are smaller when displayed between browsers, and CSS works better.

Chapter7 Start CSS Style

Html+css steps:

1. Create a. css file that contains the style rules for all head first lounge pages. The style in which the various elements are defined. 2. Using the <link> elements in HTML, use <link> elements in

Ask: When I load inherited values, how does the browser know which rule to apply to <em>?

Answer: For CSS, the most specific rule is always used. So, if there is a rule on <body> that has a more specific rule for the <em> element, it will use this more specific rule. If two selectors have the same uniqueness to resolve the conflict, the order of the rules in the stylesheet file will be used to resolve the problem. That is, the rules that are last listed in the CSS file are used (most of the latter).

You can use the Class property to add elements to a class, and you can select a specific element in the class by adding a "." between the element name and the class name. Use ". ClassName" to select all elements that belong to this class. By placing multiple class names in the Class attribute, you can specify that an element belongs to more than one class and that the class names are separated by a space.

Chapter8 color and style of fonts

CSS provides many properties to control the appearance of fonts, including font-family, Font-weight, Font-size, and Font-style.

Font-family is a group of fonts with common characteristics, and the font family for the web includes serif, Sans-serif, monospace, cursive, and fantasy. where serif and Sans-serif fonts are most commonly used.

The fonts that users see on your Web page depend on which fonts are installed on their own computers, and it is recommended that you specify candidate fonts in font-family to prevent users from installing your preferred font, and the last font to specify a common font, such as serif or Sans-serif, This way, if no other font is found, the browser can replace the appropriate font.

If you want to use a font, and by default the user does not have the font installed, you can use the @font-face rule in CSS.

Font sizes are typically specified using pixels, EM, percentages, or keywords. If you use pixel px to specify the font size, you are telling the browser how many pixels the letter height is. Em and% are relative font sizes, so when using EM and%, their actual font size is specified relative to the font size of its parent class element. using a relative font size can make your page more maintainable . Use the font size keyword in the body rule to set the base font size so that if the user wants the text to be larger or smaller, all browsers will be able to scale the font size proportionally.

The Font-weight property is used to set the text to bold, and the Font-style property is used to create italic or italic body text.

The web color is mixed with different amounts of red, green, and blue obtained. Three colors are 100% get white, three colors are 0% get black. CSS has 16 basic colors, can be directly represented by keywords, and 150 kinds of extended colors.

You can use the red, green, and blue percentages to specify the color you want, or you can use the value of Bet win (0-255) to specify it, or use the hexadecimal code of the color to specify the color. PS: You can use the color selection tool of the photo editing app to get the hexadecimal code for the desired color.

You can use the Text-decoration property to create an underscore for text, but underlined documents are often considered link text, so use this property with caution.

CHAPTER9 Box Model

CSS uses box models to control how elements are displayed. The box has a content area and optional padding, borders, and margins. Where the content area contains the contents of the element, the padding is used to create visible space around the content area, and the bounding rectangle surrounds the inner margin and content, which provides a means of separating the content visually, and the margin surrounds the border, padding, and content, allowing space to be added between elements and other elements. The padding, borders, and margins are optional.

The background of the element is displayed in the content and padding, but not beyond the border, and does not extend below the margin.

The size of the padding and margins can be set in pixels or percentages. The border width can be set in pixels, or it can be specified with keywords thin, medium, and thick, with 8 different styles, including solid, broken, dashed, and ridge lines.

For margins, padding, or borders, CSS provides properties that can be set on or off four edges at a time, and can be set on one side individually.

The Border-radius property can create fillets on elements that have borders

The Line-height property can increase the spacing between the lines of the file

The Background-image property places the image on the background of the element, using Background-position and background-repeat to set the location of the background image and to lay

Use the class attribute for elements that you want to specify styles for a group, and for those elements that you want to uniquely specify a style, you can use the id attribute to specify a unique name, the ID cannot be duplicated, and you can use the ID selector to select elements by ID, such as #myfavoriteid.

  An element can have only one ID, but it may belong to more than one class.

HTML can use more than one style sheet, and if two style sheets contain conflicting attribute definitions, the last linked style sheet in the HTML file takes precedence.

Chapter10 Div span and pseudo class

The <div> element is used to group related elements together in a logical area, and creating a logical area helps identify the main content area and the header and footer of the page. Elements that require a common style can be grouped together using the <div> element.

Use nested <div> elements to add more structure to the file, which helps ensure a clear structure and easy to add styles. It is important to note , however, that you should not increase the structure too much. Once the content area is grouped together with the <div> element, similar to other block elements, you can add styles to these <div>.

The Width property sets the widths of an element's content area. The total width of an element is the width of the content area, plus the width of the added padding, borders, and margins. Once the width of an element is set, it does not extend to the full width of the browser window.

Text-align is a property of a block element that aligns all the contents of an entire block element, can be centered, left-aligned, or right-aligned. This property can be inherited by all nested block elements.

You can use the descendant selector to select elements that are nested within other elements. For example, descendant selector div h2{...} All

You can use shortcuts for related properties. For example, Padding-top, Padding-right, Padding-bottom, and Padding-left are related to the internal margins, and a padding can be used to set their values uniformly. Similarly, padding, margins, borders, backgrounds, and font properties can be made with shortcuts.

The <span> inline element is similar to the <div> element, which has a grouping of related inline elements and text. Similar to <div>, you can add <span> elements to a class, or set an ID on them to make it easier to add styles to them.

Some elements have different states, such as the <a> element, which mainly includes non-access, access, and hover. You can use pseudo-classes to specify individually for each state: link corresponds to an visited, and the link corresponds to a linked connection that has already been visited: hover corresponds to the hover state. Pseudo-classes can also be used for other elements, not just <a>. Other pseudo-classes include: Active,:focus,:first-child and: Last-child.

Chapter11 Layout and positioning

The browser uses the stream to place elements in the page

  The block element flows from top to bottom, and there is a line break between the elements. By default, each block element takes up the entire width of the browser window
  inline elements flow inside the block element from the upper left to the lower right. If more than a row is required, the browser wraps and expands the perimeter block elements vertically to include the inline elements.

The margins of the two block elements in the normal page stream are collapsed to the maximum margin size, or if the two margins are the same size, they are collapsed to one margin.

Floating elements are removed from the normal flow and floated to the left or right. Floating elements are placed above the block elements without affecting the normal page flow. However, inline elements take into account the boundary of the floating element, which surrounds the floating element. The floating element must have a specific width and cannot be set to auto.

The clear property is used to specify that the left or right side of a block element (or both sides) cannot have a floating element. The block element that has the clear property set moves down until it has no floating element next to it.

  Fluid layout means that when you extend a browser window, the content in the page expands to fit the page.
  freezing a layout means that the width of the content is fixed and does not expand or shrink with the browser window. This allows more control over the design, but the disadvantage is that the browser's width cannot be effectively exploited.
  The tape is defined as the width of the content is fixed, but the margin expands or shrinks with the browser window. The gel board usually places the content in the center of the page, with the same benefits as freezing the page, and is more aesthetically pleasing than freezing the page.

The Position property can be set to 4 values: static, Absolute, fixed, and relative
Static positioning is the default way to place elements in the normal flow of a page
Absolute positioning allows you to place elements anywhere on the page. By default, absolute positioning is placed relative to the page boundary. If an absolutely positioned element is nested within another anchor element, the element is positioned relative to the outer containing element
With absolute, fixed, and relative positioning, the properties top, right, bottom, and left can be used to specify the position of the element

  An absolutely positioned element can be placed hierarchically using the Z-index attribute so that one element is on top of another element. The larger the Z-index value, the higher its level (the closer you are to the screen)
  fixed positioning elements are always positioned relative to the browser window, and the fixed anchor element does not move when the page scrolls. Other content on the page scrolls normally under these fixed positioning elements.
  relative positioning elements first flow normally into the page and then offset by the specified amount, leaving the space where they were originally located. When using relative positioning, left, right, top, and bottom are offset from the position of the element in the normal flow

CSS table display allows elements to be placed on a table layout
To create a CSS table display, you need to use a block element of the corresponding table, a block element corresponding to the row, and a block element for the corresponding cell. Usually these elements are <div> elements.
If you need to create a multi-column layout and the content bar is uniform, the table display is a good layout strategy.

Chapter HTML5 new elements

HTML5 provides a number of new elements that make it no longer necessary to use a single div+class to create a page structure:
<section> for grouping related content
<article> for standalone content like blog posts, forum posts, and news reports
<aside> used to represent minor content that is not the main content of a page, such as illustrations and sidebar
<nav> for site navigation links
<footer> will usually be placed at the bottom of the page or block, such as document information, legal wording, and copyright descriptions.
<time> to mark time and date

Note that:<div> can still be used to build structures that typically organize elements together to specify styles, or that some of the content might not fit in the new structure-related elements in HTML5, you can use <div> to create structures

<video> is a new HTML element that is used to add video to a Micro page.
Video encoding is the encoding used to create video files, usually including H. Vp8 and Theora, and video container files contain video, audio, and meta data. Easy-to-format encoding for MP4, OGG, and WEBM
MP4:H.264 Video AAC Audio
WEBM:VP8 Video Vorbis Audio
Ogg:theora Video Vorbis Audio
Be sure to provide multiple video source files to ensure that users can see your video files in the browser

Chapter 13 Table
HTML uses <table>, <tr>, <th>, <td> to create a table. <table> defines and surrounds the entire table,<tr> elements are used to define row,<td> used to define one or more data cells that each row contains,<th> as rows or lists of header data cells.
The table is in a grid layout, each line corresponds to a <tr>...</tr> line in the HTML, and the elements in the row correspond to one <td>...</td> content
You can use the caption element to provide additional information about the table, such as the name of the table
Tables have border spacing, which is the spacing between cells, and cells have padding and borders, as well as CSS control elements, and you can use CSS to control the padding, borders, and margins of table cells.

Border-collapse is a special CSS property for cells that is used to combine cell borders into a single border to make the appearance more concise
Text-align and Vertical-align to change the alignment of the data in the cell
Background-color can add a background color for an entire table, rows, or individual data cells

  If a data cell has no data, you still need to use a <td>...</td> element to maintain the table to it, but you can place nothing in it

When a data cell needs to span multiple rows or columns, you can use the rowspan or colspan property of the <td> element. If the table is complex, you can nest tables in a table and put all the contents of the <table> element and the inline table in a single data cell.

  When you use a table, you should confirm that it is used to represent tabular data, rather than creating a page layout .

The list can also use CSS to change styles, and there are several list-specific CSS properties, such as:
List-style-type allows you to change the list marker type used in the list: disc, square, circle, none, etc.
List-style-image allow List to mark graphics, followed by the URL of the image corresponding

Chaper 14 Interactive Forms

The <form> element defines the form, so the form input elements are nested within the element. Where the Action property contains the URL of the server script. You can use the method property to modify the way the form data is sent, either get or post.

POST: Package The form data and send it to the server as part of the request
GET: Package form data, but append to URL as clear text
Post provides better privacy if the form data should be private (for example, contain personal information), or the form data content is a lot (inconvenient to add after the URL), such as using a <textarea> or file<input> element, You should use post
For requests that can be bookmarked, such as adding bookmarks to query results, using get is preferable
When a Web form is submitted, the form data values are paired with the corresponding data names, and all names and values are sent to the server as input to the corresponding script for processing.

The <input> element can be used as several different input controls on a Web page, primarily depending on its Type property value:
Text creates a single-line literal input box that can be used to provide an initial value for a single-line text input control by setting the Value property
Submit creates a Submit button that sets the Value property to change the text displayed on the button
Radio creates a radio button with all radio buttons of the same name forming a set of mutually exclusive buttons
A checkbox creates a check box that specifies the same name with multiple checkboxes, and you can create a set of selection
Number creates a single-line text input control that allows only numeric characters
Range creates a slider control to provide a digital input
Color creates a colour selector in browsers that support this type (otherwise, only a normal text input control is created)
Date creates a day selector in browsers that support this type (otherwise only a normal text input control is created)
Email, URL, tel, etc. will create a single line of text input, and a custom keyboard will appear on some mobile browsers to assist with data entry.
TextArea creates a multiline text input area, placing the text in the contents of the textarea element, which becomes the default text in the text area control on the Web page
Select creates a menu that contains one or more option options, and the option element defines the menu item

Because the form has a table structure, the form layout is usually created using the CSS table display. CSS can also be used to specify the form's color, font style, border, and other styles

As forms grow larger, you can use fieldset to organize common elements together, and the legend elements that you use with them will add a title to the field.
You can use label elements to correlate labels with form elements to improve accessibility
Use the placeholder property to provide a sample hint to the form user indicating what you want to enter in an input field
The Required property hints that an input field is necessary to allow the form to be successfully submitted, and the input field must have a value. Some browsers will prompt you before submitting your form, forcing you to enter data in those fields

Head First HTML&CSS knowledge point note

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.