html basic knowledge summary
1. Summary of basic html knowledge
1.html introduction and function
HTML stands for HyperText Mark-up Language, which refers to HyperText Mark-up Language. Marks are labels, for example:, <a></a> <html></html>generally labels appear in pairs, but there are also single occurrences. Such <br> <img>as: .
The meaning of hypertext:
1. There are pictures, videos, music, etc. beyond the text limit in webpages.
2. Hyperlink text: can jump from one webpage to another webpage.
Function:
used to develop webpages
2. Use vscode for html programming
- vscode is an open source and free software (personal use feels good)
- Download link: https://code.visualstudio.com/Download
- vscode can install two plug-ins. One is the Chinese plug-in, and the other is the browser running plug-in. The plug-in names are 1. Chinese (Simplified) Language Pack for VS Code 2. open in brower.
- You can click the following picture to display the icon, and then search in the search box behind (ignore the dirty computer screen)
- The use of vscode will not be repeated too much, students who don’t know how to use it can refer to the CSDN article.
3.html some commonly used tags (including single tags and tags that appear in pairs)
- Appearing in pairs
<h1>标题标签</h1>
<li>li标签定义列表项目</li>
<p>段落标签</p>
<div>div标签</div>
<a href='https://www.baidu.com'>百度</a>
- Singly
<br>
<img src="图片路径" alt="图片描述信息">
Note: The writing of the label is not case sensitive, but it is generally lowercase!
- Set the resource path of the picture is
divided into absolute path and relative path. Absolute path means to write from the root directory, and relative path to write from the current directory.
4. Types of tags
There are three types of tags: table tags, list tags, and form tags
- List label
<ul>无序列表</ul>
<ol>有序列表</ol>
- Form label
<table>
<tr>
<th>table表示表格标签，tr表示表格中的一行，th表示表格中的表头</th>
</tr>
<tr>
<td>表示表格中的一列</td>
</tr>
</table>
- Form label
<form>标签 定义完整的表单标签
<label>标签 表示表单元素的文字标注标签，定义文字标注
<input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
type:
type="text"定义单行文本输入框
type="password"定义密码输入框
type="radio"定义单选输入框
type="chackbox"定义复选输入框
type="file"定义上传文件
type="submit"定义提交按钮
type="reset"定义重置按钮
type="button"定义普通按钮
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉列表
<option>和<select>标签配合，定义下拉列表中的选项
- Form attributes can be set when the form is submitted, action means setting the address of the form submission, method means the form submission method, which is divided into get and post. Form element attribute settings, two parameters, name and value, name represents the name of the form element, and value represents the value of the form element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把数据提交给web服务器需要使用的表单标签：<form> -->
<form action="https://www.baidu.com" method="POST">
<!-- get方式提交数据到web服务器以地址栏的方式提交给web服务器，不安全，能看到提交的数据 -->
<!-- 严谨的说是以查询参数的方式提交给web服务器 -->
<!-- Post 方式提交表单数据会放到请求体里面 -->
<p>
<!-- for 根据id名给指定id的标签设置光标 -->
<label>用户名：</label>
<input type="text" name="username" >
</p>
<p>
<label>密码：</label>
<input type="password" name="password">
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="学习">学习
<input type="checkbox" name="like" value="打游戏">打游戏
<input type="checkbox" name="like" value="羽毛球">羽毛球
</p>
<p>
<label>照片：</label>
<input type="file" name="pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="desc"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="position">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">西安</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
<!--get 和 Post 方式提交表单数据时都以HTTP协议的方式提交数据给web服务器 -->
</form>
</body>
</html>