怎么样用HTML写一个网页
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>，新建一个文件夹，标题为html-demo-1，<span style="color: black;">能够</span>拖到vscode打开，接着在文件夹中新建文件index.html。html文件有一个基本格式，输入感叹号，<span style="color: black;">而后</span>tab键，就会<span style="color: black;">显现</span>。<span style="color: black;">因为</span><span style="color: black;">咱们</span>写的是一篇中文网页，故要做<span style="color: black;">有些</span>改动，把lang后面的en改成zh-CN，基本准备工作到<span style="color: black;">这儿</span>就结束了。下次新建html文件基本上都是用这种<span style="color: black;">办法</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">依次用的标签有，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">暗示</span>标题的<h>标签，<h>标签有<h1>到<h6>六个层级，标题从大到小。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">表率</span><span style="color: black;">文案</span>一个段落的的<p>标签，不仅是文本，任何想以段落<span style="color: black;">表示</span>的内容，<span style="color: black;">例如</span>图表和表单项，都<span style="color: black;">能够</span>放进<p>元素。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>它与<div>的区别，<div>是<span style="color: black;">没</span>语义的块级元素，只要样式上<span style="color: black;">必须</span>多个块级元素组合在<span style="color: black;">一块</span>，就<span style="color: black;">能够</span><span style="color: black;">运用</span><div>。<span style="color: black;">然则</span>，这应该是最后的<span style="color: black;">办法</span>，带有语义的块级标签始终应该优先<span style="color: black;">运用</span>，当且仅当<span style="color: black;">无</span>其他语义元素合适时，才<span style="color: black;">能够</span><span style="color: black;">运用</span><div>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><nav>标签定义导航链接的部分。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><ol>标签是一个有序列表容器，会在内部的列表项前面产生数字编号。列表项的<span style="color: black;">次序</span>有<span style="color: black;">道理</span>时，<span style="color: black;">例如</span>排名，就会采用这个标签。<ol>标签内部<span style="color: black;">能够</span>嵌套<ol>标签或<ul>标签，形成多级列表。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><ul>是一个<span style="color: black;">没</span>序列表容器，会在内部的列表项前面产生实心小圆点，<span style="color: black;">做为</span>列表符号。列表项的<span style="color: black;">次序</span><span style="color: black;">没</span><span style="color: black;">道理</span>时，采用这个标签。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><li><span style="color: black;">暗示</span>列表项，用在<ol>或<ul>容器之中。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新建一个目录名叫images，把<span style="color: black;">照片</span>下载好后直接拖入vscode的images目录中，在src后输入images<span style="color: black;">能够</span><span style="color: black;">选取</span>目录中的文件，alt属性用来设定<span style="color: black;">照片</span>的文字说明，<span style="color: black;">照片</span>不<span style="color: black;">表示</span>时（<span style="color: black;">例如</span>下载失败，或用户关闭<span style="color: black;">照片</span>加载），<span style="color: black;">照片</span>的位置上会<span style="color: black;">表示</span>该文本。<span style="color: black;">然则</span><span style="color: black;">咱们</span>还<span style="color: black;">必须</span>加<span style="color: black;">有些</span>宽度和高度的设定，一旦设置了这两个属性，浏览器会在网页中预先留出这个<span style="color: black;">体积</span>的空间，不管图片有<span style="color: black;">无</span>加载成功。<span style="color: black;">不外</span>，<span style="color: black;">因为</span><span style="color: black;">照片</span>的<span style="color: black;">表示</span><span style="color: black;">体积</span><span style="color: black;">能够</span>用css设置，<span style="color: black;">因此</span>不<span style="color: black;">意见</span><span style="color: black;">运用</span>这两个属性。<span style="color: black;">倘若</span><span style="color: black;">必定</span>要设置，只要设置其一防止<span style="color: black;">照片</span>变形，<span style="color: black;">通常</span><span style="color: black;">来讲</span><span style="color: black;">照片</span><span style="color: black;">不可</span>超过300k，否则加载速度会变慢，<span style="color: black;">意见</span>压缩，想要有点击<span style="color: black;">照片</span>产生高清大图的效果，除了a标签内链接外，<span style="color: black;">通常</span>还要添加target="_blank"，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内容写完后，我们<span style="color: black;">能够</span><span style="color: black;">运用</span>谷歌浏览器<span style="color: black;">检测</span>功能预览网页在手机上的效果。<span style="color: black;">亦</span><span style="color: black;">能够</span>用处在同一wifi下的手机调试。<span style="color: black;">亦</span><span style="color: black;">能够</span>用chorme远程调试。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后一步是<span style="color: black;">安排</span>到github pages，<span style="color: black;">重视</span>它在生成网址后加上路径index.html，在仓库中<span style="color: black;">必定</span>要加上预览<span style="color: black;">位置</span>，任何作品都应该如此，方便面试官浏览。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">预览<span style="color: black;">位置</span>如下：<a style="color: black;">拖延心理学</a> </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">提<span style="color: black;">有效</span>率的小技巧 ：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.输入<span style="color: black;">包裹</span>缩写个别行：ctrl+shift+P（<span style="color: black;">表示</span><span style="color: black;">关联</span>插件的命令），输入wrap，<span style="color: black;">选取</span>输入<span style="color: black;">包裹</span>缩写个别行，选中该<span style="color: black;">必须</span>修改的部分，再次输入Emmett wrap，点击输入缩写<span style="color: black;">包裹</span>个别行，ul>li*，<span style="color: black;">就可</span>快速达到想要效果。（<span style="color: black;">重视</span><span style="color: black;">运用</span>缩写<span style="color: black;">包裹</span>和<span style="color: black;">运用</span>缩写<span style="color: black;">包裹</span>个别行的区别）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.<span style="color: black;">同期</span>删除维基百科[ ]中的内容：点击编辑，替换，<span style="color: black;">运用</span>正则表达式， 用完之后<span style="color: black;">重视</span>取消</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-8f923a872fde31252917c0ae4a007b10_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.按住alt键<span style="color: black;">能够</span>多选 全选所需部分 并按tab键 <span style="color: black;">能够</span>使其整体右移</p>
你的话语如春风拂面，让我感到无比温暖。
页:
[1]