第一课 前端与 HTML之HTML 1| 青训营笔记

晨曦珂梦
155 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。

前端的概念我们简单了解过后我们开始学习HTML。

首先，我们要了解到什么是HTML？

HTML：全称HyperText Markup Language

HyperText： 意思是超文本，它可以包含图片，标题，链接以及表格等更加丰富的格式。

Markup Language：它是标记语言，用来表示上面这些不同的格式。我们通常使用一个开始标签和结束标签这样成对的标签来表示一段内容

7.jpg

举个例子比如我们需要展示一个图片，我们会用到

<img src="photo.jpg" />

这个标签，其中img就是图片的标记语言，而src则是这个标签中的属性名，而被双引号引起来的则是我们要传的属性值。（双引号需要输入法在英文输入的状态下输入，中文状态下的双引号编辑器不识别会报错）

这个例子还为我们演示了另一个需要注意点就是img标签因为里面不需要再添加任何东西，嵌套其他的内容了，所以可以在结尾打上"/"标记，省略结束标签。

8.jpg

上面这张图片就是我们完整的一个HTML页面。

  • 第1行<!doctype html>它标记了我们当前使用的这个HTML文件，它是一个什么样的版本的HTML，最终浏览器会根据这个来决定进行一个怎样的一个渲染模式。如果不写这个标记，浏览器会默认运行比较老的渲染模式，从而导致页面展示效果不太符合实际的效果。
  • 第2行<html></html>标签是文档的根标签，所有的其他的标签都是写在<html>标签里。
  • 第3行<head></head>标签里一般会放一些页面的原数据（页面上需要这些信息，但是又不需要直接呈现给用户的。例如：页面的标题，页面用了什么样的编码）
  • 第7行<body></body>标签里放的就是我们真正呈现给用户的内容。例如：一个标题或者一段文字。

页面展示效果如下图所示

9.jpg

DOM树

10.jpg

HTML语法

11.jpg

标题h1~h6

  • 代码
<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>
  • 页面展示效果 12.jpg

这里h1表示一级标题，h2表示二级标题，以此类推

列表

  • 代码
<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<h2>购物清单</h2>
<ul>
  <li>🍇</li>
  <li>🍉</li>
  <li>🍎</li>
</ul>

<h2>霸王别姬</h2>
<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>
  • 页面展示效果 13.jpg

这里有序列表ol，无序列表ul，列表内容li，定义列表dl，定义列表标题dt，定义列表具体描述dd，dt有可能对应多个dd

链接

  • 代码
<a href="https://www.bytedance.com/">
  字节跳动官网
</a>
<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
  • 页面展示效果 14.jpg

这里href是标签<a>中最重要的一个属性，超链接。target="_blank"则表示不替换本页面，在新窗口打开页面。

多媒体

  • 代码
<img
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
  alt="Metal movable type"
  width="400"
/>

<audio 
  src="/assets/music.ogg"
  controls
></audio>

<video
  src="/assets/video.mp4"
  controls
></video>
  • 页面展示效果

15.jpg

alt替代性文本，当这张图片不显示时则显示该属性名下的属性值。controls需要显示浏览器默认音频控件。

输入

  • 代码
<input placeholder="请输入用户名">

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>
  • 页面展示效果

16.jpg

placeholder属性表示占位符，用户在没有输入的时候默认显示该属性的属性值。除了可以输入文本信息外<input>还可以根据输入的type属性值的不同来展示不同的样式，例如，range滑动条，number可以输入数字并且通过min，max控制数字最大最小值，date表示日期选择会在页面展示一个日期选择框，而有些时候是需要用户去输入多行输入框，我们可以使用<textarea>标签来实现。

选择

  • 代码
<p>
  <label><input type="checkbox" />🍎</label>
  <label><input type="checkbox" checked />🍏</label>
</p>

<p>
  <label><input type="radio" name="sport" />⚽</label>
  <label><input type="radio" name="sport" />🏀</label>
</p>

<p>
  <select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
  </select>
</p>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>
  • 页面展示效果

17.jpg

checkBox表示多选，radio表示单选，单选时只要添加一个name属性，并且让属性值相同即可实现单选。如果选项比较多不方便在页面上全部展示，我们也可以通过<select>标签做一个下拉选择，选项使用<option>标签显示即可。我们也可以通过list属性来让用户输入的时候可以得到一些提示。

文本

  • 代码
<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>
  • 页面展示效果

18.jpg

最常见的有三种引用的标签，<blockquote>快捷引用，<cite>短引用，<q>也是短引用，但是<q>更具体一点。<code>表示代码标签。<strong>标签表示这个更重要更紧急，<em>标签更多是在语气上的强调

个人总结

本节课主要学习了HTML是什么，页面由哪些标签构成，标签里的内容是什么，以及一些标签的使用方法，标签内属性的使用方法和属性值的作用。

avatar
文章
阅读
粉丝