Basic knowledge of HTML+CSS

Basic knowledge of HTML+CSS

1, HTML overview

  • HTML: hypertext markup language, which is actually a language used to develop web pages;
  • CSS: cascading style sheet, which can be used to render web pages, beautify web pages and make web pages.

1. Introduction to HTML

HTML: hypertext markup language

  • Hypertext: over text and hypertext;
    HTML can contain not only text, but also pictures, audio, video and other files in various formats;
  • Tags: labels and elements refer to a group of contents enclosed in angle brackets, such as: < div >, < img >, < H1 >, < / H1 >, < / div >, etc.
  • In fact, it is a language used to develop web pages.

About HTML:

  1. html development of Web documents, usually in htm,. html is the suffix.
  2. HTML developed web documents can be opened and displayed through the browser (the browser is an HTML parser).
  3. HTML is essentially a document.

2. HTML structure

<!-- Used to declare that the current document is a html Formatted web pages,And the version is html5.0 edition -->
<!DOCTYPE html>
<!-- Root label,be-all HTML The content should be placed inside the root tag -->
<html>
	<!-- Head part,It is used to store the basic attribute information of web pages(For example, web page title,Web page coding,Introduced css style,js Documents, etc) -->
	<head>
		<!-- Notifies the browser of the encoding currently in use,If not specified, garbled code may occur -->
		<meta charset="utf-8">
		<!-- Specifies the title of the page label -->
		<title>My first test page</title>
	</head>
	<!-- Body part,Used to store the visual content of web pages -->
	<body>
		<!-- h1,h2 And so on to specify the title of the web page content -->
		<h1 align="center" style="color: crimson;">To wear a crown,Must bear its weight<br>One who wants to wear the crown,bears the crown</h1>
		<h2 align="center" style="color: crimson;">To wear a crown,Must bear its weight<br>One who wants to wear the crown,bears the crown</h2>
		<h3 align="center" style="color: crimson;">To wear a crown,Must bear its weight<br>One who wants to wear the crown,bears the crown</h3>
		<h4 align="center" style="color: crimson;">To wear a crown,Must bear its weight<br>One who wants to wear the crown,bears the crown</h4>
		<h5 align="center" style="color: crimson;">To wear a crown,Must bear its weight<br>One who wants to wear the crown,bears the crown</h5>
		<h6 align="center" style="color: crimson;">To wear a crown,Must bear its weight<br>One who wants to wear the crown,bears the crown</h6>
		<!-- Generate a horizontal line with a border of 5 px Solid red -->
		<hr style="border: 5px solid red;"/>
		
	</body>
</html>

3. HTML syntax

  1. Label, tag, element: a group of contents enclosed by angle brackets (< >), such as < head >, < body >, < H1 >, < img >, < a >. The tag consists of a start tag () and an end tag (). Other contents can be included between the start tag and the end tag.
  2. Self closing label: some labels do not need to write content inside, and can usually be written as self closing labels. For example:
    < br / >, < HR / >, < input / >, < img / >, < meta / >, etc
  3. Properties:
    <input type="text" id="username" class="xxx"/>
    • The attribute must be declared on the label and cannot exist independently
    • Multiple attributes can be declared, and multiple attributes can be separated by spaces
    • The value of an attribute can be enclosed in double or single quotes
      <input type="text" id="username"/>
      <input type='text' id='username'/>
      <img src="xx" id="xx" name="xx"/>
      <img src='xx' id='xx' name='xx'/>
  4. Note format: <-- xxxx -->
    Annotation functions: (1) add explanation for the code; (2) Comment some code that does not need to be executed temporarily.
  5. Spaces and line breaks
    In html, multiple consecutive white space characters (space / newline / tab) will be parsed into a space to display.
    • If you want to implement multiple spaces, you can use & nbsp; Or & emsp;
    • If you want to wrap a line, you can use the < br / > tag;

2, HTML tags

1. Image label

img tag can insert an image into a web page, for example:
​ <img src="img/meinv01.jpg" width="40%"/>
Where, src attribute: used to point to the path of the picture (relative path, network path)

  • Width attribute: Specifies the width of the picture
  • Height attribute: Specifies the height of the picture

About path questions:

  1. It is not recommended to write an absolute path with a drive letter, because this path is likely to be wrong in a future release environment, so it is not recommended
    <img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
  2. It is recommended to write relative paths
    . /: indicates the location of the current file. It can be omitted
    ... /: indicates the upper level directory of the directory where the current file is located

<img src="./img/meinv01.jpg" width="40%"/>
Indicates to find img directory in the directory where the current file (html) is located, and meinv01.0 in the directory JPG file

2. Hyperlink label

A tag is used to implement a hyperlink in a web page
After clicking the hyperlink, it will jump to another location (web page, picture, download address, etc.), for example:
​ <a href=" http://www.baidu.com " target="_ Blank "> Baidu, you don't know</a>

  • The href attribute is used to point to the url to jump to
  • target attribute, which is used to point to how to open the hyperlink
    • self: open hyperlink in current window
    • blank: open hyperlink in new window

3. Table label

  • Table: used to define a table that can contain tr tags

  • tr(table row): used to define rows in a table. td/th can be included in tr

  • td/th(table data cell): used to define cells in a table

  • th(table header cell): used to define the cells in the header, where the text will be bold and centered by default.

  • colspan property: sets the number of columns that the cell spans, for example:
    <td colspan="2">11</td>

  • colspan = "2": set the current cell to span two columns
    rowspan property: sets the number of rows the cell spans vertically
    <td rowspan="2">21</td>
    rowspan = "2": set the current cell to span two rows vertically

4. Form label

4.1. Function of form

Function of form: used to send data to the server
There are two ways to send data to the server:
1) use the table to send data to the one-way server
There are often form item labels (user name, password, nickname, email, verification code, etc.) in the form. You can enter data in the form item, and then submit the form to submit the entered data to the corresponding server.
2) you can also send data to the server using hyperlinks
​ http://www.baidu.com?user= Zhang San & age = 20 & like = basketball
After the URL address, you can splice a question mark. Before the question mark is the URL address. After the question mark, you can splice parameters. Parameters include parameter names (user, age, like) and parameter values (Zhang San, 20, basketball). Multiple parameters are separated by &. After entering the address and accessing the server, you can bring the parameters spliced behind the address to the server

4.2.form label

<form action="http://www.baidu.com" method="GET|POST"> ... </form>
action attribute: used to specify the address to which the data in the form will be submitted.
For example, the action attribute points to the website of Baidu server, which means that all data in the form will be submitted to Baidu server.
Method attribute: Specifies the submission method. The common submission methods are GET and post (the difference will be discussed later)
If you do not specify a method, the default is GET submission.

5. Form item label

1) Text input box (user name / verification code / email / nickname)
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>
2) Password input box (password / confirm password)
<input type="password" name="psw"/>
<input type="password" name="repsw"/>

3) Radio box (gender / choice)
< input type = "radio" name = "gender" / > male
< input type = "radio" name = "gender" / > female
4) Multiple choice box / check box (multiple choice option / position / hobby)
< input type = "checkbox" name = "like" / > basketball

5) Drop down box (province / city / city selection)
< select name = "Prov" > < option > Beijing < / option > < option > Shanghai < / option > < option > Guangdong < / option ></ select>

6) Multiline text input box
<textarea name="desc"></textarea>

7) Button / submit button
< input type = "value" / < input type = "value" >
Ordinary buttons do not have functions. You can add functions to the buttons through js (for example, change a picture after clicking)

< input type = "submit" value = "submit / login / register" / >
The submit button is used to submit the form and submit the data in the form to the server pointed to by the action attribute.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Welcome to register</title>
		<!-- style The inside of the label is used for writing css Style css notes -->
		<style>
			*{/* Select all elements */
				font-family: "Microsoft YaHei ";
			}
			table,td,th{/* Set border */
				border: 2px solid red;
				border-collapse: collapse;
			}
			table{/* Set position */
				/* Set background */
				background-color: lightgray;
				/* Set left and right outer margin adaptation (always equal) */
				margin-left: auto;
				margin-right: auto;
			}
			td,th{
				/* Set the inner margin (the distance between the element border and the content) */
				padding: 5px;
			}
			h1{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>Welcome to register</h1>
		<table>
			<tr>
				<td>user name:</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>password:</td>
				<td><input type="password"/></td>
			</tr>
			<tr>
				<td>Gender:</td>
				<td>
					<input type="radio" value="boy" checked name="sex"/>male
					<input type="radio" value="girl" name="sex"/>female
				</td>
			</tr>
			<tr>
				<td>hobby:</td>
				<td>
					<input type="checkbox" value="basketball" name="hobby" />Basketball
					<input type="checkbox" value="basketball" checked name="hobby" />Football
					<input type="checkbox" value="basketball" name="hobby" />Volleyball
				</td>
			</tr>
			<tr>
				<td>city</td>
				<td>
					<select>
						<option value="beijing">Beijing</option>
						<option value="guangzhou" selected="">Guangzhou</option>
						<option value="shenzhen">Shenzhen</option>
						<option value="shanghai">Shanghai</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Self description:</td>
				<td>
					<textarea name="desc" cols="30" rows="5" placeholder="Please enter a description...">
					</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
						<input type="submit" value="Submit" />
				</td>
			</tr>
		</table>
	</body>
</html>

6. Form details

1. Why is the data in the form not submitted when the form is submitted?

For the form item label in the form, as long as the data needs to be submitted to the server, the name attribute must be added to the form item; If there is no name attribute on the form item label, the item will be ignored when the form is submitted. For example:

<input type="text" name="username"/>
<input type="password" name="psw"/>

2. How to make only one radio box selected?

Multiple radio boxes must have the same name attribute value. If multiple radio boxes have the same name attribute value, it means that it is the content of a group. Only one radio box in a group can be selected!

<td>Gender:</td>
<td>
    <input type="radio" name="gender"/>male
    <input type="radio" name="gender"/>female
</td>

3. Why is the value submitted after selecting an item in the radio box and check box on?

Because the radio box and check box can only be selected, different from the user name and password input box, you can enter content.

Therefore, we need to set the submitted value for the radio box or check box through the value attribute (if not set, the default value is on), for example:

<input type="radio" name="gender" value="male"/>male
<input type="radio" name="gender" value="female"/>female

4. How to set a radio box or check box to select an item by default?

You can add a checked="checked" attribute on the radio box or check box label to make the current radio box or check box selected by default. For example:

<input type="radio" checked="checked" name="gender" value="male"/>male
<input type="radio" name="gender" value="female"/>female
<!-- Hobby check box/Checkbox  -->
<input type="checkbox" name="like" value="basketball"/>Basketball
<input type="checkbox" checked="checked" name="like" value="football"/>Football
<input type="checkbox" name="like" value="volleyball"/>Volleyball

5. How to set a drop-down box to select an item by default?

Add a selected="selected" attribute on the option tag to make the current option selected by default, for example:

<select name="city">
    <option>Beijing</option>
    <option>Shanghai</option>
    <option selected="selected">Guangzhou</option>
    <option>Shenzhen</option>
</select>

6. What is the function of the value attribute on the option option in the drop-down box?

<select name="city">
	<option value="beijing">Beijing</option>
	<option value="shanghai">Shanghai</option>
	<option selected="selected">Guangzhou</option>
	<option>Shenzhen</option>
</select>

If an option is selected and the value attribute is added to the option, the value of the value attribute will be submitted when the form is submitted.

If an option is selected and the value attribute is not added to the option, the contents in the tag will be submitted when the form is submitted

7. Other labels

Before html5, most audio and video were played through plug-ins (such as flash). html5 stipulated a standard method to include audio and video through audio and video elements.

1. audio tag (html5)

The audio tag can play sound files or audio streams, for example:

<audio controls src="audio/Desert camel _Zhanzhan and Luoluo.mp3"></audio>

The attributes of audio tag:

src Property: used to specify the audio to play URL address
controls="controls": Display playback controls for users, such as playback, pause and volume control
autoplay="autoplay": The audio will play as soon as it is ready (auto play)
loop="loop": When the audio is finished playing, start playing again (loop playing)
width,height: Set the width and height of the audio player

The content inserted between < audio > and < / audio > is for browsers that do not support audio elements

<audio controls src="audio/Desert camel _Zhanzhan and Luoluo.mp3">
	If you can see this content, your browser does not support this label!
</audio>

2. video tag (html5)

Video tag can play video stream. At present, it supports three video formats: MPEG4, Ogg and WebM.

<video controls src="video/Xiao Fang_Li Ronghao version.mp4"  width="50%"></video>

The properties of the video tag:

src Property: used to specify the of the video to play URL address
controls="controls": Display playback controls for users, such as playback, pause and volume control
autoplay="autoplay": Play the video as soon as it's ready (auto play)
loop="loop": When the video is finished playing, start playing again (loop playing)
width,height: Set the width and height of the video player

The content inserted between < video > and < / video > is displayed by browsers that do not support audio elements (examples are not given here)

3. div, span, p Tags

div, span and p elements are very common but commonly used labels. They are container labels that can be used to wrap other elements or text. Adding styles to these elements can set styles for the contents contained in them.

Div, p: block element. By default, one row is exclusive. Width and height can be set (div element is usually used for layout, while p element is usually used to define paragraphs)

Span: inline elements. Inline elements can be displayed on the same line, and width and height cannot be set (span is used to contain text or combine inline elements to facilitate uniform style setting)

4. header and footer tags (html5)

The < header > tag defines the header (Introduction) of the document or the header of the page

The < footer > tag defines the footer of a document or section. The footer usually contains the author of the document, copyright information, terms of use links, contact information, and so on.

Tags: Java html

Posted by nemesis1931 on Sun, 08 May 2022 11:21:53 +0300