HTML and CSS

Front-end development also known as Weibo front-end development

Front-end development is to provide the interface solution for B/s architecture software.

HTML is the initials of hypertext mark-up Language, meaning Hypertext Markup Language, hyper-text refers to hyperlinks, tags refers to the label is a language used to make Web pages, the language is composed of a label, Files made in this language are saved as a text file with a file extension of HTML or HTM.

Shortcut keys for creating HTML documents quickly:!+tab key, or Html:5+tab key

Block element Label: default occupies one row

Inline element Tags: default can be arranged in one row

ctrl+/notes

1, H1~h6: Title tag, block element tag, including default style

2. P: Paragraph tag, block element tag, with default style

3, character entities: If you want to display a space on the page, "<" > ", can not be written directly in the code, need to write their character entity, Space:&nbsp;   Less than number:&lt; Greater than sign &gt;

4, Div: Universal block element tag, generally do nested use, no default style

5, A: Link tags, belong to the inline element tag, through the Herf property set the link address, the A tag package img tag can be linked with the image, the default link address written "#"

6, IMG: Picture label, is an inline element tag, set the image address via the SRC attribute, set the picture text description by Alt

7. Span: Universal inline element tag, typically used in style settings

注释：<!-- 这是一段注释  -->

换行：<p>这是一行文字，<br>这是一行文字</p>

CSS is defined by: Selector {property: Value; property: Value; property: Value;}

div{     width:100px;     height:100px;     background:gold; }

Three ways to introduce CSS into a page:

1, inline: Through the label's style property, the style is written in the label

2, in-line: through the style tag, write styles in the head tag

3, outer chain: Create a CSS file externally, the page through the link tag introduced

CSS three selector:

1, Tag selector: The same as the name of the label, will select all the labels

2, class selector: Name Any, before the name needs to add ".", the label is referenced by the class property

3. Hierarchy selector: Match tags through hierarchical relationships

CSS layout common style properties:

• The width of the Set Element (label), such as: width:100px;

• Height sets the altitude of the Element (label), such as: height:200px;

• Background set element background color or background image, such as: Background:gold; Set element background color to Gold

• Border sets the border around the element, such as: border:1px solid black; Setting elements around the border is a solid black line with a width of 1 pixels

The above can also be divided into four sides of the wording, respectively, set four sides:

• Border-top set the top border, such as: border-top:10px solid red;

• Border-left set the left border, such as: border-left:10px solid blue;

• Border-right set the right border, such as: border-right:10px solid green;

• Border-bottom set the bottom border, such as: border-bottom:10px solid pink;

• padding sets the distance that the element contains content and the border of the element, also called the padding, such as padding:20px;padding is set 4 sides at the same time, can also be split into four sides like border, respectively: Padding-top, Padding-left, Padding-right, Padding-bottom.

• Margin sets the distance between the element and the outside, also called the margin, such as Margin:20px;margin is set 4 sides at the same time, can also be split into four sides like border: Margin-top, Margin-left, Margin-right , Margin-bottom.

• Float set element float, float can let block elements arranged in one row, floating into left floating: float:left; Right float: float:right;

Text common Style Property one:

• Color sets the colour of the text, such as: color:red;

• Font-size set the size of the text, such as: font-size:12px;

• Font-family set the font of the text, such as: font-family: ' Microsoft black '; In order to avoid the incompatibility of Chinese characters, it is generally written as follows: font-family: ' Microsoft Yahei ';

• Font-weight set the text whether bold, such as: Font-weight:bold; Set bold Font-weight:normal setting not bold

• Line-height set the line height of the text, such as: line-height:24px; Indicates the text height plus the text up and down the spacing is 24px, that is, each row occupies a height of 24px

• Text-decoration set the underline of the text, such as: Text-decoration:none; Remove the text underline

• Text-align Set Text horizontal alignment, such as Text-align:center set text to center horizontally

• Text-indent set the first line of text indentation, such as: text-indent:24px; Set the first line of text indent 24px

样式注释  ：  /* 设置头部的样式 */

HTML and CSS