Hello world

hello_world.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

comments

<!-- this is a comment -->

images

<img src="a.png" alt="yyy"></img>
<img src="foo/bar/b.png" alt="yyy"></img>
<img src="../../c.png" alt="yyy"></img>

ordered lists

<p> The following points </p>

<ol>
  <li> First </li>
  <li> Second </li>
</ol>

unordered lists

<p> The following points </p>

<ul>
  <li> foo </li>
  <li> bar </li>
</ul>

links

<a href="https://www.google.com">some text</a>

div

<label for="quota">Number of primes:</label>
<input type="text" id="quota" name="quota" value="1000000" />

<button id="generate">Generate primes</button>
<button id="reload">Reload</button>

<div id="output"></div>

<pre readonly class="event-log"></pre>



// js
const quota = document.querySelector("#quota");
const output = document.querySelector("#output");
document.querySelector("#generate").addEventListener("click", () => {
  const primes = generatePrimes(quota.value);


  // note we use output.textContent for div
  output.textContent = `Finished generating ${quota.value} primes!`;
});

document.querySelector("#reload").addEventListener("click", () => {
  document.location.reload();
});

const log = document.querySelector(".event-log");

// textContent for pre
log.textContent = "";

span

<span id="age"></span>

// js
var ageEl = document.getElementById("age")
ageEl.innerText = "22"