HTML
The standard markup language for creating web pages is not a markup language. "Hypertext" means that the web page can contain non text elements, such as pictures, links, music, etc. HTML documents are also called web pages.
Suffix: html .htm itself makes little difference.
Basic syntax:
Tags: tags are also called elements. Keywords surrounded by angle brackets, such as < HTML >, usually appear in pairs. HTML elements start with a start tag and HTML elements end with an end tag. Start and end tags are also called open tags and closed tags. Some HTML elements have empty content.
Tag attribute: additional information can be added to the element, which is generally described in the start tag.
Document: define the entire HTML document through the < HTML > tag
<html> ... </html>
Header: < head > element contains all header label elements. In the < head > element, you can insert scripts, style files (CSS), and various meta information.
Body: the < body > tag defines the body of the document.
<body> <p>This is the first paragraph.</p> </body>
Document title: the < title > tag defines the titles of different documents
Title: defined by < H1 > - < H6 > tags, the importance decreases in turn and plays an emphasis role. It is used in the main body and automatically wraps lines
<h1>This is a title</h1> <h2>This is a title</h2> <h3>This is a title</h3>
Horizontal line: separated by < HR > labels. Common attributes: color, size, width (percentage or px), align, and alignment
<p>XXXXXXXX</p> <hr color="red"size="3"width="50%"align="left/center"> <p>XXXXXXXX</p>
Paragraph: defined by label < p >, auto wrap
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
Line feed: defined by label < br >, single label
<p> XXXXXX<br>XXXXXXX </p>
List: unordered list < UL >, beginning with dot
<ul type="XXX">
<li>Jay Chou</li>
<li>Lin Junjie</li>
<li>Eason Chan</li>
</ul>Ordered list < ol >, starting with numbers / Roman letters
Layer: < div > block level element. The default is full width, height and proportion. Attributes: width, height and align
<div style="width=100px;height:100px">XXXXX</div>
Block: < span > in line elements (no line wrapping, no width and height)
<span>XXXX</span>
Hyperlinks: defined by tags < a >
Attribute: href connection to jump to location: target window open location:_ self current window_ Blank blank window
<a href="https://www.bilibili. Com "> BiliBili animation barrage website</a>
The < base > tag describes the basic link address / link target. This tag serves as the default link for all link tags in the HTML document:
<head> <base href="http://www.bilibili.com/images/" target="_blank"> </head>
Anchor: defined by label < a >
href followed by # means to refresh the current page and return to the top
<a href="#"> back to top</a>
Jump to id/name
<a href="#id/nameXXXX"XXXXXX</a>
Image: defined by label < img >, single label
Attribute: src address of the incoming picture (required attribute)
alt the text content displayed when the picture is broken or does not exist
titile the text displayed when the mouse hovers over the picture
Width: the width of the picture
Height: the height of the picture
Border: the border of the picture
<img src="/images/logo.png" width="258" height="39" />
Table: defined by < Table > tag
tr line
td standard cell
th header (font centered and bold)
Table attribute: width table width
weight table height
border table boundary
align table alignment
style="border-collapse:collapse;" Merge Table borders
tr attribute: align alignment of line contents
bgcolor line background color
<table width="400px"align="center"border="1"style="border-collapse:collapse;">
<tr align="center">
<th>number</th>
<th>full name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Xiao Ming</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Xiao Hong</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>Blue </td>
<td>21</td>
</tr>
</table>Relationship between document and external resources: defined by < link > tag
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Metadata: some basic metadata is described through the < meta > tag. The metadata is not displayed on the page, but will be parsed by the browser. It is usually used to specify the description of the web page, keywords, the last modification time of the file, author, and other metadata< Meta > is generally placed in the < head > area.
Define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> Define description content for web pages: <meta name="description" content="free Web & Programming tutorial"> Define Web Author: <meta name="author" content="Runoob"> Refresh the current page every 30 seconds: <meta http-equiv="refresh" content="30">
Script: < script > tag is used to load the script file
HTML comments:
<!-- This is a comment -->
Format label:
< font >: Specifies the font, size and color of the text
< pre >: define pre formatted text (space and line feed are reserved)
<pre> Hello World </pre> Hello World   Space character
< b >: Bold
< I >: tilt
< U >: underline
< del >: middle dash
< sup >: superscript
< sub >: subscript
Empty element: HTML element without content. It is required that the element must be closed in future versions, so < XXX / > is the safest
Page structure:
/ / picture from rookie tutorial Introduction to HTML | rookie tutorial (runoob.com)