HTML and CSS Advanced

Relative address and Absolute address

To introduce or link to an external file on a webpage, you need to define the address of the file, and the common introduction or linking of external files includes the following:

<!-- 引入外部图片   --><!-- 链接到另外一个网页   --><a href="002.html">链接到网页2</a><!-- 外链一个css文件   --><link rel="stylesheet" type="text/css" href="css/main.css" /><!-- 外链一个js文件   --><script type="text/javascript" src="js/jquery.js"></script>

These addresses are divided into relative addresses and absolute addresses:

Relative address
Relative to the reference file itself to locate the referenced file address, the above example is relative address, relative address definition techniques:

• "./" means that the current file is in the same directory, for example: "./pic.jpg" represents a picture of pic.jpg in the current directory, which can be omitted when used.

• “ .. /"indicates the top-level directory in the directory where the current file is located, such as:". /images/pic.jpg "represents a picture of pic.jpg in the Images folder under the current directory under the previous level directory.

Absolute Address
Relative to the location of the disk to locate the address of the file, such as: Absolute address in the overall file migration because the disk and the top-level directory changes to find files, The relative address does not have this problem.

List label

Lists are generally used in the layout of the news headlines list and the article title List and menu, it is semantic, the label structure is as follows:

<ul>    <li>列表标题一</li>    <li>列表标题二</li>    <li>列表标题三</li></ul>

The contents of the list are usually linked, click the link to the news or the specific content of the article, so the specific structure is generally like this:

<ul>    <li><a href="#">列表标题一</a></li>    <li><a href="#">列表标题二</a></li>    <li><a href="#">列表标题三</a></li></ul>

List-related styles
List-style the small dots of the list items, such as: List-style:none

HTML form

Forms are used to collect different types of user input, and forms are made up of different types of labels, and the relevant tags and attributes are as follows:

1. <form> label defines the overall form area

• The Action property defines the form data submission address
• The method property defines how the form is submitted, typically "get" and "post" methods

2. <label> tags define text callouts for form elements

3. <input> tags define common form elements

• Type property
  • Type= "Text" to define a single line text input box
  • Type= "password" Define password input box
  • Type= "Radio" defined Radio box
  • type= "checkbox" Definition check box
  • type= "file" definition to upload files
  • type= "submit" Definition submit button
  • Type= "Reset" defines the reset button
  • Type= "button" defines a normal button
• The Value property defines the values of the form elements
• The Name property defines the names of the form elements, which are the key names when the data is submitted

4, <textarea> tags define multi-line text input box

5. <select> label definition drop-down form element

6. <option> tags with <select> tags, define options in the drop-down form element

Registration Form Instances:

<form action= "http://www ..." method= "get" ><p><label> Name: </label><input type= "Text" name= "Username"/></p><p><label> Password: </label><input type= "password" name= "password"/> </p><p><label> Sex: </label><input type= "Radio" name= "Gender" value= "0"/> Male <input Type= "Radio" name= "Gender" value= "1"/> Women </p><p><label> Hobbies: </label><input type= " CheckBox "Name=" like "value=" sing "/> Singing <input type=" checkbox "Name=" like "value=" Run "/> Run <input type=" CheckBox "Name=" like "value=" swiming "/> Swimming </p><p><label> photos: </label><input type=" file "Name=" person_pic "></p><p><label> personal Description: </label><textarea name=" About "></ textarea></p><p><label> Birthplace: </label><select name= "Site" > <option value= "0" > Beijing </option> <option value= "1" > Shanghai </option> <option value= "2" > Guangzhou </Option> <option value= "3" > Shenzhen </option></select></p><p><input type= "Submit" name = "" value= "submit" ><input type= "reset" name= "" value= "reset ></p></form>

Forms common styles, properties, and examples

Outline set the input box to get focus, whether to display the highlighted box, generally set to No, such as: Outline:none;
Placeholder sets the default prompt text for the input entry box.

CSS Box model

Box Model explanation
Elements appear in a page as a block, like a box, a CSS box model uses real-world boxes to make metaphors that help us set the style of the elements. The box model is as follows:

The elements are called boxes, and the corresponding styles are: The width of the box, the height of the box (height), the box's border (border), the spacing between the contents of the box and the border (padding), the spacing between the box and the box (margin).

Set width height

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

Set border
Setting a border on one side, such as the top border, can be set as follows:

border-top:10px solid red;

where 10px represents the thickness of the wireframe, solid represents linearity.

Set the other three sides of the same method as above, the above ' top ' replaced with ' left ' is set to the right side, and the bottom is set to the side.

Four sides if set, you can combine the settings of four edges into one sentence:

border:10px solid red;

Set Inner spacing padding

Set the inner spacing of the four sides of the box, which can be set as follows:

padding-top：20px;     /* 设置顶部内间距20px */ padding-left:30px;     /* 设置左边内间距30px */ padding-right:40px;    /* 设置右边内间距40px */ padding-bottom:50px;   /* 设置底部内间距50px */

The above settings can be abbreviated as follows:

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  四个方向的内边距值。 */

Padding can also be followed by 3 values, 2 values, and a value, which are set separately as follows:

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */

Set the outer spacing margin
The margin is set up in the same way as the padding, and the ' padding ' in the above setting is replaced with ' margin ', which is the margin setting method.

The true size of the box
When the width and height values of the box are fixed, if the box increases border and padding, the overall size of the box becomes larger, so the true size of the box is:

• Box width = width + padding around + border
• Box height = height + padding up/down + border

Block element Centering Tips
Block elements if you want to set the relative page horizontally centered, you can use the Auto keyword in the margin value, "Auto" can only be used for the left and right margin settings, not for the upper and lower:

.box{      width:300px;      height:300px;      background:gold;      margin-left:0px;      margin-top:0px;      margin-left:auto;      margin-right:auto;    }

Abbreviated as follows:

.box{     width:300px;     height:300px;     background:gold;     margin:0px auto;    }

CSS Display features

The display property is used to set the type of element and the hidden, commonly used properties are:
1. The none element is hidden and does not occupy a position
2. Inline elements are displayed in the inline element
3. Block elements are displayed as blocks

CSS element Overflow

When the dimensions of a child element exceed the dimensions of the parent element, you need to set how the parent element displays the overflow child elements, set by the overflow property.

Settings for overflow:
1, visible default value. The content is not trimmed and is rendered outside the element box.
2, hidden content will be trimmed, and the rest of the content is not visible.
3. Scroll content will be trimmed, but the browser will display a scroll bar to view the rest of the content.
4, Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.

HTML and CSS Advanced