前端学习——HTML

VSCode常用快捷键

代码格式化：Shift+Alt+F

向上或向下移动一行：Alt+Up或Alt+Down

快速复制一行代码：Shift+Alt+Up或者Shift+Alt+Down

快速替换：Ctrl+H

HTML标签

文本标签

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

列表标签

1、有序列表

javascript 复制代码

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

2、无序列表

javascript 复制代码

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

应用于导航效果

3、快捷键：ul>li*n

n为li标签的数量

表格

javascript 复制代码

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

1、快捷键

table>tr2>td 3{单元格}

2、表格属性

border：设置边框

width：单元格宽度

height：单元格的高度

3、表格单元格合并

水平合并：colspan，水平合并保留左边删除右边

垂直合并：rowspan，垂直合并保留上边删除下边

javascript 复制代码

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

Form表单

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

javascript 复制代码

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

action:服务器地址

method：get和post

不同的提交方式，get把提交的数据url可以看到，post看不到

get一般很少提交数据，post用于提交大量数据

name：表单名称

表单元素

javascript 复制代码

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

1、文本

javascript 复制代码

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

2、密码

javascript 复制代码

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

3、提交按钮

javascript 复制代码

// 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标签：容器