Record after the first network department meeting
This is the record after the first meeting of the Internet Department of Tongda College. I am Zhao Zhichao, a freshman of the 20th class. The first meeting is still more inclined to our Internet novices, and everything I talked about is relatively simple.
At the beginning, we learned some basic knowledge of HTML and taught some basic tags
such as meta tags.
Meta tags are mainly used to set some metadata in web pages. Meta data is not a charset for users to specify the character set of the web page. For example: the name of the data specified by UTF-8 name. The content of the data specified by content keywords represents the keywords of the website. Multiple keywords can be specified at the same time. The keywords are used and separated. The description is used to specify the description of the website. The text displayed on the hyperlink as a search result is the name of the page.
The semantic HTML tag
"body> element defines the body of the HTML document. This element has a start tag "body> and an end tag "/body>.
Title tag: "h1> ~ "h6> There are a total of six levels of headings from "h1>~"h6> in decreasing importance, "h1> is the most important, "h6> is the least important, "h1> is the second most important in the web page In the "title> tag, under normal circumstances, there will only be one "h1> in a page". Under normal circumstances, the title tag will only use "h1> "h3>, "h4> "h6> rarely use the
"p> tag to represent the page A paragraph in
"strong> means emphasis, important content!
"Br>
"Header> indicates the head of the web page
"main> indicates the main part of the web page (only one main in a page)
"footer> indicates the bottom of the web page
"nav> indicates the navigation in the web page
"aside> and other content related to the main body (Sidebar)
"article> means an independent article
"section> means an independent section, section is used when none of the above tags can be expressed,
"div> has no semantics, it is used to express a section, currently speaking div It is also our main layout element
"span> inline element, without any semantics, generally used to select text on the web page
List
There are three kinds of html lists:
1. Ordered list
2. Unordered list
3. Definition list
Ordered list, use ol tag to create
Use li to indicate list item
Unordered list, use ul tag to create unordered list
Use li Represents a list item
Definition list, use the dl tag to create a definition list
Use dt to indicate the content of the definition
Use dd to explain the content The
lists can be nested in each other
Hyperlinks and relative paths
Hyperlinks allow us to jump from one page to other pages, or other locations on the current page.
Use a tag to define hyperlink attributes: href specifies the target path of the jump-the value can be the address of an external website-or Write the address of an internal page. The hyperlink is also an inline element. Any element except itself can be nested in the a tag.
When we need to jump to a page inside the server, we generally use relative paths. For example, at the beginning of ./.../ ./ can be omitted, if you don’t write ./ also don’t write.../, it is equivalent to write ./ ./ indicates the directory where the current file is located.../ indicates the directory where the current file is located The
target attribute of the upper-level directory is used to specify the location where the hyperlink is opened. Optional values: self default value opens the hyperlink in the current page blank opens the hyperlink in a new or
in the development, you can use # as a hyperlink in development The booth symbol of the path is used (anchor jump), you can directly set the href attribute of the hyperlink to #, so that the page will not jump after clicking the hyperlink, but you can jump to the page by going to the top of the current page To specify the position, just set the href attribute # id attribute value of the target element id attribute (the only one that is not repeated)
- Each tag can add an id attribute
- The id attribute is the unique identifier of the element, and no duplicate id attributes can appear in the same page
Pictures and audio and video
The image tag is used to introduce an external image to the current page.
Use the img tag to introduce an external image. The img tag is a self-closing tag.
img is a replacement element (between a block and an inline element, which has the characteristics of two elements). : The
src attribute specifies the path of the external image (the path rules are the same as the hyperlink).
alt The description of the image, which is not displayed by default. Some browsers will display the
width of the image when the image cannot be loaded (unit is Pixel)
height The height of the picture
-if only one of the width and height is modified, the other will scale the picture's format proportionally:
jpeg(jpg)-Supports
rich colors, does not support transparency effects, and does not support moving pictures
-General Used to display the photo
gif
-supports few colors, supports simple and transparent, supports animated images-single-color pictures, animated
png
-supports rich colors, supports complex transparency, does not support animated images
-rich colors, complex transparent pictures ( Born specifically for web pages)
-webp
-This format is a newly launched format specially used by Google to represent pictures in web pages
-It has all the advantages of other image formats, and the files are particularly small
-Disadvantages: compatibility Bad
base64
-use base64 encoding for pictures, so you can convert pictures into characters, and import pictures in the form of characters
-generally some pictures that need to be loaded with the webpage will use base64. Need to follow: the
same effect, use small of
The effect is different. The
audio tag with good effect is used to introduce an external audio file into the page. It supports three audio formats. When Ogg, MP3, Wav
audio and video files are imported, the user is not allowed to control the playback stop attribute by default. :
Src value: url The URL of the audio to be played.
controls value: controls whether to allow the user to control playback (showing controls to the user, such as a play button)
autoplay value: autoplay whether the audio file is automatically played-if autoplay is set, the music will automatically play when the page is opened
loop value: loop whether the music is played in a loop
Preload value: preload audio is loaded when the page loads and is ready to be played. If you use "autoplay", ignore this attribute.
Use the video tag to introduce a video to the web page-the usage is basically the same as audio, with the addition of width and height
Forms and tables
"Form action="" method="">
"input/>
"/form>
HTML5 has several new form input types. These new features provide better input control and verification.
The value under the type attribute:
text is used for text and characters without any restrictions.
password is used to enter the password.
email is used for the input field that should contain the e-mail address. When submitting the form, the value of the email field is automatically verified.
url is used for input fields that should contain URL addresses. When the form is submitted, the value of the url field is automatically verified.
number is used for input fields that should contain numeric values.
You can also set the limits on the accepted numbers: "input type="number" name="points" min="1" max="10" />
step: specify the legal number interval
range used to contain certain The input field for numeric values in the range. The range type is displayed as a slider. The attributes are the same as number
Date pickers (date, month, week, time, datetime, datetime-local)
HTML5 has multiple new input types for selecting dates and times:
date-select day, month, year
month-select month, year
week -Select week and year
time-Select time (hours and minutes)
datetime-Select time, day, month, year (UTC time)
datetime-local-select time, day, month, year (local time)
search is used to search the field
color is used to select the color
submit Define the submit button (submit form)
generally use "button> tag
"button type="submit"> "/ button> Submit form data
"button type="reset">"/button> Reset (clear form data)
form elements: height and width
placeholder provide a hint to describe the expected value of the input field.
Use the "table> tag to create a table.
For example: "table border="1">
"!-- Table header -->
"th>Heading"/th>
"th>Another Heading"/th>
"!-- table Row --> "tr>
"!-- Unit of the table -->
"td>row 1, cell 1"/td>
"td>row 1, cell 2"/td>
"/tr>
"tr>
"td >row 2, cell 1 "/td>
"td>row 2, cell 2 "/td>
"/tr>
"/table>
"table>
"Th> defines the header of the table.
"Tr> defines the rows of the table.
"Td> Define table cells.
"Thead> defines the header of the table
"tbody> defines the main body of the table.
"Tfoot> defines the footer of the table.
"Col> defines the attributes used for table columns.
"Colgroup> defines the group of table columns.
Rough record, pending follow-up study.
2020/11/12