VsCode开发html5网页之表单day2(新手向5)

I.VsCode工作区中新建文件夹及文件

我们要新建一个总的文件工作区文件夹Workspace,然后在Workspace下新建文件夹Test1,在Test1下新建demo.html
新建文件夹
文件夹中新建文件

II.demo.html写表单

a. html的基本结构:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title></title>
</head>
<body>
网页的文本、图片等信息;
</body>
</html>

demo,html中输入html:5按Enter键
在vscode中的html里面输入html:5按回车后快捷输出html5的基本结构
html5基本机构

b.Head部分:用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有:
1、title标签:浏览器标签页显示的标题
2、meta标签:其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8">
常见的字符集编码格式:
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码
c.UTF-8:万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。
3、link标签:链接网页图标(title前的小logo),其常用属性有:
①rel属性:声明链接文件的类型,此处选icon
②type属性:可以省略
③href属性:表示图片的路径地址

三、body部分:网页的文本、图片等信息

标签的分类:
块级标签:显示为块,前后隔一行(自动换行)
行级标签:按行从左往右逐一显示。
1、 常见的块级标签:
①<h1></h1>......<h6><h6>:标题标签,自动加粗,h1最大,h6最小。
②<hr/>:水平线标签,添加一条水平线。
③<p></p>:段落标签,
④<br/>:换行标签,
⑤<blockquote/></blockquote>:引用标签,cite属性,表明引用的来源,一般引用网址
浏览器默认首行缩进。
⑥<pre></pre>:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示:
2、 基于布局的块级标签
列表:无序列表、有序列表、定义列表
①有序列表:<ol></ol> 列表项:<li></li>
②无序列表:<ul></ul> 列表项:<li></li>
③定义列表(实现图文混排):<dl></dl>
列表标题:<dt>一般只有一项</dt>
列表描述项:<dd>可以有很多项
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值