rocflytosky
- 浏览: 150927 次
- 来自: 北京
-
文章分类
最新评论
-
buttom：
adblock也不错的
Firefox及插件 -
stonestrange：
JE上要获得发言权真不容易~
(*^__^*) 嘻嘻……
继 ...
成长的足迹 -
20065129：
姜还是老的辣，这个世界还是很BT，我还是太嫩了！呵呵
毕业设计指导流程 -
dennis_zane：
呵呵，我儿子也是母乳搭配奶粉，奶粉吃的少，一个月才吃一罐，现在 ...
母乳喂养的孩子抵抗力真的很强！ -
anyeao：
下了,看看,就要写毕业论文了,谢谢
表达的技巧
CH1 BULLET POINTS
• HTML and CSS are the languages we use to create web pages.
• Web servers store and serve Web pages, which are created from HTML and CSS. Browsers retrieve pages and render their content based on the HTML and CSS.
• HTML is an abbreviation for HyperText Markup Language and is used to structure your web page.
• CSS is an abbreviation for Cascading Style Sheets, and is used to control the presentation of your HTML.
• Using HTML we mark up content with tags to provide structure. We call matching tags, and their enclosed content, elements.
• An element is composed of three parts: an opening tag, content and a closing tag. There are a few elements, like <img>, that are an exception to this rule.
• Opening tags can have attributes. We've seen a couple: type and align.
• Closing tags have a "/" after the left angle bracket, in front of the tag name to distinguish them as closing tags.
• Your pages should always have an <html> element along with a <head> element and a <body> element.
• Information about the Web page goes into the <head> element.
• What you put into the <body> element is what you see in the browser.
• Most whitespace (tabs, returns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you).
• CSS can be added to an HTML Web page by putting the CSS rules inside the <style> element. The <style> element should always be inside the <head> element.
• You specify the style characteristics of the elements in your HTML using CSS.
CH2 BULLET POINTS
• When you want to link from one page to another, use the <a> element.
• The href attribute of the <a> element specifies the destination of the link.
• The content of the <a> element is the label for the link. The label is what you see on the Web page. By default, it's underlined to indicate you can click on it.
• You can use words or an image as the label for a link.
• When you click on a link, the browser loads the Web page that's specified in the href attribute.
• You can link to files in the same folder, or files in other folders.
• A relative path is a link that points to other files on your Web site relative to the Web page you're linking from. Just like on a map, the destination is relative to the starting point.
• Use ".." to link to a file that's one folder above the file you're linking from.
• ".." means "parent folder."
• Remember to separate the parts of your path with the "/" character.
• When your path to an image is incorrect, you'll see a broken image on your Web page.
• Don't use spaces in names when you're choosing names for files and folders for your Web site.
• It's a good idea to organize your Web site files early on in the process of building your site, so you don't have to change a bunch of paths later when the Web site grows.
• There are many ways to organize a Web site; how you do it is up to you.
CH3 BULLET POINTS
• Plan the structure of your Web pages before you start typing in the content. Start with a sketch, then create an outline, and finally write the HTML.
• Plan your page starting with the large, block elements, and then refine with inline elements.
• Remember, whenever possible, use elements to tell the browser what your content means.
• Always use the element that most closely matches the meaning of your content. For example, never use a paragraph when you need a list.
• <p>, <blockquote>, <ol>, <ul>, and <li> are all block elements. They stand on their own and are displayed with space above and below the content within them.
• <q>, <em>, and <a> are all inline elements. The content in these elements flows in line with the rest of the content in the containing element.
• Use the <br> element when you need to insert your own linebreaks.
• <br> is an "empty element."
• Empty elements have no content.
• An empty element consists of only one tag.
• A nested element is an element contained completely within another element. If your elements are nested properly, all your tags will match correctly.
• You make an HTML list using two elements in combination: use <ol> with <li> for an ordered list; use <ul> with <li> for an unordered list. When the browser displays an ordered list, it creates the numbers for the list so you don't have to.
• You can specify your own ordering in an ordered list with the start attribute. To change the values of the individual items, use the value attribute.
• You can build nested lists within lists by putting <ol> or <ul> elements inside your <li> elements.
• Use entities for special characters in your HTML content.
CH4 BULLET POINTS
• Typically the best way to get on the Web is to find a hosting company to host your Web pages.
• A domain name is a unique name, like amazon.com or starbuzzcoffee.com, that is used to identify a site.
• A hosting company can create one or more Web servers in your domain. Servers are often named "www".
• The File Transfer Protocol (FTP) is a common means of transferring your Web pages and content to a server.
• FTP applications, like Fetch for Mac or WS_FTP for Windows, can make using FTP easier by providing a graphical user interface.
• A URL is a Uniform Resource Locator, or Web address, that can be used to identify any resource on the Web.
• A typical URL consists of a protocol, a Web site name, and an absolute path to the resource.
• HTTP is a request and response protocol used to transfer Web pages between a Web server and your browser.
• The file protocol is used by the browser to read pages from your computer.
• An absolute path is the path from the root folder to a file.
• "index.html" and "default.htm" are examples of default pages. If you specify a directory without a filename, the Web server will look for a default page to return to the browser.
• You can use relative paths or URLs in your <a> element's href attribute to link to other Web pages. For other pages in your site, it's best to use relative paths, and use URLs for external links.
• Use the id attribute to create a destination anchor in a page. Use '#' followed by a destination anchor id to link to that location in a page.
• To help accessibility, use the title attribute to provide a description of the link in <a> elements.
• Use the target attribute to open a link in another browser window. Don't forget that the target attribute can be problematic for users on a variety of devices and alternative browsers.
CH5 BULLET POINTS
• Use the <img> element to place images in your Web page.
• Browsers treat <img> elements a little differently than other HTML elements; after reading the HTML page, the browser retrieves each image from the Web server and displays it.
• If you have more than a couple of large images on a Web page, you can make your Web page more usable and faster to download by creating thumbnails small images that the user can click on to see the large version of the image.
• The <img> element is an inline element, which means that the browser doesn't put a linebreak before or after an image.
• The src attribute is how you specify the location of the image file. You can include images from your own site using a relative path in the src attribute, or images from other sites using a URL.
• The alt attribute of an <img> element is a meaningful description of the image. It is displayed in some browsers if the image can't be located, and is used by screen readers to describe the image for the visually impaired.
• A width of less than 800 pixels is a good rule of thumb for the size of photo images in a Web page. Most photo images that are created by digital cameras are too large for Web pages, so you'll need to resize them.
• Photoshop Elements is one of many photo editing applications you can use to resize your images.
• Images that are too large for the browser make Web pages difficult to use and slow to download and display.
• A pixel is the smallest dot that can be represented on the screen. Each image is composed of thousands of pixels. Depending on your monitor, there can be anywhere from 72 pixels in an inch to 120 pixels in an inch.
• JPEG and GIF are the two formats for images that are widely supported by Web browsers.
• The JPEG format is best for photographs and other complex images.
• The GIF format is best for logos and other simple graphics with solid colors, lines, or text.
• JPEG images can be compressed at a variety of different qualities, so you can choose the best balance of quality and file size for your needs.
• The GIF image format allows you to make an image with a transparent background. If you put an image with a transparent background in a Web page, what's behind the image, such as the background color of the page, will show through the transparent parts of the image.
• In Photoshop Elements, use the Matte color menu in the "Save for Web" dialog to choose the right color for softening the edges of your transparent GIF image.
• Images can be used as links to other Web pages. To create a link from an image, use the <img> element as the content of an <a> element, and put the link in the href attribute of the <a> element.
CH6 BULLET POINTS
• HTML 4.01 is the HTML standard that is most widely supported by browsers.
• The World Wide Web Consortium (W3C) is the standards organization that defines what "standard HTML" is.
• Many browsers have two modes for displaying HTML: "quirks" mode for old HTML and standards mode for HTML 4.01.
• If you don't tell the browser which version of HTML you are using, many browsers will use quirks mode, which may cause inconsistent page display in various browsers.
• The document type definition (DOCTYPE) is used to tell the browser which version of HTML your Web page is written in.
• The strict DOCTYPE is used if you are writing fully compliant HTML 4.01.
• Use the transitional DOCTYPE if you are transitioning HTML that still includes display-oriented elements and attributes.
• The <meta> tag in the <head> element tells the browser additional information about a Web page, such as the content type and character encoding.
• A character encoding tells the browser the character set that is used in the Web page.
• Most Western-European languages used on computers today can be represented with the ISO-8859-1 character encoding.
• The W3C validator is a free online service that checks pages for compliance with standards.
• Use the validator to ensure that your HTML is well formed and that your elements and attributes meet the standards.
• By adhering to standards, your pages will display more quickly and with fewer display differences between browsers.
CH8 BULLET POINTS
• CSS contains simple statemlents, called rules.
• Each rule provides the style for a selection of XHTML elements.
• A typical rule consists of a selector along with one or more properties and values.
• The selector specifies which elements the rule applies to.
• Each property declaration ends with a semicolon.
• All properties and values in a rule go between {} braces.
• You can select any element using its name as the selector.
• By separating element names with commas, you can select multiple elements at once.
• One of the easiest ways to include a style in HTML is the <style> tag.
• For XHTML and for sites of any complexity, you should link to an external style sheet.
• The <link> element is used to include an external style sheet.
• Many properties are inherited. For instance, if a property that is inherited is set for the <body> element, all the <body>'s child elements will inherit it.
• You can always override properties that are inherited by creating a more specific rule for the element you'd like to change.
• Use the class attribute to add elements to a class.
• Use a "." between the element name and the class name to select a specific element in that class.
• Use ".classname" to select any elements that belong to the class.
• An element can belong to more than one class by placing multiple class names in the class attribute with spaces between the names.
• You can validate your CSS using the W3C validator, at http://jigsaw.w3.org/css-validator.
CH9 BULLET POINTS
• CSS gives you lots of control over the look of your fonts, including properties like font-family, font-weight, font-size, and font-style.
• A font-family is a set of fonts that share common characteristics.
• The font families for the Web are serif, sans-serif, monospace, cursive, and fantasy. Serif and sans-serif fonts are most common.
• The fonts that your visitors will see in your Web page depend on the fonts they have installed on their own computers.
• It's a good idea to specify font alternatives in your font-family CSS property in case your users don't have your preferred font installed.
• Always make the last font a generic font like serif or sans-serif, so that the browser can make an appropriate substitution if no other fonts are found.
• Font-sizes are usually specified using px, em, %, or keywords.
• If you use pixels ("px") to specify your font size, you are telling the browser how many pixels tall to make your letters.
• em and % are relative font sizes, so specifying your font size using em and % means the size of the letters will be relative to the font size of the parent element.
• Using relative sizes for your fonts can make your pages more maintainable.
• Use the font size keywords to set the base font size in your body rule, so that all browsers can scale the font sizes if users want the text to be bigger or smaller.
• You can make your text bold using the font-weight CSS property.
• The font-style property is used to create italic or oblique text. Italic and oblique text is slanted.
• Web colors are created by mixing different amounts of red, green, and blue.
• If you mix 100% red, 100% green, and 100% blue, you will get white.
• If you mix 0% red, 0% green, and 0% blue, you will get black.
• CSS has 17 predefined colors, including black, white, red, blue, and green.
• You can specify which color you want using percentages of red, green, and blue, using numerical values of 0255 for red, green, and blue, or using a color's hex code.
• An easy way to find the hex code of a color you want is to use a photo-editing application's color picker or one of many online Web tools.
• Hex codes have 6 digits, and each digit can be from 0-F. The first two digits represent the amount of red, the second two the amount of green, and the last two the amount of blue.
• You can use the text-underline property to create an underline for text. Underlined text is often confused as linked text by users, so use this property carefully.
CH10 BULLET POINTS
• CSS uses a box model to control how elements are displayed.
• Boxes consist of the content area and optional padding, border, and margin.
• The content area contains the content of the element.
• The padding is used to create visual space around the content area.
• The border surrounds the padding and content and provides a way to visually separate the content.
• The margin surrounds the border, padding, and content, and allows space to be added between the element and other elements.
• Padding, border, and margin are all optional.
• An element's background will show under the content and the padding, but not under the margin.
• Padding and margin size can be set in pixels or percentages.
• Border width can be set in pixels or by using the keywords thin, medium, and thick.
• There are eight different styles for borders, including solid, dashed, dotted, and ridge.
• When setting margins, padding, or the border, CSS provides properties for setting all the sides (top, right, bottom, left) at once, or it allows them to be set independently.
• Use the line-height property to add space between lines of text.
• You can place an image in the background of an element with the background-image property.
• Use the background-position and background-repeat properties to set the position and tiling behavior of the background image.
• Use the class attribute for elements that you want to style together, as a group.
• Use the id attribute to give an element a unique name. You can also use the id attribute to provide a unique style for an element.
• There should only be one element in a page with a given id.
• You can select elements by their id using the id # selector; for example #myfavoriteid.
• An element can have only one id, but it can belong to many classes.
• You can use more than one style sheet in your XHTML.
• If two style sheets have conflicting property definitions, the style sheet that is last in the XHTML file will receive preference
• You can target media devices such as "print" or "handheld" by using the media attribute in your <link> element.
CH11 BULLET POINTS
• <div> elements are used to group related elements together into logical sections.
• Creating logical sections can help you identify the main content areas, header, and footer of your page.
• You can use <div> elements to group elements together that need a common style.
• Use nested <div> elements to add further structure to your files for clarity or styling. But don't add structure unless you really need it.
• Once you have grouped together sections of content with <div> elements, you can style the <div>s just like you would any other block element. For example, you can add a border around a group of elements using the border property on the <div> they are nested in.
• The width property sets the width of the content area of an element.
• The total width of an element is the width of the content area, plus the width of any padding, border, and margins you add.
• Once you set the width of an element, it no longer expands to fit the entire width of the browser window.
• Text-align is a property for block elements that centers all inline content in the block element. It is inherited by any nested block elements.
• You can use descendant selectors to select elements nested within other elements. For instance, the descendant selector
• div h2 { ... }
•
selects all <h2>s nested in <div> elements (including children, grandchildren, etc.).
• You can use shortcuts for related properties. For instance, padding-top, padding-right, padding-bottom, and padding-left are all related to padding, and can be specified with one shortcut rule, padding.
• Padding, margin, border, background, and font properties can all be specified with shortcuts.
• The <span> inline element is similar to the <div> element: it is used to group together related inline elements and text.
• Just like with <div>, you can add <span> elements to classes (or give <span> elements unique ids) to style them.
• The <a> element is an example of an element with different states. The main <a> element states are unvisited, visited, and hover.
• You can style each of these states separately with pseudo-classes. The pseudo-classes used most often with the <a> element are :link, for unvisited links, :visited, for visited links, and :hover, for the hover state.
• Other elements support the :hover pseudoclass, and some browsers also support the :first-child, :active, and :focus pseudo-classes for other elements.
CH12 BULLET POINTS
• Browsers place elements in a page using flow.
• Block elements flow from the top down, with a linebreak between elements. By default, each block element takes up the entire width of the browser window.
• Inline elements flow inside a block element from the top left to the bottom right. If more than one line is needed, the browser creates a new line, and expands the containing block element vertically to contain the inline elements.
• The top and bottom adjacent margins of two block elements in the normal page flow collapse to the size of the larger margin, or to the size of one margin if they are the same size.
• Floated elements are taken out of the normal flow and placed to the left or right.
• Floated elements sit on top of block elements and don't affect their flow. However, the inline content respects the boundaries of a floated element and flows around it.
• The clear property is used to specify that no floated elements can be on the left or right (or both) of a block element. A block element with clear set will move down until it is free of the block element on its side.
• A floated element must have a specific width set to a value other than auto.
• A liquid layout is one in which the content of the page expands to fit the page when you expand the browser window.
• A frozen layout is one in which the width of the content is fixed and it doesn't expand or shrink with the browser window. This has the advantage of providing more control over your design, but at the cost of not using the browser width as efficiently.
• A jello layout is one in which the content width is fixed, but the margins expand and shrink with the browser window. A jello layout usually places the content in the center of the page. This has the same advantages as the frozen layout, but is often more attractive.
• There are four values the position property can be set to: static, absolute, fixed, and relative.
• Static positioning is the default, and places an element in the normal flow of the page.
• Absolute positioning lets you place elements anywhere in the page. By default, absolutely positioned elements are placed relative to the sides of the page.
• If an absolutely positioned element is nested within another positioned element, then its position is relative to the containing element that is positioned.
• The properties top, right, bottom, and left are used to position elements for absolute, fixed, and relative positioning.
• Absolutely positioned elements can be layered on top of one another using the z-index property. A larger z-index value indicates it is higher in the stack (closer to you on the screen).
• Fixed position elements are always positioned relative to the browser window and do not move when the page is scrolled. Other content in the page scrolls underneath these elements.
• Relatively positioned elements are first flowed into the page as normal, and then offset by the specified amount, leaving empty the space where they would normally sit.
• When using relative positioning, left, right, top, and bottom refer to the amount of offset from the element's position in the normal flow.
• The same design can often be achieved using floating elements or absolutely positioned elements.
• Float provides a flexible solution for multicolumn layouts and allows elements to clear floated elements from their sides, something that can't be done with absolute positioning.
CH13 BULLET POINTS
• XHTML tables are used to structure tabular data.
• Use the HTML table elements, <table>, <tr>, <th>, and <td> together to create a table.
• The <table> element defines and surrounds the entire table.
• Tables are defined in rows, using the <tr> element.
• Each row contains one or more data cells, defined with the <td> element.
• Use the <th> element for data cells that are row or column headings.
• Tables are laid out in a grid. Each row corresponds to a <tr>...</tr> row in your HTML, and each column corresponds to the <td>...</td> content within the rows.
• You can provide additional information about your tables with the table summary attribute, and the <caption> element.
• Table data cells can have padding, borders, and border spacing, which is the space between cells.
• Just like you can control the padding, borders, and margins of elements, you can control the padding, borders, and border spacing of table cells with CSS.
• The border-collapse property is a special CSS property for tables that allows you to combine cell borders into one border for a cleaner look.
• You can change the alignment of the data in your table cells with the text-align and vertical-align CSS properties.
• You can add color to your tables with the background-color property. Background color can be added to the entire table, to each row, or to a single data cell.
• If you have no data for a data cell, put no content into the <td> element. You need to use a <td>...</td> element to maintain the alignment of the table, however.
• If your data cell needs to span multiple rows or columns, you can use the rowspan or colspan attributes of the <td> element.
• You can nest tables within tables by placing the <table> element and all its content inside a data cell.
• Tables should be used for tabular data, not for laying out your pages. Use CSS positioning to create multi-column page layouts as we described in Chapter 12.
• Lists can be styled with CSS just like any other element. There are a few CSS properties specific to lists, such as list-style-type and list-style-image.
• list-style-type allows you to change the type of the marker used in your list.
• list-style-image allows you to specify an image for your list marker.
CH14 BULLET POINTS
• The <form> element defines the form, and all form input elements are nested inside it.
• The action attribute contains the URL of the Web Application.
• The method attribute contains the method of sending the form data: either POST or GET.
• A POST packages form data and sends it as part of the request.
• A GET packages form data and appends it to the URL.
• Use POST when the form data should be private, or when it is large, such as when a <textarea> or file <input> element is used.
• Use GET for requests that might be bookmarked.
• The <input> element can act as many different input controls on the Web page, depending on the value of its "type" attribute.
• A type of "text" creates a single line text input.
• A type of "submit" creates a submit button.
• A type of "radio" creates one radio button. All radio buttons with the same name make up a group of mutually exclusive buttons.
• A type of "checkbox" creates one checkbox control. You can create a set of choices by giving multiple checkboxes the same name.
• A <textarea> element creates a multi-line text input area.
• A <select> element creates a menu, which contains one or more <option> elements.<option> elements define the items in the menu.
• If you put text into the content of a <textarea> element, it will become the default text in a text area control on the Web page.
• The value attribute in the text <input> element can be used to give a single-line text input an initial value.
• Setting the value attribute on a submit button changes the text of the button.
• When a Web form is submitted, the form data values are paired with their corresponding names, and all names and values are sent to the server.
• Tables are often used to layout forms, given that forms have a tabular structure. Once laid out, CSS should be used to style forms to provide the presentation, including color, font styles, etc.
• XHTML allows form elements to be organized with the <fieldset> element.
• The <label> element can be used to attach labels to form elements in a way that aids accessibility.
• HTML and CSS are the languages we use to create web pages.
• Web servers store and serve Web pages, which are created from HTML and CSS. Browsers retrieve pages and render their content based on the HTML and CSS.
• HTML is an abbreviation for HyperText Markup Language and is used to structure your web page.
• CSS is an abbreviation for Cascading Style Sheets, and is used to control the presentation of your HTML.
• Using HTML we mark up content with tags to provide structure. We call matching tags, and their enclosed content, elements.
• An element is composed of three parts: an opening tag, content and a closing tag. There are a few elements, like <img>, that are an exception to this rule.
• Opening tags can have attributes. We've seen a couple: type and align.
• Closing tags have a "/" after the left angle bracket, in front of the tag name to distinguish them as closing tags.
• Your pages should always have an <html> element along with a <head> element and a <body> element.
• Information about the Web page goes into the <head> element.
• What you put into the <body> element is what you see in the browser.
• Most whitespace (tabs, returns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you).
• CSS can be added to an HTML Web page by putting the CSS rules inside the <style> element. The <style> element should always be inside the <head> element.
• You specify the style characteristics of the elements in your HTML using CSS.
CH2 BULLET POINTS
• When you want to link from one page to another, use the <a> element.
• The href attribute of the <a> element specifies the destination of the link.
• The content of the <a> element is the label for the link. The label is what you see on the Web page. By default, it's underlined to indicate you can click on it.
• You can use words or an image as the label for a link.
• When you click on a link, the browser loads the Web page that's specified in the href attribute.
• You can link to files in the same folder, or files in other folders.
• A relative path is a link that points to other files on your Web site relative to the Web page you're linking from. Just like on a map, the destination is relative to the starting point.
• Use ".." to link to a file that's one folder above the file you're linking from.
• ".." means "parent folder."
• Remember to separate the parts of your path with the "/" character.
• When your path to an image is incorrect, you'll see a broken image on your Web page.
• Don't use spaces in names when you're choosing names for files and folders for your Web site.
• It's a good idea to organize your Web site files early on in the process of building your site, so you don't have to change a bunch of paths later when the Web site grows.
• There are many ways to organize a Web site; how you do it is up to you.
CH3 BULLET POINTS
• Plan the structure of your Web pages before you start typing in the content. Start with a sketch, then create an outline, and finally write the HTML.
• Plan your page starting with the large, block elements, and then refine with inline elements.
• Remember, whenever possible, use elements to tell the browser what your content means.
• Always use the element that most closely matches the meaning of your content. For example, never use a paragraph when you need a list.
• <p>, <blockquote>, <ol>, <ul>, and <li> are all block elements. They stand on their own and are displayed with space above and below the content within them.
• <q>, <em>, and <a> are all inline elements. The content in these elements flows in line with the rest of the content in the containing element.
• Use the <br> element when you need to insert your own linebreaks.
• <br> is an "empty element."
• Empty elements have no content.
• An empty element consists of only one tag.
• A nested element is an element contained completely within another element. If your elements are nested properly, all your tags will match correctly.
• You make an HTML list using two elements in combination: use <ol> with <li> for an ordered list; use <ul> with <li> for an unordered list. When the browser displays an ordered list, it creates the numbers for the list so you don't have to.
• You can specify your own ordering in an ordered list with the start attribute. To change the values of the individual items, use the value attribute.
• You can build nested lists within lists by putting <ol> or <ul> elements inside your <li> elements.
• Use entities for special characters in your HTML content.
CH4 BULLET POINTS
• Typically the best way to get on the Web is to find a hosting company to host your Web pages.
• A domain name is a unique name, like amazon.com or starbuzzcoffee.com, that is used to identify a site.
• A hosting company can create one or more Web servers in your domain. Servers are often named "www".
• The File Transfer Protocol (FTP) is a common means of transferring your Web pages and content to a server.
• FTP applications, like Fetch for Mac or WS_FTP for Windows, can make using FTP easier by providing a graphical user interface.
• A URL is a Uniform Resource Locator, or Web address, that can be used to identify any resource on the Web.
• A typical URL consists of a protocol, a Web site name, and an absolute path to the resource.
• HTTP is a request and response protocol used to transfer Web pages between a Web server and your browser.
• The file protocol is used by the browser to read pages from your computer.
• An absolute path is the path from the root folder to a file.
• "index.html" and "default.htm" are examples of default pages. If you specify a directory without a filename, the Web server will look for a default page to return to the browser.
• You can use relative paths or URLs in your <a> element's href attribute to link to other Web pages. For other pages in your site, it's best to use relative paths, and use URLs for external links.
• Use the id attribute to create a destination anchor in a page. Use '#' followed by a destination anchor id to link to that location in a page.
• To help accessibility, use the title attribute to provide a description of the link in <a> elements.
• Use the target attribute to open a link in another browser window. Don't forget that the target attribute can be problematic for users on a variety of devices and alternative browsers.
CH5 BULLET POINTS
• Use the <img> element to place images in your Web page.
• Browsers treat <img> elements a little differently than other HTML elements; after reading the HTML page, the browser retrieves each image from the Web server and displays it.
• If you have more than a couple of large images on a Web page, you can make your Web page more usable and faster to download by creating thumbnails small images that the user can click on to see the large version of the image.
• The <img> element is an inline element, which means that the browser doesn't put a linebreak before or after an image.
• The src attribute is how you specify the location of the image file. You can include images from your own site using a relative path in the src attribute, or images from other sites using a URL.
• The alt attribute of an <img> element is a meaningful description of the image. It is displayed in some browsers if the image can't be located, and is used by screen readers to describe the image for the visually impaired.
• A width of less than 800 pixels is a good rule of thumb for the size of photo images in a Web page. Most photo images that are created by digital cameras are too large for Web pages, so you'll need to resize them.
• Photoshop Elements is one of many photo editing applications you can use to resize your images.
• Images that are too large for the browser make Web pages difficult to use and slow to download and display.
• A pixel is the smallest dot that can be represented on the screen. Each image is composed of thousands of pixels. Depending on your monitor, there can be anywhere from 72 pixels in an inch to 120 pixels in an inch.
• JPEG and GIF are the two formats for images that are widely supported by Web browsers.
• The JPEG format is best for photographs and other complex images.
• The GIF format is best for logos and other simple graphics with solid colors, lines, or text.
• JPEG images can be compressed at a variety of different qualities, so you can choose the best balance of quality and file size for your needs.
• The GIF image format allows you to make an image with a transparent background. If you put an image with a transparent background in a Web page, what's behind the image, such as the background color of the page, will show through the transparent parts of the image.
• In Photoshop Elements, use the Matte color menu in the "Save for Web" dialog to choose the right color for softening the edges of your transparent GIF image.
• Images can be used as links to other Web pages. To create a link from an image, use the <img> element as the content of an <a> element, and put the link in the href attribute of the <a> element.
CH6 BULLET POINTS
• HTML 4.01 is the HTML standard that is most widely supported by browsers.
• The World Wide Web Consortium (W3C) is the standards organization that defines what "standard HTML" is.
• Many browsers have two modes for displaying HTML: "quirks" mode for old HTML and standards mode for HTML 4.01.
• If you don't tell the browser which version of HTML you are using, many browsers will use quirks mode, which may cause inconsistent page display in various browsers.
• The document type definition (DOCTYPE) is used to tell the browser which version of HTML your Web page is written in.
• The strict DOCTYPE is used if you are writing fully compliant HTML 4.01.
• Use the transitional DOCTYPE if you are transitioning HTML that still includes display-oriented elements and attributes.
• The <meta> tag in the <head> element tells the browser additional information about a Web page, such as the content type and character encoding.
• A character encoding tells the browser the character set that is used in the Web page.
• Most Western-European languages used on computers today can be represented with the ISO-8859-1 character encoding.
• The W3C validator is a free online service that checks pages for compliance with standards.
• Use the validator to ensure that your HTML is well formed and that your elements and attributes meet the standards.
• By adhering to standards, your pages will display more quickly and with fewer display differences between browsers.
CH8 BULLET POINTS
• CSS contains simple statemlents, called rules.
• Each rule provides the style for a selection of XHTML elements.
• A typical rule consists of a selector along with one or more properties and values.
• The selector specifies which elements the rule applies to.
• Each property declaration ends with a semicolon.
• All properties and values in a rule go between {} braces.
• You can select any element using its name as the selector.
• By separating element names with commas, you can select multiple elements at once.
• One of the easiest ways to include a style in HTML is the <style> tag.
• For XHTML and for sites of any complexity, you should link to an external style sheet.
• The <link> element is used to include an external style sheet.
• Many properties are inherited. For instance, if a property that is inherited is set for the <body> element, all the <body>'s child elements will inherit it.
• You can always override properties that are inherited by creating a more specific rule for the element you'd like to change.
• Use the class attribute to add elements to a class.
• Use a "." between the element name and the class name to select a specific element in that class.
• Use ".classname" to select any elements that belong to the class.
• An element can belong to more than one class by placing multiple class names in the class attribute with spaces between the names.
• You can validate your CSS using the W3C validator, at http://jigsaw.w3.org/css-validator.
CH9 BULLET POINTS
• CSS gives you lots of control over the look of your fonts, including properties like font-family, font-weight, font-size, and font-style.
• A font-family is a set of fonts that share common characteristics.
• The font families for the Web are serif, sans-serif, monospace, cursive, and fantasy. Serif and sans-serif fonts are most common.
• The fonts that your visitors will see in your Web page depend on the fonts they have installed on their own computers.
• It's a good idea to specify font alternatives in your font-family CSS property in case your users don't have your preferred font installed.
• Always make the last font a generic font like serif or sans-serif, so that the browser can make an appropriate substitution if no other fonts are found.
• Font-sizes are usually specified using px, em, %, or keywords.
• If you use pixels ("px") to specify your font size, you are telling the browser how many pixels tall to make your letters.
• em and % are relative font sizes, so specifying your font size using em and % means the size of the letters will be relative to the font size of the parent element.
• Using relative sizes for your fonts can make your pages more maintainable.
• Use the font size keywords to set the base font size in your body rule, so that all browsers can scale the font sizes if users want the text to be bigger or smaller.
• You can make your text bold using the font-weight CSS property.
• The font-style property is used to create italic or oblique text. Italic and oblique text is slanted.
• Web colors are created by mixing different amounts of red, green, and blue.
• If you mix 100% red, 100% green, and 100% blue, you will get white.
• If you mix 0% red, 0% green, and 0% blue, you will get black.
• CSS has 17 predefined colors, including black, white, red, blue, and green.
• You can specify which color you want using percentages of red, green, and blue, using numerical values of 0255 for red, green, and blue, or using a color's hex code.
• An easy way to find the hex code of a color you want is to use a photo-editing application's color picker or one of many online Web tools.
• Hex codes have 6 digits, and each digit can be from 0-F. The first two digits represent the amount of red, the second two the amount of green, and the last two the amount of blue.
• You can use the text-underline property to create an underline for text. Underlined text is often confused as linked text by users, so use this property carefully.
CH10 BULLET POINTS
• CSS uses a box model to control how elements are displayed.
• Boxes consist of the content area and optional padding, border, and margin.
• The content area contains the content of the element.
• The padding is used to create visual space around the content area.
• The border surrounds the padding and content and provides a way to visually separate the content.
• The margin surrounds the border, padding, and content, and allows space to be added between the element and other elements.
• Padding, border, and margin are all optional.
• An element's background will show under the content and the padding, but not under the margin.
• Padding and margin size can be set in pixels or percentages.
• Border width can be set in pixels or by using the keywords thin, medium, and thick.
• There are eight different styles for borders, including solid, dashed, dotted, and ridge.
• When setting margins, padding, or the border, CSS provides properties for setting all the sides (top, right, bottom, left) at once, or it allows them to be set independently.
• Use the line-height property to add space between lines of text.
• You can place an image in the background of an element with the background-image property.
• Use the background-position and background-repeat properties to set the position and tiling behavior of the background image.
• Use the class attribute for elements that you want to style together, as a group.
• Use the id attribute to give an element a unique name. You can also use the id attribute to provide a unique style for an element.
• There should only be one element in a page with a given id.
• You can select elements by their id using the id # selector; for example #myfavoriteid.
• An element can have only one id, but it can belong to many classes.
• You can use more than one style sheet in your XHTML.
• If two style sheets have conflicting property definitions, the style sheet that is last in the XHTML file will receive preference
• You can target media devices such as "print" or "handheld" by using the media attribute in your <link> element.
CH11 BULLET POINTS
• <div> elements are used to group related elements together into logical sections.
• Creating logical sections can help you identify the main content areas, header, and footer of your page.
• You can use <div> elements to group elements together that need a common style.
• Use nested <div> elements to add further structure to your files for clarity or styling. But don't add structure unless you really need it.
• Once you have grouped together sections of content with <div> elements, you can style the <div>s just like you would any other block element. For example, you can add a border around a group of elements using the border property on the <div> they are nested in.
• The width property sets the width of the content area of an element.
• The total width of an element is the width of the content area, plus the width of any padding, border, and margins you add.
• Once you set the width of an element, it no longer expands to fit the entire width of the browser window.
• Text-align is a property for block elements that centers all inline content in the block element. It is inherited by any nested block elements.
• You can use descendant selectors to select elements nested within other elements. For instance, the descendant selector
• div h2 { ... }
•
selects all <h2>s nested in <div> elements (including children, grandchildren, etc.).
• You can use shortcuts for related properties. For instance, padding-top, padding-right, padding-bottom, and padding-left are all related to padding, and can be specified with one shortcut rule, padding.
• Padding, margin, border, background, and font properties can all be specified with shortcuts.
• The <span> inline element is similar to the <div> element: it is used to group together related inline elements and text.
• Just like with <div>, you can add <span> elements to classes (or give <span> elements unique ids) to style them.
• The <a> element is an example of an element with different states. The main <a> element states are unvisited, visited, and hover.
• You can style each of these states separately with pseudo-classes. The pseudo-classes used most often with the <a> element are :link, for unvisited links, :visited, for visited links, and :hover, for the hover state.
• Other elements support the :hover pseudoclass, and some browsers also support the :first-child, :active, and :focus pseudo-classes for other elements.
CH12 BULLET POINTS
• Browsers place elements in a page using flow.
• Block elements flow from the top down, with a linebreak between elements. By default, each block element takes up the entire width of the browser window.
• Inline elements flow inside a block element from the top left to the bottom right. If more than one line is needed, the browser creates a new line, and expands the containing block element vertically to contain the inline elements.
• The top and bottom adjacent margins of two block elements in the normal page flow collapse to the size of the larger margin, or to the size of one margin if they are the same size.
• Floated elements are taken out of the normal flow and placed to the left or right.
• Floated elements sit on top of block elements and don't affect their flow. However, the inline content respects the boundaries of a floated element and flows around it.
• The clear property is used to specify that no floated elements can be on the left or right (or both) of a block element. A block element with clear set will move down until it is free of the block element on its side.
• A floated element must have a specific width set to a value other than auto.
• A liquid layout is one in which the content of the page expands to fit the page when you expand the browser window.
• A frozen layout is one in which the width of the content is fixed and it doesn't expand or shrink with the browser window. This has the advantage of providing more control over your design, but at the cost of not using the browser width as efficiently.
• A jello layout is one in which the content width is fixed, but the margins expand and shrink with the browser window. A jello layout usually places the content in the center of the page. This has the same advantages as the frozen layout, but is often more attractive.
• There are four values the position property can be set to: static, absolute, fixed, and relative.
• Static positioning is the default, and places an element in the normal flow of the page.
• Absolute positioning lets you place elements anywhere in the page. By default, absolutely positioned elements are placed relative to the sides of the page.
• If an absolutely positioned element is nested within another positioned element, then its position is relative to the containing element that is positioned.
• The properties top, right, bottom, and left are used to position elements for absolute, fixed, and relative positioning.
• Absolutely positioned elements can be layered on top of one another using the z-index property. A larger z-index value indicates it is higher in the stack (closer to you on the screen).
• Fixed position elements are always positioned relative to the browser window and do not move when the page is scrolled. Other content in the page scrolls underneath these elements.
• Relatively positioned elements are first flowed into the page as normal, and then offset by the specified amount, leaving empty the space where they would normally sit.
• When using relative positioning, left, right, top, and bottom refer to the amount of offset from the element's position in the normal flow.
• The same design can often be achieved using floating elements or absolutely positioned elements.
• Float provides a flexible solution for multicolumn layouts and allows elements to clear floated elements from their sides, something that can't be done with absolute positioning.
CH13 BULLET POINTS
• XHTML tables are used to structure tabular data.
• Use the HTML table elements, <table>, <tr>, <th>, and <td> together to create a table.
• The <table> element defines and surrounds the entire table.
• Tables are defined in rows, using the <tr> element.
• Each row contains one or more data cells, defined with the <td> element.
• Use the <th> element for data cells that are row or column headings.
• Tables are laid out in a grid. Each row corresponds to a <tr>...</tr> row in your HTML, and each column corresponds to the <td>...</td> content within the rows.
• You can provide additional information about your tables with the table summary attribute, and the <caption> element.
• Table data cells can have padding, borders, and border spacing, which is the space between cells.
• Just like you can control the padding, borders, and margins of elements, you can control the padding, borders, and border spacing of table cells with CSS.
• The border-collapse property is a special CSS property for tables that allows you to combine cell borders into one border for a cleaner look.
• You can change the alignment of the data in your table cells with the text-align and vertical-align CSS properties.
• You can add color to your tables with the background-color property. Background color can be added to the entire table, to each row, or to a single data cell.
• If you have no data for a data cell, put no content into the <td> element. You need to use a <td>...</td> element to maintain the alignment of the table, however.
• If your data cell needs to span multiple rows or columns, you can use the rowspan or colspan attributes of the <td> element.
• You can nest tables within tables by placing the <table> element and all its content inside a data cell.
• Tables should be used for tabular data, not for laying out your pages. Use CSS positioning to create multi-column page layouts as we described in Chapter 12.
• Lists can be styled with CSS just like any other element. There are a few CSS properties specific to lists, such as list-style-type and list-style-image.
• list-style-type allows you to change the type of the marker used in your list.
• list-style-image allows you to specify an image for your list marker.
CH14 BULLET POINTS
• The <form> element defines the form, and all form input elements are nested inside it.
• The action attribute contains the URL of the Web Application.
• The method attribute contains the method of sending the form data: either POST or GET.
• A POST packages form data and sends it as part of the request.
• A GET packages form data and appends it to the URL.
• Use POST when the form data should be private, or when it is large, such as when a <textarea> or file <input> element is used.
• Use GET for requests that might be bookmarked.
• The <input> element can act as many different input controls on the Web page, depending on the value of its "type" attribute.
• A type of "text" creates a single line text input.
• A type of "submit" creates a submit button.
• A type of "radio" creates one radio button. All radio buttons with the same name make up a group of mutually exclusive buttons.
• A type of "checkbox" creates one checkbox control. You can create a set of choices by giving multiple checkboxes the same name.
• A <textarea> element creates a multi-line text input area.
• A <select> element creates a menu, which contains one or more <option> elements.<option> elements define the items in the menu.
• If you put text into the content of a <textarea> element, it will become the default text in a text area control on the Web page.
• The value attribute in the text <input> element can be used to give a single-line text input an initial value.
• Setting the value attribute on a submit button changes the text of the button.
• When a Web form is submitted, the form data values are paired with their corresponding names, and all names and values are sent to the server.
• Tables are often used to layout forms, given that forms have a tabular structure. Once laid out, CSS should be used to style forms to provide the presentation, including color, font styles, etc.
• XHTML allows form elements to be organized with the <fieldset> element.
• The <label> element can be used to attach labels to form elements in a way that aids accessibility.
分享到：
发表评论
相关推荐
### Head First HTML5（高清版）关键知识点解析 #### 一、Head First系列书籍的特点与定位 - **通俗易懂的宗旨**：Head First系列书籍以其独特的教学方式著称，致力于将复杂的概念以简单易懂的方式呈现给读者。 - ...
根据提供的文件信息，“[HeadFirst深入浅出_HTML与CSS、XHTML（中文版）.扫描版].弗里曼.扫描版.pdf”这本书主要讲解了HTML、CSS以及XHTML的基础知识和高级技巧。虽然部分具体内容没有给出有用的信息，但是我们可以...
1. 书籍介绍：《Head First HTML With CSS And XHTML》是一本专注于网页标记和展示方面的书籍，它采用了一种适合学习者的方式，强调基于标准的网页创建。书籍旨在帮助读者避免在学习HTML和CSS时常犯的错误，同时提供...
许多读者和专家都对Head First系列抱有极高的期望，他们相信这个系列将会改变技术出版行业的标准，使得这些新的方法成为未来的学习标准。 知识点六：Web开发的技术趋势。在部分内容中提到了随着互联网的复杂化，...
### Head First Servlets and JSP 2nd Edition：详尽解析与知识点提炼 #### 标题解析：Head First Servlets and JSP 2nd Edition 该书名为《Head First Servlets and JSP 第二版》，从标题可以看出这是一本关于...
《Head First HTML与CSS、XHTML++（中文版）》这本书旨在为初学者提供一个全面而深入的学习指南，帮助读者从零开始掌握HTML、CSS以及XHTML的基础知识和技术要点。通过理论与实践相结合的方式，不仅可以加深理解，还...
# echo "<html><head><title>First Virtual Host</title></head><body><h1>Welcome to the First Virtual Host!</h1></body></html>" > /var/www/first/index1.html # echo "<html><head><title>Second Virtual Host...
- **基本结构**：HTML5文档的基本结构包括`<html>`、`<head>`和`<body>`三个主要部分。 - `<html>`：包含整个HTML文档。 - `<head>`：包含关于文档的信息，如标题、样式表链接等。 - `<body>`：包含实际的网页...
以下是几个要点： - **语法结构**：PHP的语法类似于C语言，这意味着如果你有C语言的基础，学习PHP会更加容易。 - **代码嵌入**：PHP允许在HTML文件中嵌入代码，也可以将HTML标签嵌入到PHP脚本中。 - **代码块标记**...
它提供了Code First、Database First等多种开发模式，支持LINQ查询语法，极大地提升了开发效率。 例如，定义一个简单的实体类： ```csharp public class Customer { public int Id { get; set; } public string ...
### CSS网页制作学习资料 #### CSS简介及其带来的好处 CSS，即层叠样式表(Cascading ...通过深入学习CSS的基础知识和技术要点，你可以更加高效地创建美观且功能强大的网页，并且在不断变化的技术环境中保持竞争力。
- 嵌入式：在`<script>`标签中编写JavaScript代码，放在HTML文档的`<head>`或`<body>`部分。 ```html // JavaScript代码 ``` - 外部链接：通过`<script>`标签的`src`属性引入外部JavaScript文件。 ```html...
3. **书籍**：《Head First Servlets & JSP》、《Core Servlets and JSP》等经典教材。 4. **实战项目**：参与小型Web项目，如构建一个简单的CRUD应用，加深理解。 5. **开源社区**：GitHub上有许多示例项目和框架，...
### JSP学习笔记精简版 #### 一、JSP简介 JSP（JavaServer Pages）是一种基于Java的服务器端动态网页技术标准。它通过在HTML文档中嵌入Java代码来实现动态...以上是对JSP基础概念和技术要点的概述，希望对你有所帮助。
《Head First HTML 与 CSS》，中国电力出版社，2013年。 - Adam Freeman.《HTML5 权威指南》，人民邮电出版社，2014年。 以上资料涵盖了项目所需的关键技术和开发工具，可以帮助开发者深入了解项目开发过程中所涉及...
<a name="navbar.top.firstrow"> <!-- --> <li><a href="../../../overview-summary.html">Overview</a></li> <li class="navBarCell1Rev">Package <li>Class <li><a href="package-tree.html">Tree</a></li> <li>...
一种做法是将脚本放置于`<head>`标签内或页面底部（即`</body>`和`</html>`标签之间）。这种做法虽然可能对性能有轻微影响，但在现代浏览器中，这种影响几乎可以忽略。 #### 二、jQuery 基础 - **jQuery源码初步...