Test basis 2

One 、web Front end three core technologies

HTML： Responsible for the structure of web pages
CSS： Responsible for the style of the web page 、 beautify
JS： Responsible for the behavior of web pages

Two 、 Tool use

Hbuilder Set the font , appearance ：

3、 ... and 、html brief introduction

Chinese definition ： Hypertext tags （ label 、 Elements ） Language ;
Create a new one html Webpage ：
1、 Prepare a folder for writing code ！！！
2、 Drag the folder to the left of the tool with the left mouse button – Project manager
3、 Click the name of the folder with the left mouse button （ You must have a green background to be selected ）
4、 Right mouse button – newly build –html file
5、 In the pop-up dialog , Change the name before the file extension （.html Represents the expanded name of the current file 、 Suffix name ： Describe the current file type ）
6、 Click Finish to create a new html file

Four 、html Skeleton label

Skeleton label ： Those labels generated by default when creating a new one ;
meta Tags can set the character set of web pages （utf-8 International Code ）
title Tag set the title of the web page
body Tag sets the main content of the web page

5、 ... and 、 Article title tag

h1 To h6 Divided into six levels , Reduce the effect in turn , Each title has a row of space ;
Be careful ： You can't make your own labels , Because it doesn't work properly ;

6、 ... and 、 Spaces and carriage returns

Spaces and carriage returns are not accurate for direct use in code ;
You must use code to implement ：
A space ：  
A new line 、 A carriage return ：

Be careful ：html Code for historical reasons , Resulting in loose grammar ; When testing the details , Subject to the final running effect of the browser ;

7、 ... and 、p Tags and tag semantics

p Is responsible for putting paragraphs ;
semantic ： Use reasonable labels where appropriate , It's called satisfying tag semantics ; Can be higher in the search engine rankings ！ More hits , Bring more benefits ！

8、 ... and 、 code annotation

The reminder text that the programmer gives his code , The browser will not directly display ;
Shortcut key ： ctrl+？ Press again to cancel the comment
The test should pay attention to ： Before the project goes online , Ask programmers to delete the contents of comments , The purpose is to speed up the loading of web pages
example ： <!-- The text here is realized as a comment ->

Nine 、 Text related labels

b and strong Can represent bold , The latter represents specially emphasized semantics ;
i and em Can achieve tilting , The latter represents a general emphasis on semantics ;
s and del Can achieve the delete line effect , The latter is about to replace the former

Ten 、img label

Insert picture label ;img
step ：
1、 Get the picture ready first , Copy to the current html File in the same level folder
2、src On behalf of the resource , The value after it should write the name of the image you want to load
3、width For width （ Lateral distance ）、height Stands for height （ Longitudinal distance ）; Be careful ： Width or height sets only one of these properties , The other one will zoom and display according to the scale of the original image ; If the width and height are not set , The picture will be displayed according to its original size
4、title=“ Prompt text when hovering the mouse ”
5、alt （1） When the picture is not loaded normally , Words will be seen by others （2） Web readers read this content to visually impaired users , Enhance user experience
example ：
<=img src=” The name of the image you want to load ” width=” Width ” height=” Height ” title=” Mouse over prompt text ” alt=” Prompt text when the picture is not loaded ; You can read it to a web reader ” />( There are many =)

11、 ... and 、 Hyperlink label

Hyperlinks ： Click to realize the jump of page content
Open the online website ：href The property value corresponding to the property should be set with http://
example ：<=a href=“http://www.baidu.com”> Click I can open Baidu

If you want to open local （ Your own computer ） The page of , Just put the target file and the current file in the same directory , stay href Property to write the name of the target file
example ：<=a href=“demo1.html”> Click on me to open the local page

New window opens link ： By default, all hyperlinks are opened in the current window , If you want to open in a new window , Need to add target attribute
<=a href=“http://www.baidu.com” target=“_blank”> Click I can open Baidu in a new window

Empty link ： I don't know where to jump after clicking , Use empty link placeholders , When you know the specific position to jump , Just come back and change
<=a href=“#”> Click on me to open the page
When testing work , If programmers are found using # To express the effect of returning to the top , Be sure to prompt the programmer , Use animation effect to realize , The user experience is better ！