如何用HTML写一个网页

时间:2021-11-08 来源:未知网络 作者:996建站网

首先,新建一个文件夹,标题为html-demo-1,可以拖到vscode打开,接着在文件夹中新建文件index.html。html文件有一个基本格式,输入感叹号,然后tab键,就会出现。由于我们写的是一篇中文网页,故要做一些改动,把lang后面的en改成zh-CN,基本准备工作到这里就结束了。下次新建html文件基本上都是用这种方法。

依次用的标签有,

表示标题的<h>标签,<h>标签有<h1>到<h6>六个层级,标题从大到小。

代表文章一个段落的的<p>标签,不仅是文本,任何想以段落显示的内容,比如图表和表单项,都可以放进<p>元素。

注意它与<div>的区别,<div>是无语义的块级元素,只要样式上需要多个块级元素组合在一起,就可以使用<div>。但是,这应该是最后的措施,带有语义的块级标签始终应该优先使用,当且仅当没有其他语义元素合适时,才可以使用<div>。

<nav>标签定义导航链接的部分。

<ol>标签是一个有序列表容器,会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。<ol>标签内部可以嵌套<ol>标签或<ul>标签,形成多级列表。

<ul>是一个无序列表容器,会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。

<li>表示列表项,用在<ol>或<ul>容器之中。

新建一个目录名叫images,把图片下载好后直接拖入vscode的images目录中,在src后输入images可以选择目录中的文件,alt属性用来设定图片的文字说明,图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本。但是我们还需要加一些宽度和高度的设定,一旦设置了这两个属性,浏览器会在网页中预先留出这个大小的空间,不管图片有没有加载成功。不过,由于图片的显示大小可以用css设置,所以不建议使用这两个属性。如果一定要设置,只要设置其一防止图片变形,一般来说图片不能超过300k,否则加载速度会变慢,建议压缩,想要有点击图片产生高清大图的效果,除了a标签内链接外,一般还要添加target="_blank",

内容写完后,我们可以使用谷歌浏览器检查功能预览网页在手机上的效果。也可以用处在同一wifi下的手机调试。也可以用chorme远程调试。

最后一步是部署到github pages,注意它在生成网址后加上路径index.html,在仓库中一定要加上预览地址,任何作品都应该如此,方便面试官浏览。

预览地址如下:拖延心理学

提高效率的小技巧 :

1.输入包围缩写个别行:ctrl+shift+P(显示相关插件的命令),输入wrap,选择输入包围缩写个别行,选中该需要修改的部分,再次输入Emmett wrap,点击输入缩写包围个别行,ul>li*,即可快速达到想要效果。(注意使用缩写包围和使用缩写包围个别行的区别)

2.同时删除维基百科[ ]中的内容:点击编辑,替换,使用正则表达式, 用完之后注意取消

如何用HTML写一个网页插图

3.按住alt键可以多选 全选所需部分 并按tab键 可以使其整体右移

如何用HTML写一个网页插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序