Xiuchuan Zhang

Personal Website

This is Xiuchuan's personal website.
I plan to post some of my current learning and review notes on it.
If you have any questions or suggestions, welcome to comment in my posts.

HTML: Elements and Structure


<!DOCTYPE html> This declaration is an instruction. It tells the browser what type of document to expect, along with what version of HTML is being used in the document.

<html></html> Anything between the tags will be interpreted as HTML code.

<head></head> contains the metadata for a web page. Metadata is information about the page that isn’t displayed directly on the web page.

<title>The browser displays the title of the page.</title>

<body> Only content inside the body tags can be displayed to the screen. <body/>

<br /> The line break element is a self-closing tag.

<!– This is a comment that the browser will not display. –>

<h1></h1>  used for main headings. All other smaller headings are used for subheadings. <h2><h3><h4><h5><h6>

<p>Paragraphs  simply contain a block of plain text</p>

<div></div> can contain any text or other HTML elements. They are primarily used to divide HTML documents into sections. non-semantic tags

<span></span> contain short pieces of text or other HTML. They are primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.

<em> italic emphasis </em>

<strong> bold emphasis </strong>

<ul><li>Unordered list with · </li></ul>

<ol><li>Ordered list is numbered</li></ol>

<img src=”image-location.com” alt=”description of the image” /> Images

<video src=”myVideo.mp4” width=”#” height=”#” controls> Video not supported </video>

<a href=”https://location.com/ “ target=”_blank”>This Is A Link To Website</a> The target attribute specifies that a link should open in a new window.

<a href=”./index.html”>Displaying index.html</a>

<p id=”id”> id remembers the purpose of a link</p> <a href=”#id”>ID</a>

<nav>Navigation is used to wrap these links in order to organize the content on your web page.</nav> semantic tags


<table></table> contains all of the tabular data you plan on displaying

<tbody><tr></tr></tbody> contain the all of the table’s data, excluding the table headings

<thead><th></th></thead> section off the table’s headings

<tfoot></tfoot> the footer contains the totals of the data in the table

<table><tr></tr></table> add rows using the table row element

<table><tr><td>add data using the table data element</td></tr></table>

<th scope=”row”> The table heading element to add titles to rows and columns</th>

scope = “row” or “col”  this value makes it clear that the heading is for a row or column.

<table border=”1”> is deprecated

table, td { border: 1px solid black; } Using CSS

<td colspan=”2”> denote the positive integer  number of columns it spans across.</td> rowspan=”2” is the same for row




Thank you for your supporting

Scan It