Home > Developer > Web Develop
One: part of the Web page:
1. Structure: HTML
2. Style: CSS
3. Behavior: Javascript
Second: Introduce the new properties: Class (classes), directly using examples to explain the use of this property:
three ways to determine the style of a label (by location of the style sheet):
1. Inline style sheet: <body> add a style directly inside, such as:
< p class="box" style="color:blue">测试文字</p>
2. Internal style sheet:
1) <body> Enter the property where you want to add a style, such as:
<p class="box">测试文字</p>
2) Describe the box attribute class in detail, such as:
<style type="text/css"> //type后的值固定，虽然我也不知道是什么意思 .box{color:blue}</style>
3. External style sheet:
1) Create a new CSS file in the DW
2) inside the HTML file <body> , you need to add a style input, such as:
<p class="box">测试文字</p>
3) Add the style of the attribute class to the new CSS file:
@charset "utf-8";/* CSS Document */.box{color:blue;}
4) Add inside the HTML file :
type="text/css" href="css/style.css" rel="stylesheet" />
Where the href link is a new CSS file relative to the current HTML file, and the rest are fixed values
Three. Table: Table
In DW, there are two ways to create a table:
1. <table>表格内容</table> Create with elements:
1) tags used in the table:<tableDefining tables<th>Table header for defining tables<tr>Define rows for a table<td>Defining table Cells<caption>Defining table Headings
2) Properties of the table
A. Table Border property border whose value represents the thickness of the border, in PX
B. Table border Spacing Properties: cellspacing
C. Table Padding Properties: cellpadding
Figure B, C represents the geometric meaning: The green arrow represents the distance is B, the red arrow indicates the distance is C
D. Table Position properties: align
fill: Will align When added to <table>中 , determines the position of the table in the page, align <tr> and when added to, determines the position of the table's contents in the table
E. Table background color: bgcolor
F. Add a picture to the background of the table:background=" "
Other about the border properties please click here, more detailed points here
3) <td> The properties of the table cell:
A. Merge cells horizontally colspan , such as:
<tr colspan="2">表格内容</tr>//横向合并两个单元格
B. Vertically merged cells rowspan , such as:
<tr rowspan="2">表格内容</tr>//纵向合并两个单元格
Note: If no value is set in the table, the default value is
Eg: Create a 2*2 table with a header of "heading" with a border thickness of 1px
<table Border="1"><tr><th>Heading</th></tr><tr><TD>Row 1, Cell 1</td><TD>Row 1, Cell 2</td></tr><tr><TD>Row 2, Cell 1</td><TD>Row 2, Cell 2</td></tr></table>2. Because the code to create the table is very repetitive and cumbersome, the table can be created directly in the DW by clicking Insert-table. You can also merge cells by selecting the cells and selecting the merged cells as a single right.
Note: Merge table borders: table{border-collapse:collapse} This statement should be placed in a new CSS file
The following code contains most of the above features:
HTML file:
CSS file:
The effect of the previous code is as follows:
Four. Block-level elements and inline elements (most of the elements in HTML are block-level elements or inline elements):
1. Block-level elements:
1) Concept: Concept: block-level elements occupy the entire space of their parent elements (containers), thus creating a "block".
2) Features: exclusive line; supports all styles; width is the parent element width when width is not set; line break is not resolved;
3) Example of block-level elements:
HTML file:
paragraphisitstotheparagraph‘s parent element.</p>
CSS file:
p{ background-color: #8ABB55; }
4) Usage:block-level elements can only appear <body> within an element.
5) Common block-level elements list:
<address><article><aside><audio>
<blockquote><canvas><dd><div>
<dl><fieldset>
<figcaption><figure><footer><form>
Heading level 1-6.Section header or page header.
Header group.Horizontal split line.
<noscript><ol>
<output><p><pre><section><table><tfoot><video>
<ul>
Note: <ul> is an unordered list (lists are generally <li> used with labels)
Usage examples:
<ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li></ul>
List of builds:
In addition, <ol>和<dl> there are sequence lists, which are used as examples:
<ol> <li>111</li> <li>222</li> <li>333</li> <li>444</li></ol><dl> <li>111</li> <li>222</li> <li>333</li> <li>444</li></dl>Results:
2. Inline elements:
1) Concept: An inline element occupies only the space contained in the bounding rectangle of its corresponding label.
2) Features: can be displayed on one line, does not support the width of the high, up and down margin and padding style will be problematic; the width is open by the content; line breaks are parsed (different widths in browsers)
3) Examples of the scope of the elements within the line:
Html:
<p> This <span>span</span> isitstothebeginningandendofthe inline element‘s influence</p>
Css:
span{ background-color: #8ABB55; }
4) List of common inline elements:
b, big, I, small, TT
ABBR, acronym, cite, Code, DFN, EM, KBD, Strong, Samp, Var
A, BDO, BR, IMG, map, object, q, script, span, sub, SUP
button, input, label, select, textarea
3 comparison of block-level elements and inline elements:
1) Content:
In general, inline elements can only contain data and other inline elements.
Block-level elements can contain inline elements and other block-level elements. This structure contains inheritance differences that enable block-level elements to create more "large" structures than inline elements.
2) Format: By default, inline elements do not start with a new line, and block-level elements begin a new row.
3) in general, block-level elements do not allow nesting, while inline elements can be nested
The class attribute of HTML, table element, block level, and inline element
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
