HTML学习笔记

mu1928

已于 2022-04-22 17:35:19 修改

阅读量309

点赞数 1

分类专栏： HTML 文章标签： html 前端

于 2022-04-15 15:50:27 首次发布

本文链接：https://blog.csdn.net/mu1928/article/details/124192684

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本元素，如段落、超链接、样式、列表、多媒体、嵌入内容等，并通过两个实例展示了如何创建邮件模板和构建观鸟网站。同时，探讨了不同标签的作用，如`<header>`、`<nav>`、`<main>`等，以及如何使用CSS进行页面布局和美化。

摘要由CSDN通过智能技术生成

基础

<p></p>分段
<a></a>超链接 <a href="https://www.google.com></a>
<title> 鼠标悬浮时出现的释义。
<em></em>斜体
<strong></strong>强调

<span></span> 需要引用css或js时使用。

<span style="font-size:10em; margin:20em;"></span>

<link>引用css外部文件，通常放在文档首部。
```
<link rel="stylesheet" href="index.css ">
```
<script>引用外部JavaScript文件，通常放在文档尾部，在</body>前。
```
<script src="my-js-file.js"></script>
```
有序列表&无序列表

nesting list嵌套列表√
描述列表闭合标签<dl></dl>。每一项都用 <dt>(description term) 元素闭合。每个描述都用 <tt> (description definition) 元素闭合。
引用---->块引用&行内引用（没有太搞明白什么时候用）
<hr>水平分割线
<br>换行

缩略语

<p><abbr title="美国航天航空局">NASA</abbr> 做了一些动人心弦的事情。</p>

网站架构

<header>头部
<nav>导航栏
<main>主内容
<article>文章，在标签中可以用<section>进行分段
<aside>边栏，与<article>为<main>中两个主要部分，边栏可视网站需求设零个或多个
<footer>尾部
<div>无意义的分段，减少使用。

多媒体与嵌入

<img src=" " > 插入图片。引号中可以使用相对URL和绝对URL进行引用。
<alt>备选文本。如果图片无法加载或浏览器仅支持文字，图片将会被<alt>中的文本取代。
<title>图片也可以使用title标签，鼠标悬停在图片上时，将会显示title中的文字。
<figure>&<figcaption>。解释图片

<video>(还需再看)

<iframe>嵌入网页
```
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>
```
frameborder:如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为. allowfullscreen:如果设置，<iframe>则可以通过全屏API设置为全屏模式（稍微超出本文的范围） sandbox:增加网页的安全性。只给予文本最基础实现功能的权限。可以有效防止受到黑客攻击
<object><embed>嵌入PDF、flaash动画。(还需再看)

svg 矢量图片

  <svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="yellow" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="white" />
    <polygon points="400,0 240,3 14,225" fill="green"/>
    <text x="290" y="100" font-family="Verdana" font-size="55"
          fill="white" stroke="black" stroke-width="2">
            Hello!
    </text>
  </svg>

polygon 多边形；point：(x),(y) .... ；stroke:边框;

实例

训练代码1

html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css ">
</head>

<body>
<p class="sender-column"><em>中国北京市门头沟区，102300<br>
纽臂大学 纽臂科学院<br>
李雷 教授<br>
联系电话：123-456-7890<br>
电子邮件：no_reply@example.com</em>
</p>

<p>2019 年 2 月 22 日</p>

<p><em>韩梅梅 女士</em></p>
<p class="address"><em>中国海南省三亚市亚龙湾</em></p>

<h1>回复：韩梅梅学位申请</h1>

<p>亲爱的韩同学：</p>

<p>感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。</p>

<h2>开学日期</h2>
<p>欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：</p>
<ul>
<li>第一学期：2019 年 9 月 9 日</li>
<li>第二学期：2020 年 1 月 15 日</li>
<li>第三学期：2020 年 5 月 2 日</li>
</ul>
<p>请告诉我你是否愿意在学期开始时来校，并告知你选择的学期。</p>

<p> 你可以在我们的网站上找到更多关于<a href="##">学校重要日期</a>的信息。</p>

<h2>学习科目</h2>
纽臂科学院本着兼容并蓄的原则，课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加，也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下（按优先度排序）：
<ol>
    <li>把水（H<sub>2</sub>O）转变为酒的方法，以及白藜芦醇（C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>）对健康的帮助作用。</li>
    <li>测量室温 30°C（86°F）时，观众人数呈指数级增加对放克贝斯手表演的影响（3 × 103 > 3 × 104 效应）。</li>
    <li>使用 HTML 和 CSS 构建乐谱。</li>
    <li>请针对上述课题提供更多的信息。包括研究时长、所需资源，以及其它未尽事宜，谢谢。</li>
</ol>
<h2>异域舞蹈</h2>
你说的没错！异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题，我在下面列出我个人最喜欢的舞蹈种类和相关介绍：

<dl>
    <dt>波利尼西亚小鸡舞</dt>
        <tt>一种古老、神秘但影响广泛的舞蹈，可追溯至公元前 300 年，整个村庄围绕着一个小鸡形状的圈跳舞，祈祷牲畜肥美。</tt>
    <dt>冰岛布尔曳步舞</dt>
        <tt>在冰岛人学会用火取暖之前，他们之间流行着这种舞蹈，舞蹈时人们在地上拥成一个圈，用极小极快的动作晃动身体。我有一个学生说冰岛曳步舞是现代甩臀舞的鼻祖。</tt>
    <dt>北极机器人舞</dt>
        <tt>一个有趣的历史误传，二十世纪六十年代的英国探险者宣称发现了一种像“机器人跳舞”的舞蹈，这种舞蹈动作僵硬，流行于加拿大和阿拉斯加北部地区。后来人们发现这里的居民是因为天气太冷了才做出这样的动作。</tt>
</dl>
<p>更多信息请查看我的<a href="##">异域舞蹈研究 </a> 网页。</p>
李雷 教授

<p><em>纽臂大学校训：人人皆可纽臂 —— 诸葛中天传</em></p>
<script src="##"></script>
</body>

</html>

css部分

.body {
    max-width: 800px;
    margin: 0 auto;
}

.sender-column {
    text-align: right;
}

.h1 {
    font-size: 1.5em;
}

.h2 {
    font-size: 1.3em;
}

.p,ul,ol,dl,address {
    font-size: 1.1em;
}

.p, li, dd, dt, address {
    line-height: 1.5;
}

效果图片

训练代码2

html部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>观鸟网</title>
    <link href="style.css " rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="##"></script>
    <![endif]-->
  </head>

  <body>
  <header>
    <h1>观鸟网</h1>
    <img src="dove.png" alt="一张鸽子剪影图片">
  </header>
    <nav>
      <ul>
        <li><span>主页</span></li>
        <li><a href="#">开始</a></li>
        <li><a href="#">图片</a></li>
        <li><a href="#">设备</a></li>
        <li><a href="#">论坛</a></li>
      </ul>
    </nav>

    <main>
    <article>
      <h2>欢迎</h2>

      <p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
      <p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
    </article>
    <aside>
      <h2>收藏照片</h2>

      <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。点击缩略图查看完整照片。"></a>
      <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。点击缩略图查看完整照片。"></a>
      <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。点击缩略图查看完整照片。"></a>
      <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鹈鹕，羽毛大多为白色，背部和腹部有少许黑色羽毛，又长又直的喙呈黄色，喙的下方有一个喉囊可以暂时储存食物。点击缩略图查看完整照片。"></a>
    </aside>
  </main>
    <footer>
      <p>本虚拟站点遵守 CC0 协议，所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
      <p><a href="http://game-icons.net/lorc/originals/dove.html">鸽子图标</a> 由 Lorc 绘制。</p>
    </footer>
</body>
</html>

css部分

/* || 一般设置 */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  min-width: 800px;
  margin: 0 auto;
}

/* || 排版 */

h1, h2, h3 {
  font-family: 'Long Cang', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Noto Sans SC', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || 标题布局 */

header {
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
}

main, header, nav, article, aside, footer, section {
  background-color: rgba(29, 149, 63, 0.5);
  padding: 1%;
}

h1 {
  flex: 5;
  text-transform: uppercase;
}

header img {
  display: block;
  height: 60px;
  padding-top: 20.15px;
}

nav {
  height: 50px;
  flex: 100%;
  display: flex;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a, nav span {
  display: inline-block;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

/* || 主体布局 */

main {
  display: flex;
}

article, section {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  padding: 1%;
}

aside a {
  display: block;
  float: left;
  width: 50%;
}

aside img {
  max-width: 100%;
}

footer {
  margin-top: 10px;
}