python learning directory portal
Web Collection 01 Episode (Basic Cognition of the Web)
Article Directory
1. Introduction to the Web Front End
1. What is a web page
A web page is a browser-based application and a carrier of data display.
2. The composition of the web page
- Browser
- Send a request to the server instead of the user
- Receive and parse data to display to users
- server
- Storing data
- Process and respond to requests
- protocol
- Standardize the way data is packaged during transmission
3. Preparation before development
- Operating environment: browser, set chrome as the default browser, as the operating environment of webpage files.
推荐谷歌或者火狐浏览器 - Debugging tool: the debugging tool that comes with the browser, use the shortcut key "F12" or right-click "check" to open it.
- Development tools: no limit, just choose the one you are used to.
Html流行的编辑器推荐- VsCode
- HBuilder
- SublimeText
- Notepad
Two, HTML syntax introduction
1. HTML Introduction
HyperText Markup Language (HyperText Markup Language) A language that the browser can recognize and parse, and construct page structure and fill content in the form of tags
2. Label
Tags are also called tags or elements and are used to mark up content on a web page
-
Grammar: Labels use <> as a sign, label names are not case sensitive, lowercase is recommended
-
classification:
-
Double tags: appear in pairs, including a start tag and an end tag. example:
<html></html>- Single label: only start label, no end label, you can manually add "/" to indicate closure. example:
<br> <br/> -
Label attributes:
- The label attribute is written in the opening label, separated from the label name by a space, and used to set the display content of the current label or modify the display effect. It consists of an attribute name and an attribute value, and the attribute value is expressed in double quotation marks. example:
<meta charset="utf-8"> -
Several groups of label attributes can be added to the same label, separated by spaces. example:
<img src="lily.jpg" width="200px" height="200px">
3. Use
-
Create a web page file, use .html or .htm as the file suffix
-
Add the basic structure of the page
<!doctype html> <html> <head> <title>网页标题</title> <meta charset="utf-8"> </head> <body> 网页主体内容 </body> </html> -
Tag nesting: write other tags in double tags, called tag nesting
- In the nested structure, the outer element is called the parent element, and the inner element is called the child element;
- In a multi-level nesting structure, all outer elements are collectively called ancestor elements, and inner elements are collectively called descendant elements
- The level structure is sibling
- HTML syntax specification
-
Tag names are not case sensitive, lowercase is recommended
- Comment syntax:
<!-- 此处为注释 -->
3. Introduction to commonly used labels
1. Basic structure analysis
Shortcut key: !+table
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
<head>
<!-- 设置网页标题，显示在网页选项卡上方 -->
<title>网页标题</title>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->
2. Commonly used tags in the body
-
Text label
- Title tag: comes with a bold effect, the font size decreases from h1 to h6 step by step
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>- Paragraph tags:
<p>段落文本</p>- Normal text label:
<span>行分区标签，用于对特殊文本特殊处理</span> <b>加粗标签</b> <strong>强调标签，效果同b标签</strong> <i>斜体标签</i> <u>下划线标签</u> <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>Label example:
<p> <label for="username">姓名:</label> <input id="username" type="text" name="username" value="" placeholder="请输入用户名"> </p>- Format tag: The
browser will ignore line breaks and spaces in the code, and only display as a space. To achieve line breaks in the page, you need to resort to line break tags.
<br>- Horizontal line label, insert a horizontal dividing line in the page
<hr>- Character entity: In
some cases, the browser will parse some special characters in the way of HTML, which will affect the display result. At this time, these characters need to be converted to other forms of writing.
Example:
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"￥" -
Container tags are
often used for page structure division, combined with CSS to achieve web page layout<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div> -
Pictures and hyperlink tags
-
Picture tag
: Used to insert a picture in a web page.
- The attribute src is used to give the URL of the picture and is required.
- The attribute width/height is used to set the size of the picture, take the pixel value, and display it according to the original size of the picture by default.
- The attribute title is used to set the picture title, which will be displayed when the mouse hovers over the picture
- The attribute alt is used to set the prompt text after the image fails to load
grammar:
<img src="" width="" height="" title="" alt="">- Hyperlink label: users can click on the hyperlink to jump to other pages
- The attribute href is used to set the URL of the target file and is required.
- The attribute target is used to set the opening method of the target file, which is opened in the current window by default. You can set the new window to open the target text (take "_blank")
<a href="http://www.taobao.com" target="_self">淘宝</a> <a href="http://www.baidu.com" target="_blank">百度</a> -
3. Common structure tags
-
List label
- The ordered list
uses Arabic numerals to identify each data shortcut by default [ol>li*4]
<ol> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ol>- Unordered list (unordered list)
uses solid dots to identify list item shortcut keys by default [ul>li*4]
<ul> <li>list item 列表项</li> <li>list item 列表项</li> <li>list item 列表项</li> </ul>- List nesting
Add another list nested in an existing list, usually in the drop-down menu shortcut [ol>li>ul>li*3]
<ol> <li> 西游记 <ul> <li>孙悟空</li> <li>猪八戒</li> <li>沙和尚</li> </ul> </li> </ol> - The ordered list
-
Form label
-
The table is composed of rows and cells, and is often used for direct data display or auxiliary typesetting. The basic structure is as follows
-
vscode shortcut
-
-
Shortcut key【table>tr 2>td 3】
<!-- 创建表格标签 --> <table> <!-- 创建行标签 --> <tr> <!-- 行中创建单元格以显示数据 --> <td>姓名</td> <td>年龄</td> <td>班级</td> </tr> <tr> <td>迪丽热巴</td> <td>20</td> <td>002</td> </tr> </table> -
-
Cell merging: used to adjust the table structure, divided into cross-row merging and cross-column merging. After merging, you need to delete the merged cells to ensure that the table structure is complete
Cell properties effect Value colspan Combine cells across columns Unitless value rowspan Merge cells across rows Unitless value
<tr>
//【跨列】
<td colspan="6">午 休</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
//【跨行】
<td rowspan="3">
下
<br>
午
</td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
- 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px">
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
-
Form label A
form is used to collect user information and submit it to the server. It is composed of form elements and form controls. The form element form is responsible for submitting data to the server, and the form control is responsible for collecting data.- Form use
Attribute name Value action Set the data submission address method Set the data submission method, the default is get method [key: values form to submit data], can be set to post enctype Set the encoding type of the data, involving binary data submission (such as pictures, files, audio and video, etc.), you must set the data submission method to post, and the encoding type to "multipart/form-data" method extension:
Most use post when submitting data and most use get when obtaining data
GET method to submit data:
-
Disadvantages:
1. Plain text, not safe
2. The address bar has a format limitation [no more than 2k]
3. There is a size limitation使用场景:搜索,分页,向服务器要资源时 POST method to submit data:
To a certain extent safe
No size and format restrictions
Usage scenario: large amount of data when the data format is complex
例如：
```html
<form action="" method="" enctype="">
<!--此处为表单控件-->
</form>
```
Demo【向百度搜索功能提交数据】：
```html
<form action="https://www.baidu.com/s" target="_blank">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
```
- Form controls use (emphasis)
form controls are used to collect user information, you can set the following label attributes
| Attribute name | Value |
|---|---|
| type | Set the control type |
| name | Set the control name, and finally send it to the server together with the value |
| value | Set the value of the control |
| placeholder | Set the prompt text in the input box |
| maxlength | Set the maximum number of characters that can be entered in the input box |
| checked | Set the default selection of a radio button or check button |
| selected | Set the default selection of the drop-down menu |
Form controls are used to collect user information. Common controls are as follows:
<input type="text"> 文本框
<input type="password"> 密码框
<input type="radio"> 单选按钮
<input type="checkbox"> 复选框
<input type="file"> 文件上传
<input type="button"> 普通按钮 普通按钮 没有提交效果
<input type="submit"> 提交按钮 <!-- ?uname=admin&pwd=123456 -->
<!-- ?key=val&key=val&... 查询字符串 -->
<select></select> 下拉菜单
<textarea></textarea> 文本域
Note: [If the button label is written in the form, it is equivalent to input type='submit']