Table of contents
(1) Paragraph, inline and line break tags
HTML basics
Basic format of html language:
Commonly used HTML tags
(1) Paragraph, inline and line break tags
(2) Text style tag
In HTML, use the<font> tag to control the style of text in the web page, such as font, font size and color
<font>The basic syntax format of tags:<font 属性="属性值">文本内容</font>
The color can be set using English words, or it can be represented by hexadecimal. For example, green can be represented by #00ff00,purple can be expressed as#ff00ff
Common colors:
Combined training:
html part:
Specific code:
<!DOCTYPE html>
<html>
="utf-8"> .css" type="text/css" /> </head> <body> <div class="dis"> <div class="ss"> <p class="dsjk"> ;Lovesickness</p> <p class="hj">Tang. Wang Wei</p> "nk" The most lovesick</span> ;ss"> <p class="dsjk">Yellow Crane Tower Presents Meng Haoran's Guangling Li Bai</p> <p class="hj">Li Bai.Tang</p> Xi's words about the Yellow Crane Tower<br />Fireworks in Yangzhou in March<br />The lone sail is far away and the blue sky is gone<br />Only the Yangtze River skyline can be seen</span> </p> </div> <div class="ss"> <p class="dsjk">Send Yuan Ershi Anxi</p> <p class="hj">Wang Wei.Tang</p> ; ; New<br />I urge you to drink more - a glass of wine<br />Going west to Yangguan without any old friends</span> a i=29> </div> <div class="ss"> <p class="dsjk">Kasuga </p> <p class="hj">Zhu Xi.Song Dynasty</p> ;> It’s always spring with its brilliant colors</span> ="dkds">xxx school Zhang San</p> <p class="dkds">xxx school Zhang San< /p> <p class="dkds">xxx school Zhang San</p> </div> </body> </html>
css part:
Specific code:
p{
text-align: center;
}
.dsjk{
font-family: 'Times New Roman', Times, serif;
font-size: 30px;
font-weight: 800;
}
.hj{
font-size: 18px;
font-weight: 400;
color: #0000ff;
}
.nk{
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
font-weight:300;
letter-spacing: 7px;
}
.ss{
width: 25%;
float: left;
/* margin: 0px 40px; */
}
.dis{
width: 100%;
height:500px;
background: url(hj.jpg) no-repeat;
background-size: 100% 100%;
}
.dkds{
float: left;
font-size: 40px;
font-weight: 800;
color:rgba(01, 01,01,0.2);
transform: rotate(-25deg);
}
Final rendering:
(3) Table labels
Basic syntax format for creating tables in HTML web pages<table> <tr> <td>Text in cells</td> </tr> </table>
<table>, <tr> and <td> are the basic tags for creating tables, and they are indispensable. <table> is used to define a table, <tr> is used to define the rows in the table (table row) and must be nested in the <table> tag, <td> is used to define cells in the table ( table data), also known as columns in the table, must be nested in the <tr> tag.
Specific cases:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
margin: auto;
border: 3px solid #739096;
width: 400px;
height: 180px;
}
tr{
border: 1px solid;
}
td{
text-align: center;
margin: 0px;
border: 1px solid;
}
.sfs{
font-size: 20px;
font-weight: 600;
}
table{
background-color:#d2f8ff;
}
.sfs:hover{
background-color:#566a21;
color: #ffffff;
}
td:hover{
background-color:#55aa7f;
color: #ffffff;
transform: scale(1.1,1.1);
transition: all 0.5s;
}
</style>
</head>
<body>
<table>
<tr class="sfs">
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>张三丰</td>
<td>95</td>
<td>80</td>
<td>98</td>
</tr>
<tr>
<td>张九龄</td>
<td>96</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>赵星名</td>
<td>86</td>
<td>69</td>
<td>88</td>
</tr>
</table>
</body>
</html>
Rendering:
(4) Form tags
form fields<form>
<form>Basic tag syntax:
<form action="url address" method="Submission method" name="Form name">
Various form controls
</form>
actionAttribute: used to specify the address for form submission.
methodAttribute: used to set the submission method of form data. It has two values: GET and POST. GET is the default value. Data submitted in this way will be displayed in the address bar of the browser. It has poor confidentiality and has a limit on the amount of data. ; The use of POST submission method not only has good confidentiality, but also can submit a large amount of data, so the POST method is usually used to submit forms in development.
2. Form control<input>
When browsing the web, you often see single-line text input boxes, radio buttons, check boxes, reset buttons, etc. Use < input> controls can define these elements in the form.
<intput>Basic syntax format of control: <input type="Control type" />
The type attribute is the most basic attribute of the <input> control and is used to specify different control types.
The <input> control can also define many other attributes. Among them, the more commonly used ones are id, name, value, and size, which are used to specify the ID value, name, and size of the <input> control respectively. Default value and display width of the control on the page.
Specific cases:
Specific code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>htmlDemo05</title>
</head>
<body>
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名：</td>
<td>
<!--1. 文本输入框控件-->
<input type="text" id="username" name="username" />
</td>
</tr>
<tr>
<td align="right">密码：</td>
<td>
<!--2. 密码输入框控件-->
<input type="password" id="password" name="password" />
</td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
</td>
</tr>
<tr>
<td align="right">兴趣：</td>
<td>
<input type="checkbox" name="interest" value="film"/> 看电影
<input type="checkbox" name="interest" value="code"/> 敲代码
<input type="checkbox" name="interest" value="game"/> 玩游戏
</td>
</tr>
<tr>
<td align="right">头像：</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</body>
</html>
Rendering:
(5) Multi-line text labels
HTML provides the<textarea></textarea> tag, through which multi-line text boxes can be created.
<textarea></textarea>Tag basic syntax format
<textarea cols="Number of characters in each line" rows="Number of rows displayed">
text content
</textarea>
(6) List tags
1. Unordered list
- An unordered list is a list that is not sorted. There is no order level between the list items, and they are usually juxtaposed.
- Define the basic syntax format of unordered lists
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul> <li>Web front-end development</li>
<!--Specify the type attribute value, disc is the default value-->
<li type="disc">Java Advanced Programming</li>
<li type="square">Python Object-Oriented</li> ;
<li type="circle">Spring Boot Framework</li>
Effect:
2. Ordered list
An ordered list is a list that emphasizes the order of arrangement. It is defined using the <ol> tag, and multiple <li> tags can be nested inside. . For example, common song rankings and game rankings on web pages can be defined through ordered lists.
Define the basic syntax format of ordered lists
<ol>
.. </ol>
Effect:
3. Definition list
The definition list is different from the use of ordered lists and unordered lists. It contains 3 tags, namely dl, dt, and dd.
Basic syntax format of definition list
<dl>
<dt>Noun 1</dt> <dd>dd is the description information 2 of noun 1</dd> Case: </dl> <dd>dd is the descriptive information 2 of noun 2</dd> <dd>dd is the description information 1 of Noun 2</dd> <dt>Noun 2</dt>
<dd>dd is the description information 1 of noun 1</dd>
<!DOCTYPE html>
<html>
="utf-8"> <body> One of the three primary colors and the four psychological colors</dd> , Very strong, passionate, etc. & lt;/dd & gt; & lt; dt & gt; green & lt;/dt & gt; & lt & gt; /dd & gt; & lt; dd & gt; green is pollution -oriented & lt;/dd & gt; & lt; dd & gt; green represents life, symbolizing hope </dd> >
Effect:
(7) Hyperlink tags
Hyperlinks only need to surround the object that needs to be linked with the <a></a> tag.
Basic syntax format for creating hyperlinks using the <a></a> tag:
<a href="Jump target" target="Pop-up method of target window">
text or image
</a>
<a>The tag is an inline tag used to define hyperlinks. href and target are common attributes of the <a>tag
| Attributes | meaning |
| href | The href attribute is used to specify the URL of the page that the link points to. When the href attribute is used in the <a></a> tag, the tag has the function of a hyperlink. |
| target | The target attribute is used to specify how the page is opened. Its values are _self, _blank, _parent and _top (_self and _blank are more commonly used). Among them, _self is the default value, which means opening in the original window, _blank means opening in a new window, _parent means opening the linked document in the parent frame set, and _top means opening the linked document in the entire window. |
Case:
<!DOCTYPE html>
<html>
="utf-8"> <body> Open in a new window: <a href="http://www.lzy.edu.cn/" target= "_blank">Luzhou Vocational and Technical College</a><br /> Open in the original window: http://www.chinaskills-jsw.org/" target="_self">National Vocational College Skills Competition</a> </body> </html>
Effect:
(8) Image tags
To display images in HTML web pages, you need to use the image tag <img>
<img>The basic syntax format of the tag: <img src="Image URL" />
Case:
Specific code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexg</title>
</head>
<body>
本地图片：
<img src="../img/img01a.jpg" width="256px" height="140px" border="1px"/><br />
网络图片：
<img src="https://img1.baidu.com/it/u=2231820758,601427063&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500"width="256px" height="140px" border="1px"/><br />
</body>
</html>
Rendering:
