20201208作业

1208作业

一、环境安装

• 1、编辑器：vscode
  编辑器插件：
  1.1：编辑器汉化插件[Chinese (Simplified) Language Pack for Visual Studio Code]
  1.2：自动关闭标签插件[Auto Close Tag]
  1.3：自动重命名标签插件[Auto Rename Tag]
  1.4：HTML、CSS代码提示插件[HTML CSS Support]
  1.5：HTML、CSS、JS快速生成代码片段插件[HTML/CSS/Javascript Snippets]
  1.6：实时服务器插件[Live Server]
  1.7：Markdown预览插件[Markdown Preview Enhanced]
  1.8：Markdown语法检查插件[markdownlint]

• 2、浏览器：Chrome
  浏览器插件：
  2.1：Google产品加速访问插件[IGG谷歌访问助手]
  2.2：广告拦截插件[AdBlocker - Adblock Plus]
  2.3：修改网站默认编码插件[Charset]
  2.4：浏览器默认主题插件[Dark Reader]
  2.5：拾色器插件[Getcolor]
  2.6：页面屏幕截图插件[GoFullPage - Full Page Screen Capture]
  2.7：新标签页插件[Infinity 新标签页]
  2.8：页面测量插件[Page Ruler Redux]
  2.9：脚本管理器插件[Tampermonkey BETA]
  2.10：Vue.js调试插件[Vue.js devtools]
  2.11：划词翻译插件[划词翻译]
  2.12：简悦插件[简悦 - SimpRead]

二、HTML标签

页面中看到的内容都是由元素组成的，元素由标签描述，标签根据元素的类型分为双标签和单标签，每一个元素的特征有属性来描述，描述的属性写到起始标签中。
HTML中的所有内容，如果想添加到HTML文档中就必须使用一个标签。

双标签

• 1、标题标签
  标题标签分为6级，默认字体加粗，字体由大到小依次为h1、h2、h3、h4、h5、h6
  标题标签可以用来划分页面结构，可用于SEO优化
  切记：标题不要滥用
  <h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>

• 2、段落标签<p></p>
  <p>这是段落标签</p>

• 3、Javascript标签<script></script>
  用于存放Javascript代码的标签

<script type="javascript">
    const SITE = 'PHP中文网';
</script>

• 4、超链接标签<a></a>
  超链接标签为<a></a>,有href、target等属性

  • href属性值为要跳转的地址，可以是本地路径也可以是网络地址
  • target属性值有_self和_black
    _self：跳转的新页面在当前窗口打开（默认值）
    _black：跳转的新页面在新窗口打开
    <a href="https://www.baidu.com" target="_self">小度小度</a>
<a href="https://www.baidu.com" target="_black">小度小度</a>

• 5、内联框架标签<iframe></iframe>
  内联框架标签为<iframe></iframe>,有src、srcdoc等属性

  • src属性值为内联框架要显示内容的路径，可以使本地路径也可以是网络地址
  • srcdoc属性值为内联框架要显示的内容
    <iframe src="https://www.baidu.com"></iframe>
<iframe src="./html/1208/index.html"></iframe>
<iframe srcdoc="这是一个内联框架标签"></iframe>

• 6、超链接标签与内联框架标签配合使用实现画中画效果（在指定窗口打开新页面）
  此效果需要将超链接标签的href属性值设置为原内联框架标签的src属性值，将超链接标签的target属性值与内联框架标签的name值设置一致，另外在

<a href="https://www.baidu.com" target="baidu">小度小度</a>
<iframe srcdoc="请点击上方小度小度" name="baidu"></iframe>

• 7、斜体标签<em></em>
  实现字体倾斜效果
  <em>斜体标签</em>

• 8、锚点标签
  使用锚点，可以实现在当前页面中的任意位置进行跳转

<a href="#footer">返回顶部</a>
<div id="footer" style="margin-top: 2000px">底部</div>

• 9、图片标签<img>
  图片标签为<img>,有src、alt等属性
  • src属性值为图片文件路径，可以使用本地路径也可以使用网络地址
  • alt属性值为图片的文字说明，有利于无障碍阅读和SEO优化
  • width属性值为图片宽度
  • height属性值为图片高度
    切记：width、和height只需要设置一个，另一个会等比例缩放，如果都设置可能会导致图片失去原比例，一般不会使用这两个属性，会使用CSS样式表来设置，另外图片很少单独使用，一般用在链接中
    <img src="./html/1208/index.jpg" alt="首页图片">