这是我参与「第四届青训营」笔记创作活动的的第1天。

一.课前准备

选用Notepad++和Visual Studio Code作为代码编辑器
选用Microsoft Edge作为网络浏览器用以测试代码
选用Photoshop为网页进行图像制作
用Github管理代码，用于后续项目合作进行

二.开始学习HTML

HTML的英文全称是Hyper Text Markup。在我看来，HTML是一种标记语言，有点像我之前接触到的MarkDown，通过不同的标签实现文字、图片等在网页上的不同显示状态。它可以使得网页更加多元，更加丰富。

完整的HTML组成

整个文档：在<html>和</html>之间包含网页文件的全部内容。
文档头：在<head>和</head>之间存放网页文件的所有头部元素，主要包含<title>、<meta>、<link>、<style>、<script>等标记。
文档体：在<body>和</body>之间存放网页文件的主体部分，主要包含<p>、<form>、<br>、<input>、<table>等标记。

HTML的元素组成

开始标签：例如<p>，是由左右角括号和中间的操作符构成，当只存在开始标签而没有结束标签使，后续内容都根据开始标签规定的格式呈现。
结束标签：与开始标签相似，在元素名之前包含了一个斜杠，用以标志元素的结尾。
内容：元素的内容，一般为输入的文本内容，也可以是一些属性。内容中出现<, >,",' 和 & 这些特殊字符必须使用字符引用。
元素：开始标签、结束标签与内容相结合，便是一个完整的元素。

注意：不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，例如<img>、<input>、<br>等。

基本内容实现

meta-example.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Meta examples</title>
    <link rel="stylesheet" href="style.css">
    
    <meta name="author" content="Chris Mills">
    <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">

    <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
    <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
    <meta property="og:title" content="Metadata; The HTML &lt;head&gt;, on MDN">

    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <h1>Meta examples</h1>	
    <p>Japanese example: ご飯が熱い。</p>
	<script src="script.js" defer></script>
	
  </body>
</html>

style.css

html {
  background-color: white;
  font-size: 20px;
}

ul {
  background: blue;
  padding: 10px;
  border: 1px solid black ;
}

li {
  margin-left: 20px;
}

script.js

const list = document.createElement('ul');
const info = document.createElement('p');
const html = document.querySelector('html');

info.textContent = 'Below is a dynamic list. Click anywhere on the page to add a new list item. Click an existing list item to change its text to something else.';

document.body.appendChild(info);
document.body.appendChild(list);

html.onclick = function() {
  const listItem = document.createElement('li');
  const listContent = prompt('What content do you want the list item to have?');
  listItem.textContent = listContent;
  list.appendChild(listItem);

  listItem.onclick = function(e) {
    e.stopPropagation();
    const listContent = prompt('Enter new content for your list item');
    this.textContent = listContent;
  }
}

最后的代码实现如下图：

三、小结

在今天的学习中，我对于HTML有了基本了解，老师的讲课也给了我一些启发。仅靠HTML还是无法做出优良的网页的，还需要充分利用css、javascript，相辅相成，这也是我接下来的学习目标。

HTML学习|青训营笔记