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:
<a href="http://www.w3schools.com">This is a link</a>
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 <p> tag.
In this example, the <p> 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 covering
many 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 covering
many 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 <br> element defines a line break.
Use <br> 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 <b> element defines bold text, without any extra importance.
The HTML <strong> 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>| _blank | Opens the linked document in a new window or tab |
| _self | Opens the linked document in the same frame as it was clicked (this is default) |
| _parent | Opens the linked document in the parent frame |
| _top | Opens 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;
}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>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>| Style | Description |
|---|---|
| list-style-type:disc | The list items will be marked with bullets (default) |
| list-style-type:circle | The list items will be marked with circles |
| list-style-type:square | The list items will be marked with squares |
| list-style-type:none | The list items will not be marked |
Ordered HTML Lists
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Ordered HTML Lists - The Type Attribute
| Type | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default) |
| type="A" | The list items will be numbered with uppercase letters |
| type="a" | The list items will be numbered with lowercase letters |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="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.
2265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
