Multivision面试材料准备学习之HTML

来源：互联网发布：java oracle数据库连接编辑：程序博客网时间：2024/05/16 06:31

What is HTML?

HTML is a markup language for describing web documents

A markup language is a set of markup tags

HTML Basic Examples

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

<a href="http://www.w3schools.com">This is a link</a>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Links

HTML links are defined with the <a> tag:

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Attributes

The lang Attribute

The document language can be declared in the <html> tag.

The language is declared in the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and search engines:

<!DOCTYPE html><html lang="en-US"><body>

The title Attribute

HTML paragraphs are defined with the tag.

In this example, the element has a title attribute. The value of the attribute is "About W3Schools":

<p title="About W3Schools">W3Schools is a web developer's site.It provides tutorials and references coveringmany aspects of web programming,including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p>

The href Attribute

上面basic里提到过已经。tag里面的是就是属性。

Size Attributes

上面basic里提到过已经。

The alt Attribute

The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

<pre name="code" class="html"><p title="About W3Schools">W3Schools is a web developer's site.It provides tutorials and references coveringmany aspects of web programming,including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p>

Single or Double Quotes?

Double style quotes are the most common in HTML, but single style can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes

HTML Horizontal Rules

The <hr> tag creates a horizontal line in an HTML page.

<p>This is a paragraph.</p><hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p>

The HTML <title> Element

The HTML <title> element is meta data. It defines the HTML document's title.

The title will not be displayed in the document, but might be displayed in the browser tab.

***************************mark*

The HTML <meta> Element

The HTML <meta> element is also meta data.

It can be used to define the character set, and other information about the HTML document.

<!DOCTYPE html><html><head>  <title>My First HTML</title>  <meta charset="UTF-8"></head><body>...

HTML Line Breaks

The HTML element defines a line break.

Use if you want a line break (a new line) without starting a new paragraph:

<p>This is<br>a para<br>graph with line breaks</p>

The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

<pre>  My Bonnie lies over the ocean.  My Bonnie lies over the sea.  My Bonnie lies over the ocean.  Oh, bring back my Bonnie to me.</pre>

HTML Text Formatting Elements

HTML Bold and Strong Formatting

The HTML element defines bold text, without any extra importance.

The HTML element defines strong text, with added semantic "strong" importance.

HTML Italic and Emphasized Formatting

<p><i>This text is italic</i>.</p>

<p><em>This text is emphasized</em>.</p>

HTML Small Formatting

<h2>HTML <small>Small</small> Formatting</h2>

HTML Deleted Formatting

<p>My favorite color is <del>blue</del> red.</p>

HTML Inserted Formatting

<p>My favorite <ins>color</ins> is red.</p>

HTML Subscript Formatting

<p>This is <sub>subscripted</sub> text.</p>

HTML Superscript Formatting

<p>This is <sup>superscripted</sup> text.</p>

HTML Links

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

This example will open the linked document in a new browser window or in a new tab:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

_blankOpens the linked document in a new window or tab_selfOpens the linked document in the same frame as it was clicked (this is default)_parentOpens the linked document in the parent frame_topOpens the linked document in the full body of the window

HTML Links - The id Attribute

The id attribute can be used to create bookmarks inside HTML documents.

Bookmarks are not displayed in any special way. They are invisible to the reader.

<a id="tips">Useful Tips Section</a>

HTML Tables

Defining HTML Tables

<table style="width:100%">  <tr>    <td>Jill</td>    <td>Smith</td>     <td>50</td>  </tr>  <tr>    <td>Eve</td>    <td>Jackson</td>     <td>94</td>  </tr></table>

An HTML Table with Border Spacing

table {    border-spacing: 5px;}

只适用于border-collapse: separate;

Table Cells that Span Many Rows

<table style="width:100%">  <tr>    <th>Name:</th>    <td>Bill Gates</td>  </tr>  <tr>    <th rowspan="2">Telephone:</th>    <td>555 77 854</td>  </tr>  <tr>    <td>555 77 855</td>  </tr></table>

span n.跨度 v.跨时间或空间

An HTML Table With a Caption

<table style="width:100%">  <caption>Monthly savings</caption>  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr>  <tr>    <td>February</td>    <td>$50</td>  </tr></table>

表格标题

Different Styles for Different Tables

<table id="t01">  <tr>    <th>Firstname</th>    <th>Lastname</th>     <th>Points</th>  </tr>  <tr>    <td>Eve</td>    <td>Jackson</td>     <td>94</td>  </tr></table>

table#t01 {    width: 100%;     background-color: #f1f1c1;}

table#t01 tr:nth-child(even) {    background-color: #eee;}table#t01 tr:nth-child(odd) {    background-color: #fff;}table#t01 th {    color: white;    background-color: black;}

Unordered HTML Lists

<ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul>

列表

StyleDescriptionlist-style-type:discThe list items will be marked with bullets (default)list-style-type:circleThe list items will be marked with circleslist-style-type:squareThe list items will be marked with squareslist-style-type:noneThe list items will not be marked列表中各项的标记符号

Ordered HTML Lists

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

ordered就是列表中各项的标记符号为数字

Ordered HTML Lists - The Type Attribute

TypeDescriptiontype="1"The list items will be numbered with numbers (default)type="A"The list items will be numbered with uppercase letterstype="a"The list items will be numbered with lowercase letterstype="I"The list items will be numbered with uppercase roman numberstype="i"The list items will be numbered with lowercase roman numbers

HTML Description Lists

A description list, is a list of terms, with a description of each term.

The <dl> tag defines a description list.

The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

<dl>  <dt>Coffee</dt>  <dd>- black hot drink</dd>  <dt>Milk</dt>  <dd>- white cold drink</dd></dl>

Nested HTML Lists

<ul>  <li>Coffee</li>  <li>Tea    <ul>      <li>Black tea</li>      <li>Green tea</li>    </ul>  </li>  <li>Milk</li></ul>

Horizontal Lists

<head><style>ul#menu li {    display:inline;}</style></head><body><h2>Horizontal List</h2><ul id="menu">  <li>HTML</li>  <li>CSS</li>  <li>JavaScript</li>  <li>PHP</li></ul> </body>

HTML Forms

Text Input

<form>First name:<br><input type="text" name="firstname"><br>Last name:<br><input type="text" name="lastname"></form>

输入栏

Radio Button Input

<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form>

多选一

The Submit Button

The Action Attribute

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>

Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.

The <legend> element defines a caption for the <fieldset> element.

0 0

Multivision面试材料准备学习之HTML

HTML Basic Examples

All HTML documents must start with a type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.The visible part of the HTML document is between <body> and </body>.

HTML Links

HTML Images

HTML Attributes

The lang Attribute

The title Attribute

The href Attribute

Single or Double Quotes?

HTML Horizontal Rules

The HTML <title> Element

***********************************mark*********

The HTML <meta> Element

HTML Line Breaks

The HTML <pre> Element

HTML Text Formatting Elements

HTML Bold and Strong Formatting

HTML Small Formatting

HTML Deleted Formatting

HTML Inserted Formatting

HTML Subscript Formatting

HTML Superscript Formatting

HTML Links

HTML Links - The target Attribute

HTML Links - The id Attribute

HTML Tables

Defining HTML Tables

An HTML Table with Border Spacing

Table Cells that Span Many Rows

An HTML Table With a Caption

Different Styles for Different Tables

Unordered HTML Lists

Ordered HTML Lists

Ordered HTML Lists - The Type Attribute

HTML Description Lists

Nested HTML Lists

Horizontal Lists

HTML Forms

Text Input

Radio Button Input

The Submit Button

The Action Attribute

Grouping Form Data with <fieldset>

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

***************************mark*