2020.07.25周末班作业

1.本机安装vscode，chrome并安装推荐插件完成；

2.html文档结构；
在vscode上新建文档命名为XX.html，编辑文档输入快捷指令！或 html:5 按回车键Enter生成;

<!-- 标明此文档为html格式 -->
<!DOCTYPE html>
<!-- <html>...</html>:html根标签，根元素，代表整个html文档 -->
<!-- lang 设置文档主体语言 en：英文 zh-cn：中文简体 -->
<html lang="en">
  <!-- <head>...</head>头元素：不在页面显示，给搜索引擎使用，可在里面插入CSS或JS -->
  <head>
    <!-- 文档编码集常用编码utf-8，gb2312 不分大小写 -->
    <meta charset="UTF-8" />
    <!-- viewport： 视口，当前文档在浏览器中可以被用户看到的部分 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- title 页面标题/页面命名 -->
    <title>Document</title>
  </head>
  <!--   <body>...</body>主体元素：页面用户可视化源码编译内容 -->
  <body></body>
</html>

3.元素与属性的关系；
改变元素中的属性值使整个标签发生变化；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 起始标签 -->
    <div style="font-size: 24px; color: #333;">
      元素属性
      <!-- 结束标签/闭合标签 -->
    </div>
  </body>
</html>

4.语义化的结构元素
页眉标签：header ；
主体标签：main ；
页脚标签：footer ；
导航标签： nav ；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <!-- 导航 -->
      <nav>
        <a href="">首页</a>
        <a href="">导航</a>
        <a href="">栏目</a>
      </nav>
    </header>
    <!-- 主体 -->
    <main>
      <section class="">广告</section>
      <section class="">内容区</section>
      <section class="">推荐</section>
    </main>
    <!-- 页脚 -->
    <footer>
      <nav>
        <a href="www.baidu.com">百度</a>
        <a href="pnp.cn">php中文网</a>
      </nav>
    </footer>
  </body>
</html>

5.语义化的文本元素
走马灯单行本：marquee
删除线：s
下划线：u
进度条：progress

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <marquee style="width: 80px;">走马灯单行</marquee>
    <s>删除</s>
    <u>下划线</u>
  </br>
    <progress value="65" max="100">进度条</progress>
  </body>
</html>

6.链接元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 跳转链接；target="_blank" 为新窗口打开链接，不添加为在原先窗口跳转链接 -->
    <a href="http://www.baidu.com">百度</a>
    <!-- 下载链接以文件格式不同，添加html可识别的download格式说明 -->
    <a href="0726.rar">下载</a>
    <!-- 电话链接：在想拨打打号码前面加上tel：；大多适用于手机 -->
    <a href="tel:110">电话</a>
    <!-- 邮件链接：在想发送的目标邮件前加上mailto：；得操作端口启动邮件客服端或APP -->
    <a href="mailto:944366340@qq.com">邮箱</a>
    <!-- 锚点链接：在原页面上实现跳转 -->
    <a href="#id">锚点</a>
    <h3 style="margin: 1000px 0;" id="id">锚点目标</h3>
  </body>
</html>

7.列表元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 无序列表 -->
    <ul>
      <li>css</li>
      <li>html</li>
      <li>js</li>
    </ul>
    <!-- 有序列表 -->
    <ol start="2">
      <li>早餐</li>
      <li>午餐</li>
      <li>晚餐</li>
      <li>宵夜</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
      <!-- 列表项标题 -->
      <dt>标题</dt>
      <!-- 列表项内容 -->
      <dd>内容1</dd>
      <dd>内容2</dd>
      <dt>标题2</dt>
      <dd>这内容就一个</dd>
    </dl>
    <!-- 语义化写法：通常用来写页脚 -->
    <dl>
      <dt>电话：</dt>
      <dd>110</dd>
    </dl>
  </body>
</html>

相关文章