A webpage is a page in a website, which is "a form of displaying information" on the Internet

A website is a collection of related web pages on the World Wide Web

by page location

Homepage : The first page users see when they enter a website is the homepage.
Inner page : The web page opened through the hyperlink on the home page is the inner page.

According to the form of expression

Static page : A web page written in HTML is simple to make, but lacks flexibility, and the viewer and the server do not interact when browsing the web page.
Dynamic pages : Web pages generated by programs such as ASP, PHP, JSP, ASP.NET, etc., can interact with viewers, also known as interactive pages.

HTML, CSS, and JavaScript scripts are the core and basic technologies of web design

The main function of HTML (Hypertext Markup Language) is to define the basic structure of web pages
The main function of CSS (Cascading Style Sheets) is to define the appearance of web pages
The main function of JavaScript script is to define the behavior of web pages

HTML basic format

<!DOCTYPE html>

<html>//document start

<head>

<meta charset="UTF-8">

<title>I am the title</title>

</head>

<body>

<p>Hello, I am a paragraph tag</p>

</body>

</html>//end of document

The <!DOCTYPE> tag is placed at the top of the document and is used to indicate to the browser which HTML standard specification the current document uses
The <html> root tag tells the browser that it is an HTML document
<head> is used to define the header information of HTML documents, also known as head tags (one HTML document contains only one pair)
<title> can display the title information of the web page
<body> The body tag is used to define the content to be displayed in the HTML document (one HTML document contains only one pair)

Common tags

1. Title tag <h1>--<h6>

HTML provides 6 levels of web page titles, namely <h1>--<h6> (in descending order of importance).

Each title is on its own line, with bold font and larger font size.

<h1>Header content</h1>

<h1 align="alignment">title content</h1>

The align attribute is optional. left text is aligned to the left, center text is aligned to the center, and right text is aligned to the right (default left)

2. Paragraph tag <p>

Divide the content into paragraphs, each paragraph will automatically wrap according to the size of the browser, and there will be gaps between paragraphs.

<p>Content</p>

<p align="alignment">paragraph text</p> (default left)

3. Horizontal line tag <hr>

Used to separate paragraphs from paragraphs.

<hr attribute="attribute value"/>

Attributes	parameter	Function	unit	Defaults
size		Set the thickness of the horizontal dividing line	pixel	2
align	left、center、right	Sets the alignment of the horizontal dividing line		center
width		Set the width of the horizontal dividing line	pixel (pixel), %	100%
color		Set the color of the horizontal dividing line		black
married		Set the 3D shadow of the horizontal dividing line

4. Newline tag <br/>

Forced newline display (break), single label , no gap between lines.

Insert directly in the middle of the content

5. Text formatting tags

Set bold , italic, underline and ~~strikethrough~~ etc.

bold	<strong></strong> 或 <b></b>
italics	<em></em> 或 <i></i>
strikethrough	<del></del> 或 <s></s>
underline	<ins></ins> 或 <u></u>
Superscript	<sup></sup>
subscript	<sub></sub>

6. <div> and <span> tags (for layout)

There is no semantics, it is a box for containing content (similar to product recommendations on Taobao pages, including pictures, text, etc.)

<div>Content</div> (Only one div can be placed in a line, occupying a single line - big box)

——Segmentation and partitioning (similar to the whole of all products on a ranking list of Taobao)

<span>Content</span> (multiple spans can be placed in one line—a small box) [can be used to control part of the content in a line]

——Span, span (a single product that can be displayed horizontally in a row · leaderboard row)

Nesting of divs

<div class="1">
    <div class="2"></div>
</div>

7. Image tags and paths

Image tag <img> (insert an image into a web page)

Used to define images in HTML pages, single tag

<img attribute="attribute value">

Attributes	attribute value	illustrate
src	image path	required attributes
alt	text	Replace text, display text when the image cannot be displayed normally
title	text	Prompt text, the text displayed when the mouse is placed on the image
width	pixel	set the width of the image
height	pixel	set the height of the image
border //set in CSS	pixel	Set the border thickness of the image

Width and height modification can be automatically scaled

<img src="image path" alt="text" title="text" width="number" height="number" border="number"/>

Image path representation

If it is in the same folder as the .html file, write the file name directly
If it is in the upper level file of the .html file, <img src="../filename.format">
<img src="Copy web page image URL">
<img src="root directory\lower level\lower level...\file name. format"> (picture stored in the computer)

Notes on image tags:

① Image tags can have multiple attributes, which must be written after the tag name; to display images, src must be present.

② There is no particular order between attributes, and spaces should be used to separate tag names and attributes, and attributes and attributes.

8. Hyperlink tag <a>

Used to define a hyperlink, which is used to link from one web page to another

Link Syntax

Attributes	effect
href	It is used to specify the url address of the link target, (required attribute) when the href attribute is applied to the tag, it has the hyperlink capability
target	It is the same as the opening method of the specified link page, where _self is the default value is the page opened in the current window (default) , and _blank is the opening method in a new window (starting a new window)

<a href="Jump target" title="Jump page name" target="The pop-up method of the target window">text or image</a>

link classification

External link: Write the URL of the target page in quotation marks

Internal links: Interconnections between internal pages (in the same folder, in the same project)

<a href="Introduction to Homepage.html" target="_blank">Introduction to Homepage</a>

Empty link: when no link target is determined

<a href=”#”>Homepage</a>

Download link: If the address in href is a file or compressed package, the file will be downloaded

<a href="Procedure Design Report Format.doc">Download Document</a>

Links to web page elements: Hyperlinks can be added to various web page elements, such as text, images, etc., and you can click on the element to go to the target web page

<a href="http://www.baidu.com"><img src="Picture 1.png"></a> Click on the picture to go to Baidu

Anchor link: do not open a new page, but directly locate the target location of the current page (similar to different modules in Baidu Encyclopedia)
In the href attribute of the link text, set the attribute value in the form of "#name" (the name can only be in English) <a href="#name">life experience</a>
- Find the target location label, add an id attribute = the name just now <h3 id="name">life experience</h3>

9. Annotate labels

Click on the line where the text you want to comment on, press Ctrl+/ to comment directly

Special characters

10. <em> tag

Indicates emphasized text, in italics

Label Advanced

1. Form tab

1.1 Grammar

<table>

<tr>

<th>Text in the cell</th>

... ...

</tr>

</table>

<table></table> is the label used to define the table (the entire table)
<tr></tr> is used to define the rows in the table and must be nested in <table></table> (a row in the table)
<td></td> is used to define the cells in the table and must be nested in <tr></tr> (each cell in a row)
- (When writing a line, write <tr> <td></td><td></td>……</tr> )

1.2 Header cell label

The <th> tag represents the header part of the HTML table, and the text inside will be bold and centered

grammar

<table>

<tr>

<th>Header content</th>

... ...

</tr>

<tr>

<td>Text in the cell</td>

... ...

</tr>

... ...

</table>

1.3 Table attributes (generally use CSS)

<table attribute name="attribute value">

attribute name	attribute value	describe
align	left、center、right	Specifies the alignment of the table relative to surrounding elements (the position of the table on the page)
border	1 or ""	Specifies whether the table cell has a border, the default is "" (no border)
cellpadding	Pixel values	Specifies the space between the edge of the cell and its content, default pixel 1
cellspacing	Pixel values	Specifies the space between cells, default pixel 2
width	pixel value or percentage	Specifies the width of the table

1.4 Table structure tags

If the table is very long, in order to better express the semantics of the table, the table can be divided into two parts: the table header and the table body

<thead> tag - table header area

<tbody> tag - the main body of the table

grammar:

<table>

<thead>

<tr>

<th>Header content</th>

... ...

</tr>

</thead>

<tbody>

<tr>

<td>Text in the cell</td>

... ...

</tr>

</tbody>

</table>

1.5 merge cells

Merge across rows: rowspan="number of merged cells" , the uppermost cell is the target cell, write the merge code
Merge across columns: colspan="number of merged cells" , the leftmost cell is the target cell, write the merge code

2. List label

2.1 Unordered list (heavy)

<ul> tag, list items use <li>

Require:

There is no order level between the list items of the unordered list, they are parallel

<ul></ul> can only nest <li></li>

Any element can be placed between <li></li>

The unordered list will have its own style attributes, which are commonly used in CSS settings in actual use

grammar:

<ul>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

... ...

</ul>

2.2 Ordered list (serial number will be added automatically)

<ol> tag, list items use <li>

Require:

<ol></ol> can only nest <li></li>

Any element can be placed between <li></li>

The ordered list will have its own style attributes, which are commonly used in CSS settings in actual use

grammar:

<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

... ...

</ol>

2.3 Custom list

<dl> tag, often used with <dt> (definition item/name) <dd> (describe each item/name)

Require:

<dl></dl> can only nest <dt> and <dd>

There is no limit to the number of <dt> and <dd>, usually one <dt> to multiple <dd>

<dt><dd> are all parallel

grammar:

<dl>

<dt>noun1</dt>

<dd>Noun 1 Explanation 1</dd>

<dd>Noun 1 Explanation 2</dd>

</dl>

3. Form label (usually appears on the registration page)

A complete form usually consists of three parts : form fields, form controls (form elements) and prompt information

3.1 Form field (area containing form elements)

<form> tag, <form> will submit the form element information within its scope to the server

<form action="URL address" method="submit method" name="form field name">

Various form element controls

</form>

Attributes	attribute value	effect
action	URL address	Used to specify the URL address of the server program that receives and processes form data
method	get/post	Used to design the submission method of form data, its value is get or post (default get)
name	name	Used to specify the name of the form to distinguish multiple form fields on the same page

3.2 Form elements

<input> form element (browser box)

<input/> (single label), used to collect user information, contains a type attribute, and the input field has more forms according to different type attribute values

<input type="attribute value" name="name" size="display length"/>

attribute value	describe
button	Clickable buttons (typically used to launch scripts via JavaScript)
checkbox	checkbox (multiple choice button)
file	Input field and browse field for file upload
hidden	hidden input field
image	Submit button in image form
password	Password field, the characters in this field are masked
radio	radio button
reset	Reset button to clear all data in the form
submit	The submit button will send the form data to the server
text	A single-line input field where the user can enter text , with a default width of 20 characters

Attributes	attribute value	describe
name	Custom	Define the name of the input element (to distinguish different form elements)
value	Custom	Specifies the value of the input element (the content that is automatically displayed in the open box)
checked	checked	Specifies that this input element should be selected when it is first loaded
maxlength	positive integer	Specifies the maximum length of characters in an input field
readonly	readonly	设置为只读（仅可与type="text"配合使用）

要点：

name和value是每个表单元素都有的属性值，给后台工作人员看
name是表单元素的名字，要求单选按钮和复选框要有一样的name值

2. <lable>标签（扩大可选中范围）

3. 表单外框

<fieldset> ... </fieldset>定义围绕表单中元素的边框
<legend> ... </legend>legend元素为fieldset元素定义标题

<fieldset>

<legend>内容</legend>

<input ...>

</fieldset>

4.<select>下拉表单元素

要求：

<select>中至少包含一对<option>

在<option>中定义select=”selected”时，默认选择中该项

语法：

<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

</select>

5.textarea文本域元素

当用户输入内容较多时，使用<textarea>标签

cols=“每行中的字符数“，row=”显示的行数“，一般用CSS改变大小

语法：

<textarea row="数字" cols="数字">

文本内容

</textarea>

结构性标签

1.<section>标签

用于对网页的内容进行分区、分块，定义文档中的节

表示一段专题性的内容，必须会带有标题

更强调分块

当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签

语法：

<section>

<h1></h1>

<p></p>

</section>

2.<artical>标签

特殊的<section>标签

代表一个独立的、完整的相关内容快，可独立于页面其他内容使用

可以嵌套，内层的article对外层的article有隶属关系。

语法：

<article>

<header>

<h1></h1>

<h2></h2>

<p></p>

</header>

<p></p>

</article>

3.nav标签

代表页面的一个部分，是一个可以作为页面导航的链接组

特殊的<section>标签，更强调独立性

语法：

<nav>

<ulr>

<li><a href="#"> </a></li>

</ul>

</nav>

4.aside标签

用来装载非正文的内容，被视为页面里面的一个单独部分

可以被包含在article标签内作为主要内容的附属信息

也可以在article标签外，作为页面或站点全局的附属信息部分

语法：

<article>

<header>

<h1></h1>

<h2></h2>

<p></p>

<aside>附属信息部分</aside>

</header>

</article>

定义文档的页眉，通常是一些引导和导航信息

也可以写在网页内容里面

通常至少包含一个标题标签，还可以包括<hgroup>标签等

语法：

<header>

<h1></h1>

<h2></h2>

</header>

定义section或document的页脚，包含了与页面、文章或是部分内瓤有关的信息

语法：

<footer> </footer>

分组标签

1.figure标签和figcaption标签

figure标签用于定义独立的流内容，例如图像、图表等，一般指一个单独的单元

figcaption标签用于为figure标签组添加标题，一个figure标签最多允许放一个figcaption标签，应放在figure标签的第一个或者最后一个子标签的位置

2.hgroup标签

可以将标题或子标题进行分组，通常与标题标签组合使用，一个内容快中的标题可以通过hgroup标签组成一组

3.dialog标签

主要用于人与人之间的对话，还包括dt和dd两个组合标签，dt表示说话者，dd表示说话者说的内容，常常同时使用

语法：

<dialog>

<dt>戒哥</dt>

<dd>今天你吸猫了吗？？？！</dd>

<dt>我</dt>

<dd>吸了啊[理直气壮]！</dd>

<dt>戒哥</dt>

<dd>我对你很失望！！！</dd>

</dialog>

HTML. Web programming

Overview

HTML basic format

Common tags

1. Title tag <h1>--<h6>

2. Paragraph tag <p>

3. Horizontal line tag <hr>

4. Newline tag <br/>

5. Text formatting tags

6. <div> and <span> tags (for layout)

Nesting of divs

7. Image tags and paths

Image tag <img> (insert an image into a web page)

Image path representation

8. Hyperlink tag <a>

Link Syntax

link classification

9. Annotate labels

Special characters

10. <em> tag

Label Advanced

1. Form tab

1.1 Grammar

1.2 Header cell label

1.3 Table attributes (generally use CSS)

1.4 Table structure tags

1.5 merge cells

2. List label

2.1 Unordered list (heavy)

2.2 Ordered list (serial number will be added automatically)

2.3 Custom list

3. Form label (usually appears on the registration page)

3.1 Form field (area containing form elements)

3.2 Form elements

结构性标签

1.<section>标签

2.<artical>标签

3.nav标签

4.aside标签

5.header标签

6.footer标签

分组标签

1.figure标签和figcaption标签

2.hgroup标签

3.dialog标签

おすすめ