hot key
1. In English, !+Enter, vscode automatically fills the frame of the html file
2. Note: ctrl+/
3. . + /: file selection path appears./
: Upper level path
.../ : Upper level path
4 , alt + shift + down arrow: quick copy
5. alt + left mouse button: quick selection
6. Quickly type the same: eg: li*10
7. Alt + shift + left mouse click and pull: input the same content in multiple lines
HTML Basics
W3C standard
HTML files are written in accordance with W3C principles.
Standard composition: 1. HTML (page elements and content). 2. CSS (Page Style). 3. JS (page interaction).
Basic composition of HTML files
<!-- 文件类型声明，告诉浏览器是html文件 -->
<!DOCTYPE html>
<!--
HTML文件结构 大框体
lang="en" 页面默认以英文模式
-->
<html lang="en">
<!--
head 文件头部
meta 响应布局
charset="UTF-8" 字符中文
注：head头部中一般存放响应布局设置、css样式和文档标题
-->
<head>
<meta charset="UTF-8">
<!-- 响应布局的相应设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文件标题 -->
<title>Document</title>
</head>
<!-- body 文档在浏览器中呈现的内容
注：body中一般存放标签（文字标签、图片标签、样式标签、超链接标签等）和js代码
-->
<body>
我是HTML文件。
</body>
</html>
tags in HTML
1. div tag: container, wrapping all tags.
a. You can write content directly in the div tag
b. Wrap other tags in the div tag
Note: try to use div tags to wrap inside
2. p tag: paragraph tag
3. span tag: the text tag shows the important content tag
4. Strong label: bold text (content)
5. em label: text slant
6. br tag: newline tag
7. hr tag: add horizontal lines
8. a tag: hyperlink, used for webpage jump (jump in its own page by default)
a. herf attribute: used to store jump links (local links and external links)
b. target attribute: page jump type
attribute value: _self (default self-page jump), _blank (open in a new page)
9. img tag: image tag.
a. src attribute: store the image address
b. alt attribute: store the text prompt when the image cannot be loaded
c. title attribute: the prompt text when the image is loaded normally
d. width attribute: set the width of the image in px
e, height Attribute: set the height of the image, in px
10. : set text content space
11. h1~h6 tags: title tags (h1 font is the largest, h6 font is the smallest)
Label classification
Single tag: br hr img
Double tag: div p span strong em a h1~h6 ul li ol
Inline label: the width and height of the content cannot be set, and the height is expanded by the content, displayed in one line
a span strong em img
Block element label: width and height can be set, not displayed in one line, no matter how much content is, it will be displayed in one line
div p h1~h6 img ul li ol dl dt dd
anchor link
1. A jumps from A to B (jump between its own pages)
Set jump link:
<a href="#名字"></a>
Set the logo: where you need to jump to, put the logo in that position
<a name="名字"></a>
Note: The name of the jump link and the logo should be the same
2. Jump from A to B (jump to another page to find content)
Set jump link:
<a href="网址（地址） #名字"></a>
Set the logo: where you need to jump to, put the logo in that position
<a name="名字"></a>
Lists (can be nested within each other and store other tags)
Other tags can be nested in the list, but they can only be nested in li, which must follow the W3C standard
unordered list
<!--ul无序列表的壳 -->
<ul>
<!-- li 中存放列表内容 -->
<li>
</li>
</ul>
The type attribute can set the serial number type: disk (solid circle), square (solid square), circle (hollow circle)
ordered list
<!--ol有序列表的壳 -->
<ol>
<!-- li 中存放列表内容 -->
<li>
</li>
</ol>
The type attribute can set the serial number type: A, a, I, i, 1
custom list
<!-- dl自定义列表的盒子 -->
<dl>
<!-- dt标题 -->
<dt>班级</dt>
<!-- dd 内容 -->
<dd>3班</dd>
</dl>
dl and dt, dd are father-son relationship, dt and dd are brother relationship
sheet
standard form
<!-- table 基础表格 盒子 -->
<table>
<!-- tr 行 -->
<tr>
<!-- td 列 单元格 -->
<td>
<p>(1,1)</p>
</td>
<td>
<p>(1,2)</p>
</td>
</tr>
<tr>
<td>
<p>(2,1)</p>
</td>
<td>
<p>(2,2)</p>
</td>
</tr>
</table>
Attributes:
border="1": border. (The value indicates the thickness of the border)
width = "500px": set the table width
height = "500px": set the table width
Long form (semantic form)
<!-- table 盒子 -->
<table border="1">
<!-- 表格头部 -->
<thead>
<!-- 头部标题 -->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>信研2203班</td>
</tr>
</tbody>
<!-- 表格尾部 -->
<tfoot>
<tr>
<td colspan="3">班级总人数</td>
<td>23</td>
</tr>
</tfoot>
</table>
rowspan: Merge cells vertically
colspan: Merge cells horizontally
Forms: Submit data to the server
The basic content and properties of the form:
type: specifies the element type
name: specify the form element name
value: the initial value of the element (a value must be specified when the type is radio)
size: Specify the initial width of the form element, the length of the text box
maxlength: Enter the maximum number of characters, the recommended maximum character length is 120
checked: Specifies whether the button is checked
<!--
form表单
action属性：要提交的服务器地址
method属性：设置表单的提交方式 get、post（post比get更安全）
get方法早先会将用户基本信息显示在url中
注：只要写表单，form必须要有
-->
<form action="" method="post">
<!-- input表单
type属性：
text（文本框）
password（密码框）
radio（单选框【在input标签中添加name属性，多个单选框的name属性要一致】） checked属性：默认选中
checkbox（复选框） checked属性：默认选中
select（下拉框） option：内容 selected：默认选中
file（文件框，默认一次只能上传一个文件） multiple：一次上传多个文件
textare（文本域，默认识别空格） rows属性设置行值，cols属性设置列值
hidden（隐藏域，value="需要被隐藏的内容"） 用于在网页中隐藏一些不需要显示的内容，在实际开发中，隐藏域中的内容需要加密后再隐藏
readonly（只读）
disable（禁用）
注：当属性和属性值一样的时候，只写一个就行 eg: readonly="readonly"
-->
姓名：<input type="text" name="" id=""><br>
密码：<input type="password" name="" id=""><br>
性别：<input type="radio" name="sex" id=""> 男
<input type="radio" name="sex" id="" checked> 女<br>
爱好：
<input type="checkbox" name="" id="" checked> 唱
<input type="checkbox" name="" id=""> 跳
<input type="checkbox" name="" id=""> rap
<input type="checkbox" name="" id=""> 篮球<br>
班级：
<!-- select下拉框 盒子 -->
<select name="" id="">
<!-- option 内容 -->
<option value="">请选择班级</option>
<option value="" selected>1班</option>
<option value="">2班</option>
<option value="">3班</option>
</select><br>
上传文件：
<input type="file" name="" id=""><br>
<input type="file" name="" id="" multiple><br>
文本域：
<textarea name="" id="" cols="30" rows="10">请认真阅读以下内容！</textarea><br>
隐藏域：
<input type="hidden" name="" id="" value="需要被隐藏的内容">
</form>
Form button and date:
<!-- 按钮
1、提交按钮 submit 如果想要修改按钮上的字，需要用value="内容"
2、重置按钮 reset value="内容"
3、普通按钮 button
4、图片按钮 image 需要src引入图片地址，可以设置图片宽高
-->
姓名：<input type="text" name="" id=""><br>
密码：<input type="password" name="" id=""><br>
<input type="submit" name="" id="" value="确定">
<input type="reset" name="" id="" value="重置">
<input type="button" name="" id="" value="普通按钮">
<input type="image" name="" id="" src="./1.jpg" width="300px" height="300px"><br>
日期=>年月日：
<input type="date" name="" id=""> <br>
日期=>周数：
<input type="week" name="" id=""> <br>
日期=>月数：
<input type="month" name="" id=""> <br>
日期=>时间：
<input type="time" name="" id=""> <br>
日期=>日期+时间：
<input type="datetime" name="" id=""> <br>
日期=>本地日期时间：
<input type="datetime-local" name="" id=""> <br>