2020 February 13
Today is the second day writing blog, and it is the third day of learning the front of the graduation issue title has been played back, very hard to accept, very tired, but also be a nice full bar! After all, the previous senior debt, alas, is to be owed to repay.
1. This lesson learning objectives.
- Master HTML tags classification.
- Learn HTML escape characters.
- Master table tags functions and usage. ★ focus
- Mastering CSS CSS selectors as well as a variety of usage.
- Understanding Priority selector.
Two. HTML tags classification.
- Classified according to the number of labels.
Single label: only one label. <br>, <hr>, <img >, <meta>, to achieve a specific function.
Dual Tags: both start tag, but also have an end tag. Html, head, Body, title, h1 ~ h6, p, a, ul, li, ol, strong, em. - Characteristics classification label (page effect) according to.
2.1 Line Properties tab.
Line properties and other tags can be placed on the same line attributes tag line.
For example: a, img, em, strong .
2.2 Properties tab.
Block attribute tags are exclusive line.
For example: h1 ~ h6, p, ul , li, ol.
III. Escape character.
- Enter special characters.
- Spaces. When parsing web browser, will knock all the spacebar ignored, in order to show spaces, you must use the
escape character to be used instead. - <>. With <> are enclosed label, the label will be parsed out of the browser, it does not display a web page, if it is to show the need to use the escape character. <=
<> =>
Escape character code block:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转义字符</title>
</head>
<body>
<p>如何启动记事本：</p>
<p>
开始<br>
所有程序<br>
附件<br>
记事本
</p>
<!-- 版权 -->
©
<!-- 人民币 -->
¥
<!-- 摄氏度 -->
°
<!-- 网页中显示<> -->
<p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<ul>
<li>HTML 标签是由尖括号包围的关键词，比如 <html></li>
<li>HTML 标签通常是成对出现的，比如 <b> 和 </b></li>
<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
<li>开始和结束标签也被称为开放标签和闭合标签</li>
</ul>
</body>
</html>
IV. Form base.
- Function table.
1.1 Construction of a basic form.
1.2 Form add a row.
1.3 Each line of the table to add cells.
1.4 Form add a column heading.
1.5 Form add table headers.
Table 1.6 merge multiple lines.
1.7 table with multiple columns. - Commonly used tags table.
Table: identification table, representatives form the outer layer of the large container. Form: it consists of rows and columns.
Tr: identify rows, each row to use a tr tag.
Td: identifying the ordinary cell, each cell is used to fill a data.
Th: identity column header cell, comes with bold, centered horizontally to achieve.
Caption: the title of the table, the first table. - Common attribute table.
Border: the border. Border = "width of the border" unit px.
Cellspacing: a gap between the cells and the cell. Unit: px. Do not want gaps, give 0.
Cellpadding: Set the distance between the cell content and cell borders. Unit: px.
As understanding of the following properties:
the Align: Align for content level. Value: left left-justified, right right-aligned, center centered.
Valign: Let the vertical alignment of the content. Found: top alignment top, bottom aligned at the bottom, middle center alignment, baseline baseline alignment.
Width: set the width of the element.
Height: Set the height of the element.
Form Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--
需求：
1.表格：用来存储学生信息。
2.存储3个学生的信息，每个学生分别存储姓名，性别，年龄，成绩。
问题：我们需要创建一个几行几列的表格？
-->
<!-- 表格 -->
<table border="1px" cellspacing="0px" cellpadding="20px">
<caption>学生信息表</caption>
<!-- 行： tr -->
<!-- 1 -->
<tr>
<!-- 单元格： td -->
<!-- <td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>成绩</td> -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<!-- 2 -->
<tr>
<td>Frank</td>
<td>男</td>
<td>18</td>
<td>100</td>
</tr>
<!-- 3 -->
<tr>
<td>Rose</td>
<td>女</td>
<td>16</td>
<td>99</td>
</tr>
<!-- 4 -->
<tr>
<td>Jack</td>
<td>未知</td>
<td>38</td>
<td>59.9</td>
</tr>
</table>
</body>
</html>
单元格合并：
1.colspan: merging counterparts but different columns of cells. Colspan = "consolidation of the number."
2.rowspan: Merge same column but different cell line. Rowspan = "consolidation of the number."
Precautions:
. A combined attribute must be added to the first cell to merge.
b. After completion of the merger cells, excess cells must be deleted! ! ! .
Merge code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单元格合并</title>
</head>
<body>
<!-- 生成6行4列的表格 table>(tr>td*4)*6-->
<table border="1" cellspacing="0" width="800px" align="center">
<!-- 1 -->
<tr align="center">
<td colspan="4">课程时间表</td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<!-- 2 -->
<tr align="center">
<td>时间安排</td>
<td>授课安排</td>
<td>周一~周五</td>
<td>周六日</td>
</tr>
<!-- 3 -->
<tr align="center">
<td rowspan="4">上午</td>
<td>进直播时间</td>
<td>9:10</td>
<td rowspan="4">自习</td>
</tr>
<!-- 4 -->
<tr align="center">
<!-- <td></td> -->
<td>第一节课</td>
<td>9:30~10:30</td>
<!-- <td></td> -->
</tr>
<!-- 5 -->
<tr align="center">
<!-- <td></td> -->
<td>间休</td>
<td>10:30~10:50</td>
<!-- <td></td> -->
</tr>
<!-- 6 -->
<tr align="center">
<!-- <td></td> -->
<td>第二节课</td>
<td>10:50~11:50</td>
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
- Quickly generate a table structure.
the Table> (TR> td 4) 4
explained: TR> td 4: This is a line template. (TR> td 4) 4 according to this template generates 4 lines.
Knowledge Point:> a parent-child relationship under representative.
Table> (TR> TH . 4) + (TR> TD . 4) . 3
explains:
TR> TH . 4: This is a template for a first row, (TR> TH . 4) . 1
TR> TD . 4: this is the other three lines templates , (tr> td * 4) * 3 generate three times in accordance with this template.
Knowledge point: + represents the brotherhood.
Five. CSS Profile.
- CSS introduction.
CSS (Cascading Style Sheet): Cascading Style Sheets.
CSS effects: HTML tags to add style, so the page becomes beautiful. - CSS written in what position.
2.1 found under the title label head label, add a pair of style tags.
2.2 CSS code written in the style tag. - CSS comments.
Shortcut keys: Ctrl + /
HTML comments: <! - Comment content ->
CSS comment: / * comment * content /
Six. CSS selectors, and priority.
CSS is a style made changes to the HTML tags, it is necessary to determine which label changes.
CSS selectors to use the need to meet the purpose of the selector is to choose the style to be modified label.
- id selector.
One modification.
a. To label style required to set, add the id attribute, set a unique value.
B. id accessed by the selector jack to an id performs style modifications.
Format: #id name {
CSS style
} - class selector.
Many modifications. (Class Selector)
A. To label style required to set, adding the class attribute, a uniform set value.
B. Access to the element lo class by class selector to style modifications.
Format: .class {name
CSS style
} - Element selector.
Role: the ability to access all of the elements of the same name. For example: all the p elements, all of a elements.
Format: element name} {css style
Priority: id selector> class selector> selector element
CSS attributes: attribute name format CSS property: property value;
Note: When programming, all of the symbols used, must be in the English state, does not recognize Chinese punctuation.
- Background color: background-color: yellow;
- Text color: color: red;
- Text size: font-size: 50px; units px, default 16px.
- Text horizontal alignment: text-align: center; left left-justified, right right alignment, center center alignment.
- Element width: width: 100px; Unit: px.
- Element height: height: 40px; Unit: px.
css code block:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
/* css是写在这个位置的，写到style标签中间。 */
p {
/* 要对p元素修改的css样式 */
background-color: yellow;
}
#jack {
color: red;
}
.lo {
/* 文字大小 */
font-size: 50px;
}
</style>
</head>
<body>
<!-- body中经常写html结构，html标签代码。 -->
<p id="jack">马云说：我对钱不感兴趣，但是我对花钱还是感兴趣的。</p>
<p class="lo">王健林：定个小目标，挣他一个亿。</p>
<a href="" class="lo">刘强东：我脸盲，我看不出谁漂亮。</a>
<p class="lo">肖战长的好像你现男友。</p>
<p>李现是你男神吗？</p>
<!--
需求：
1.将所有的p元素，背景颜色改成黄色。
2.将第一个p元素，文字颜色改成红色。
3.将第二个p元素和第三个p元素以及a标签，文字大小改为50px。
-->
</body>
</html>
