快捷键
1、英文状态下,!+回车,vscode自动填充html文件的框架
2、注释:ctrl+/
3、. + / :出现文件选择路径
./ :上一级路径
…/ :上上一级路径
4、alt +shift + 向下箭头 :快速复制
5、alt + 鼠标左键:快速选中
6、快速打出相同:eg:li*10
7、alt +shift +鼠标左击拉动:多行输入相同内容
HTML基础知识
W3C标准
HTML文件编写遵循W3C原则。
标准构成:1、HTML(页面元素和内容)。2、CSS(页面样式)。3、JS(页面交互)。
HTML文件的基本构成
<!-- 文件类型声明,告诉浏览器是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>
HTML中的标签
1、div标签:容器,包裹所有的标签。
a、可直接在div标签中写内容
b、在div标签中包裹其他标签
注:写内部尽量使用div标签包裹
2、p标签:段落标签
3、span标签:文字标签 显示重要内容标签
4、strong标签:加粗文字(内容)
5、em标签:文字倾斜
6、br标签:换行标签
7、hr标签:添加水平线
8、a标签:超链接,用于网页跳转(默认在自身页面中跳转)
a、herf属性:用于存放跳转链接(本地链接和外网链接)
b、target属性:页面跳转类型
属性值:_self(默认自身页面跳转)、_blank(新的页面中打开)
9、img标签:图片标签。
a、src属性:存放图片地址
b、alt属性:存放图片加载不出来时的文字提示
c、title属性:图片正常加载时的提示文字
d、width属性:设置图片宽度,以px为单位
e、height属性:设置图片高度,以px为单位
10、 :设置文本内容空格
11、h1~h6标签:标题标签(h1字体最大,h6字体最小)
标签分类
单标签:br hr img
双标签:div p span strong em a h1~h6 ul li ol
行内标签:内容不能设置宽高,高度靠内容撑开,在一行中显示
a span strong em img
块元素标签:可以设置宽高,不在一行中显示,无论内容多少,都在一行中显示
div p h1~h6 img ul li ol dl dt dd
锚链接
1、A甲跳A乙(自身页面之间进行跳转)
设置跳转链接:
<a href="#名字"></a>
设置标识:需要跳转到哪个位置就将标识放在哪个位置
<a name="名字"></a>
注:跳转链接和标识的名字要一致
2、A甲跳B乙(跳转到另外一个页面中查找内容)
设置跳转链接:
<a href="网址(地址) #名字"></a>
设置标识:需要跳转到哪个位置就将标识放在哪个位置
<a name="名字"></a>
列表(可以相互嵌套,也可以存放其他标签)
列表中可以嵌套其他标签,但是只能在li中嵌套,要遵循W3C标准
无序列表
<!--ul无序列表的壳 -->
<ul>
<!-- li 中存放列表内容 -->
<li>
</li>
</ul>
type属性可设置序号类型:disk(实心圆)、square(实心正方形)、 circle(空心圆)
有序列表
<!--ol有序列表的壳 -->
<ol>
<!-- li 中存放列表内容 -->
<li>
</li>
</ol>
type属性可设置序号类型:A、a、I、i、1
自定义列表
<!-- dl自定义列表的盒子 -->
<dl>
<!-- dt标题 -->
<dt>班级</dt>
<!-- dd 内容 -->
<dd>3班</dd>
</dl>
dl与dt、dd是父子关系,dt和dd是兄弟关系
表格
标准表格
<!-- 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>
属性:
border = “1”:边框。(数值表示的是边框的粗细)
width = “500px”:设置表格宽度
height = “500px”:设置表格宽度
长表格(语义化表格)
<!-- 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:纵向合并单元格
colspan:横向合并单元格
表单:将数据提交给服务器
表单的基本内容和属性:
type:指定元素类型
name:指定表单元素名称
value:元素的初始值(type为radio时必须指定一个值)
size:指定表单元素的初始宽度,文本框长度
maxlength:输入最大字符数,推荐最大字符长度是120
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>
表单按钮和日期:
<!-- 按钮
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>