Continue ah today
thrown link HTML study notes two
now let's Cat Photo App pages temporarily put aside and learn to learn more about HTML styles.
This is the beginning
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: red;
padding: 20px;
}
.green-box {
background-color: green;
padding: 10px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
Label layout page 14.
There are three important attribute control layout of each HTML element: padding(padding), margin(margins), border(border).
paddingThe distance between the control element and its frame border.
Note that to put stylein
.green-box {
background-color: green;
padding: 20px;
}
To have different directions
padding-top, padding-right, padding-bottomand padding-leftproperties to control the direction of the four elements of padding.
Note that to put stylein
.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
In addition to specified elements, respectively padding-top, padding-right, padding-bottomand padding-leftouter attributes, you can specify them together, as shown below:
Note that, to put stylethe
.green-box {
background-color: green;
padding:40px 20px 20px 40px;
}
These four values are arranged in a clockwise manner: top, right, bottom, left, referred to as: right lower left .
marginDistance element border and the surrounding elements of the space occupied by the actual control.
Note that to put stylein
.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}
Similarly, in addition to specified elements, respectively margin-top, margin-right, margin-bottomand margin-leftto the attributes, and can specify them together as padding, as shown below:
Note that, to put stylethe
.green-box {
background-color: green;
margin:40px 20px 20px 40px;
}
Like, is left on the bottom right!
If you set the margin of an element is negative, then the element will be larger.
Note that to put stylein
.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}
The same can also be divided into different directions
CSS allows you to use margin-top, margin-right, margin-bottomand margin-leftattributes to control the direction of four elements margin.
Note that to put stylein
.green-box {
background-color: green;
margin-top:40px;
margin-left: 40px;
margin-right: 20px;
margin-bottom: 20px;
}
Write such a long time I was surprised to be merged into this, ha ha ha ha ha ha ha across
go on!
But it seems HTML so it can
roughly summarize it
HTML element
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 这是一个换行标签
This is a paragraph
This is a linkinline style which is a newline tag ** HTML ** class attribute defining one or more class name (className) for the html element (class name is introduced from the style file) id element defines a predetermined unique id style elements ( inline style) title describes additional information element (as a toolbar)
HTML horizontal line
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML comments
<!-- 这是一个注释 -->
HTML text formatting tags
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
The definition of bold text
definitions focus on the text
defined italics
define small word
definitions with emphasis
define the subscript word
definition word mark
Insert word definitions
Delete the definition of the word
HTML image
using <img>tags define the image in an HTML page. Tag has two essential properties:
srcand alt.
<img border="0" src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
HTML table
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列
example
<table border="1">
<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>
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
List HTML
unordered list using <ul>labels
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- Coffee
- Milk
An ordered list starts with <ol>the label. Each list item starts with <li>labels
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- Coffee
- Milk
To <dl>start the label. Each custom list item to <dt>begin. Each custom-defined list items to <dd>start.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
- Coffee
- - black hot drink
- Milk
- - white cold drink
HTML block
block-level elements in the browser displays, often with a new line to start (and end).
Example: <h1>, <p>, <ul>,<table>
Inline elements do not usually start with a new line when displayed.
Example: <b>, <td>, <a>,<img>
HTML <div>elements can put the document into separate, distinct parts. It is a block-level element, it can be used in combination with other containers HTML elements. No specific meaning. In addition, since it belongs to the block-level element, the browser displays the longitudinal fold line thereof. If used together with the CSS, it may be used to set style properties for large blocks of content.
Another common use is its document layout. It replaced the old method of using tables to define the layout.
Using <table>elements of the document layout is not a form of correct usage. <table>The element is used to display tabular data.
HTML <span>elements are inline elements, can be used as the text container, there is no specific meaning. When used with CSS, it may be used as part of the text style attributes set.
HTML form
is very important here, a lot of things.
Examples to do with the
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Last name:
The form itself is not visible. Meanwhile, in most browsers, the default width of the text field is 20 characters.
This is to enter a password
<form>
Password: <input type="password" name="pwd">
</form>
Password field characters are not displayed in clear text, but with asterisks or dots instead.
Radio (Radio Buttons)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Female
Csdn may not see the inside of it
attached Photo
box (Checkboxes)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Submit button (Submit Button)
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Eat it
hungry
