当前位置：网站首页>C1 certification learning notes 3 -- Web Foundation

C1 certification learning notes 3 -- Web Foundation

2022-07-04 14:59:00 【Jiaxintang likes juice】

Reference resources C Training (csdn.net)

15 Semantic tags

The following table shows some common semantic tags

Elements	explain
`article`	Define independent external documents , Such as news contribution 、 Blog posts 、 Forum posts, etc
`aside`	It is generally used for the sidebar in the web page or the label box inside the article
`header`	The header area of the page , Usually includes websites logo、 Link navigation 、 Search box 、banner
`nav`	The navigation link area of the page
`main`	Define the main content of the document
`section`	Define the area of the document
`footer`	Footer of the document
`mark`	Mark 、 Highlight text
`ul`	Unordered list
`form`	establish HTML Forms
`button`	Define buttons
`i`	Used to represent other text that distinguishes ordinary text , Browsers usually display their contents in italics

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> label </title>
	</head>
	<body>
		<header>// The header area of the page 
			<nav>// Navigation links for pages 
				<a>// Hyperlinks 
					a
				</a>
			</nav>
		</header>
		<main>// The main content of the document 
			<aside>// Sidebar 
				a
			</aside>
			<section>// file 
				a
			</section>
			<article>// Define independent external documents 
				a
			</article>
		</main>
		<footer>// The footer 
			a
		</footer>
	</body>
</html>

exercises

1、 Now you need to set a button , Please fill in the semantic tag to complete the code fragment （ Just fill in one tag name ）

<_____> Am I !</_____>

answer ：button

2、 stay HTML Which semantic label is generally used in to represent the effect of italic text

3、 stay HTML Which semantic tag is generally used to represent head navigation in

nav

4、 stay HTML Which semantic tag is commonly used in to define unordered lists <______>?

5、 stay HTML Which semantic tag is generally used to define the form <_______>?

form

16 Form labels

1、`<form></form>` label

Used to create HTML Forms , Common properties are as follows ：

action： Specify when the form is submitted , Form data submission URL
method： Specified for sending form-data Of HTTP Method , Common attribute values are get、post

2、`<input />` Elements

<input /> Element is the most important form element , according to input Different elements type type , The form of expression is also different

type	describe
`text`	Plain text box , General default 20 Character width
`textarea`	Multi-line text box
`button`	General button
`radio`	Radio buttons
`checkbox`	Checkbox
`reset`	Form reset button
`submit`	Form submit button
`password`	Password input box , The password field is replaced by a dot or asterisk

3、`<label></label>` label

Used to input Labels provide labels

Click on label Text , The browser automatically turns the focus to the form control associated with the label

label Labeled for The attribute value should be associated with the id Same property value

4、`<select></select>` label

Used to create a drop-down list

select In the element <option></option> Tags are used to define the options of the list

5、`<button></button>` Elements

Used to define common buttons

exercises

1、 Now you want to realize that the input when submitting the form is not 3 Prompt when the number of digits Please enter three digits , Please complete the code snippet below

<form action="/example/html5/demo_form.asp">
	 Secret number ：<input type="text" name="country_code" pattern="[0-9]{3}"  ________=" Please enter three digits " />
	<input type="submit" />
</form>

answer ：title

title Can be used on any element , Move the mouse over the element , Will show title The content of , To achieve the effect of supplementary instructions or prompts .

pattern Property specifies the type used to validate the input field .

input Element usage title Property can be used when the input does not conform to the rule , Give a prompt to judge whether the input is correct. The prompt statement will only be displayed when the form is submitted

2、 Now there is a submit button in the form , Click to automatically submit the form request , Please complete the code fragment

<input type="________" value=" Submit ">

answer ：submit

3、 How to use it? input Tab creates a form reset button ？ Please fill in this code

<input type="________" value=" Reset ">

4、 How to use it? input Tag creates a password entry box ？ Please fill in this code

<input type="________" placeholder=" Please input a password ">

password

5、 Now we have the following HTML Code , When you click the submit button , Automatically submit user name and password to https://ac-api.csdn.net/login, Please complete the code fragment

<form  _______="https://ac-api.csdn.net/login" method="get">
    <input type="text" placeholder=" user name ">
    <input type="password" placeholder=" password ">
    <input type="submit" value=" Submit ">
</form>

17 Escape character

Escape characters can also be called character entities , For the same special character , have access to 【 The entity name 】 perhaps 【 Entity number 】 Express

Show	The entity name	Entity number	explain
Space	` `	` `	Half width non newline space , Equivalent to pressing the keyboard space Key generated spaces , Affected by font , Different fonts are consistent
Space	`&ensp;`	` `	Half space , Occupy 1/2 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
Space	`&emsp;`	` `	Full space , Occupy 1 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
<	`<`	`<`	Less than no.
>	`>`	`>`	More than no.
&	`&`	`&`	& Symbol
"	`"`	`"`	Double quotes
'	------	`'`	Single quotation marks
	`©`	`©`	Copyright symbols
	`™`	`™` or ``	Trademark symbols
	`®`	`®`	Registered trademark symbol
$	------	`$`	Dollar symbol
¥	`¥`	`¥`	RMB symbol
×	`×`	`×`	Multiplication sign
÷	`÷`	`÷`	devide

exercises

1、 stay HTML What entity name is used in the source code to represent the copyright symbol ？

2、 stay HTML What entity name is used in the source code to represent the trademark symbol

™

3、 stay HTML What entity name is used in the source code to represent the registered trademark symbol

4、 stay HTML What entity name is used in the source code to represent the greater than sign >

5、 stay HTML What entity name is used in the source code to represent the multiplication sign x

×

18Head head

1、`<title></title>`

Used to define the title of the document

The title will appear on the title bar or status bar of the browser window

When you add this page to your favorites or bookmarks list , This title is the default name of the page link

example ：<title>CSDN Competency certification center </title>

2、`<link />`

Used to define the relationship between documents and external resources , Most commonly used to link style sheets , It is also commonly used to add small icons to titles

<link /> It's an empty element , Include properties only , Can only exist in head part

attribute	Property value	describe
`href`	`URL`	Set the file path of the target link
`rel`	`stylesheet、icon、sidebar、prev` etc.	Specify the relationship between the current document and the linked document
`type`	`MIME_type`	Target connection document MIME type

3、`<style></style>`

Used to introduce... To documents CSS Style information , Include style sheets in style Between start and end tags

4、`<script></script>`

Used to add scripts to the page

Can be directly in script The start and end tags contain JavaScript Script )

It can also be done through script Of src Property to link external script files

5、`<meta />`

Provide meta information about the page , For example, the description and keywords of search engine and update frequency

name and content Properties are usually used together , Provide metadata to documents in the form of key value pairs , among name As the name of metadata ,content As the value of metadata

keywords and description These two names are used most frequently , Is one of the main ways of search engine optimization

name	value		describe
keywords	keyword		Describe Web page keywords , Separated by commas
description	Describe the content		A brief description of the main content of the website
author	author		Describe the website author
viewport	width	viewport Viewport width , Set to device-width Expressed as the width of the device	Definition viewport Initial size of , For mobile devices only
	height	viewport Viewport height
	maximum-scale	Maximum zoom
	initial-scale	Initial scaling
	minimum-scale	Minimum scale
	user-scalable	Whether to allow users to zoom

charset Property is used to specify the character encoding of the document . The usual value is UTF-8、ISO-8859-1 etc.

http-equiv Property can be used to simulate a HTTP Response head , And content Attribute matching , Common attribute values are as follows ：

content-type： Specify the character encoding of the document , Equate to charset Property to set the character encoding
default-style： set default CSS The name of the style sheet group
refresh： Set the time interval for automatic document refresh ,content Contains only one positive integer , Is the time interval for reloading the page （ second ）,content Contains a positive integer and 【url=XXX】 Format string , The positive integer is the time interval for redirecting to the specified link （ second ）

6、`<base />`

Used to set the default for all relative links in the page URL Or default target attribute

exercises

1、 Now it's necessary to html Introduce in the file JS Script files , The completion code

<script _____="./index.js"><script>

answer ：src

2、head Which tag is generally used in the introduction of external CSS Stylesheet file ？

<_____ rel="stylesheet" href="style.css" type="text/css" />

link

3、 The following code snippet exists , Require implementation definition SEO Key words of , Please complete the code fragment

<meta name="_______" content="CSDN,CSDN Competency certification center "/>

keywords

4、 In the mobile terminal device, you want to define the viewport width as the screen width , Please complete the code fragment

<head>
    <meta name="viewport" content="width=________, initial-scale=1.0">
</head>

device-width

5、 The character code of the document needs to be defined as utf-8, Please complete the code fragment

<head>
    <meta _______="UTF-8">
</head>

charset

原网站

版权声明
本文为[Jiaxintang likes juice]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202141236124063.html

当前位置：网站首页>C1 certification learning notes 3 -- Web Foundation

C1 certification learning notes 3 -- Web Foundation

15 Semantic tags

exercises

16 Form labels

1、`<form></form>` label

2、`<input />` Elements

3、`<label></label>` label

4、`<select></select>` label

5、`<button></button>` Elements

exercises

17 Escape character

exercises

18Head head

1、`<title></title>`

2、`<link />`

3、`<style></style>`

4、`<script></script>`

5、`<meta />`

6、`<base />`

exercises

边栏推荐

猜你喜欢

随机推荐

Show	The entity name	Entity number	explain
Space	` `	` `	Half width non newline space , Equivalent to pressing the keyboard space Key generated spaces , Affected by font , Different fonts are consistent
Space	`&ensp;`	` `	Half space , Occupy 1/2 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
Space	`&emsp;`	` `	Full space , Occupy 1 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
<	`<`	`<`	Less than no.
>	`>`	`>`	More than no.
&	`&`	`&`	& Symbol
"	`"`	`"`	Double quotes
'	------	`'`	Single quotation marks
	`©`	`©`	Copyright symbols
	`™`	`™` or ``	Trademark symbols
	`®`	`®`	Registered trademark symbol
$	------	`$`	Dollar symbol
¥	`¥`	`¥`	RMB symbol
×	`×`	`×`	Multiplication sign
÷	`÷`	`÷`	devide

Show	The entity name	Entity number	explain
Space	` `	` `	Half width non newline space , Equivalent to pressing the keyboard space Key generated spaces , Affected by font , Different fonts are consistent
Space	`&ensp;`	` `	Half space , Occupy 1/2 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
Space	`&emsp;`	` `	Full space , Occupy 1 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
<	`<`	`<`	Less than no.
>	`>`	`>`	More than no.
&	`&`	`&`	& Symbol
"	`"`	`"`	Double quotes
'	------	`'`	Single quotation marks
	`©`	`©`	Copyright symbols
	`™`	`™` or ``	Trademark symbols
	`®`	`®`	Registered trademark symbol
$	------	`$`	Dollar symbol
¥	`¥`	`¥`	RMB symbol
×	`×`	`×`	Multiplication sign
÷	`÷`	`÷`	devide

当前位置：网站首页>C1 certification learning notes 3 -- Web Foundation

C1 certification learning notes 3 -- Web Foundation

15 Semantic tags

exercises

16 Form labels

1、<form></form> label

2、<input /> Elements

3、<label></label> label

4、<select></select> label

5、<button></button> Elements

exercises

17 Escape character

exercises

18Head head

1、<title></title>

2、<link />

3、<style></style>

4、<script></script>

5、<meta />

6、<base />

exercises

边栏推荐

猜你喜欢

随机推荐

1、`<form></form>` label

2、`<input />` Elements

3、`<label></label>` label

4、`<select></select>` label

5、`<button></button>` Elements

1、`<title></title>`

2、`<link />`

3、`<style></style>`

4、`<script></script>`

5、`<meta />`

6、`<base />`

Show	The entity name	Entity number	explain
Space	` `	` `	Half width non newline space , Equivalent to pressing the keyboard space Key generated spaces , Affected by font , Different fonts are consistent
Space	`&ensp;`	` `	Half space , Occupy 1/2 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
Space	`&emsp;`	` `	Full space , Occupy 1 Chinese character width , Basically unaffected by Fonts , The space width of different fonts indicates the same
<	`<`	`<`	Less than no.
>	`>`	`>`	More than no.
&	`&`	`&`	& Symbol
"	`"`	`"`	Double quotes
'	------	`'`	Single quotation marks
	`©`	`©`	Copyright symbols
	`™`	`™` or ``	Trademark symbols
	`®`	`®`	Registered trademark symbol
$	------	`$`	Dollar symbol
¥	`¥`	`¥`	RMB symbol
×	`×`	`×`	Multiplication sign
÷	`÷`	`÷`	devide