前端学习——HTML

VSCode常用快捷键

代码格式化：Shift+Alt+F
向上或向下移动一行：Alt+Up或Alt+Down
快速复制一行代码：Shift+Alt+Up或者Shift+Alt+Down
快速替换：Ctrl+H

HTML标签

文本标签

定义着重文字
定义粗体文字
定义斜体文字
加重语气
删除字
无特定含义

列表标签

1、有序列表

//type可以改变列表项目标签
// 1：用数字标号；A：用大写字母标号；a：用小写字母标号；i：小写罗马数字标号；I：大写罗马数字标号
<ol type=''>
   <li></li>
</ol>

2、无序列表

//type属性
//disc：默认实心圆；circle：空心圆；square：小方块；none：不显示
<ul>
	<li></li>
</ul>

应用于导航效果
3、快捷键：ul>li*n
n为li标签的数量

表格

//type属性
//
<table>
	<tr>//行
		<td></td>//列
	</tr>
</table>

1、快捷键
table>tr2>td3{单元格}
2、表格属性
border：设置边框
width：单元格宽度
height：单元格的高度
3、表格单元格合并
水平合并：colspan，水平合并保留左边删除右边
垂直合并：rowspan，垂直合并保留上边删除下边

//type属性
//
<table>
	<tr>//行
		<td></td>//列
		<td></td>//列
		<td></td>//列
	</tr>
	<tr>//行
		<td colspan="2"></td>//列
		<td></td>//列
	</tr>
</table>

Form表单

用户输入的地方都会有表单，交互

// An highlighted block
<form action="url" method="get/post" name="myForm"></form> 

action:服务器地址
method：get和post
不同的提交方式，get把提交的数据url可以看到，post看不到
get一般很少提交数据，post用于提交大量数据
name：表单名称

表单元素

// An highlighted block
<form>
	<input type="text">
	<input type="submmit">
</form> 

1、文本

// An highlighted block
<form>
	用户名：<input type="text">
</form> 

2、密码

// An highlighted block
<form>
	密码：<input type="password" name="pwd">
</form> 

3、提交按钮

// An highlighted block
<form>
	用户名：<input type="text">
	密码：<input type="password" name="pwd">
	<input type="submmit" value="登录">
</form> 

块元素与行内元素

1、块元素
div form h1~h6 hr p table ul ol
2、内联元素
a b em span i strong
3、行内块级元素（不换行，能够识别宽高）
button img input

新增标签

div标签：容器