Web basic introduction

Web basic introduction

1 web 就是 world wide web 的缩写，称之为全球广域网，俗称 WWW。 

2 我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。 

3 网站我们可以认是由多个网页组合在一起而形成一种服务。 

4 web 前端就是来负责一个网站当中前台网页里的内容。 

5 网页就是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含 文字 图片超链接 声音 视频......（ 网页本质就是一个 html 文件 ） 

1.3 Basic introduction to HTML

1. Definition

HyperText markup language Hypertext markup language, which means that it can express not only

Just text.

2. History of HTML language development

1．在互联网最初的时候是没有 HTML 的，我们只能通过网络传输最简单的文字内容 

2．随着用户的要求越来越多，同时也是我们的技术的不断发展，就出了一种可以表达文字 

内容之外的语言---HTML1.0 

3．在最初的时候就是 html1.0----xhtml1.0( 过渡 )----xhtml2.0( 放弃 )------html5 

1.4 HTML page skeleton

1 The web page is written by us in HTML language.

2 Because we need to use HTML language to write web pages, we must have the corresponding writing code work.

( Hbuilder )

3 In the process of writing web pages using HTML language, we will find that some structures must exist by default.

This structure is called the web page (html) skeleton

note:

1. DocType html : 向浏览器声明当前的文档是 Html 类型。 
2. html ： 它是网页当中最大的一个标签，我们称之为根标签 
3. head : 网页头的部，它里面的内容是写给浏览器看的。 
4. meta : 如果有 charset 那就表示在设置当前网页的显示编码 
5. title： 网页的标题，它里面的内容会在浏览器的标签页上显示 
6. body： 网页主体，它里面的内容会显示在浏览器的空白区域内。 

1.5Hbuilder tool usage

(abridgement)

1.6 Basic introduction to HTML syntax and tags

1. HTML tags

The so-called tags are some "words" artificially defined by the inventor of the HTML language, which are equivalent to our Chinese

The word.

2. Grammar

Grammar is used to define the rules for how these "words" should be parsed or written.

3. Common tags and basic syntax in HTML tags

1. We artificially divide HTML tags into single tags and double tags

<标签名称></标签名称> 

<标签名 /> 

2. Common tags:

（1）标题标签 :在 html 当中人为定义了六种标题分别 h1-h6,它们都是双标签。在一个网页当中，我们只允许出现一个 h1。 

（2）段落标签：p 双标签 

（3）换行标签： br 单标签 

（4）空格： & nbsp;

3. Label writing grammar

(1) Multiple tags are allowed to be nested within each other in HTML, but cross nesting is not allowed.

1.7 Picture tags

1. Grammar

<img src="地址" />

note:

1. img 是一个单标签，它的作用是可以在网页当中插入图片。 
2. src 是 img 标签的属性，它里面的值称之为属性值，具体用来表示想要加载的图片存 在哪里。 
3. 标签的身上可以有属性，属性名与标签名之间用空格隔开。 
4. 属性值与属性名之间用 单等号 连接 
5. 一个标签的身上可以有多个属性，之间都用空格隔开。 

2. Common attributes of pictures

1. Src 设置图片所在位置 
2. Alt 当图片加载失败的时候会显示它里面的文字 
3. Width/height 分别用来设置图片宽和 高，如果只设置了宽度或者高度，那么另外一边会自动缩放。 
4. Title 当鼠标悬停在图片上的时候会显示它里面的文字

1.8 Link label

1. Grammar

<a href="目标地址"> 内容 </a> 

Second, the role

Can be realized on the current page to the new pageJumpOperation

Three, attributes

1. Target 这个属性可以设置新页面在哪个窗口打开，当值为_blank 的时候可以在新窗口打开
2. Href 的属性值设置为 # 的时候，可以设置为空链接，它的作用就是当用户点的时候不会发生跳转。 

1.9 Path

The so-called path can be regarded as the path "traveled" in the program code to find a specific resource. E.g:

​		C:/Users/Administrator/Desktop/_book\img\2.png. 

One, absolute path

绝 对 路 径 一 般 是 以 盘 符 为 起 点 来 进 行 查 找 ， 或 者 就 是 一 个 绝 对 URL 地 址 。 
https://www.baidu.com/img/bd_logo1.png ，
但是在实际的工作中，我们不建议大家使用绝对路径。 

Second, the relative path

The relative path refers to searching for resources relative to a certain known file as the starting point.

1.10 Relative path usage

The path is a universal existence, we should take the example of finding a picture to explain the use of the path. In actual work, the frequency used by the relative path is the highest. We artificially divide relative paths into three types: same-level paths, lower-level paths, and upper-level paths. (The meaning of looking for pictures as an example is that we want to insert a picture outside of the HTML file into an HTML web page, and at the same time use a relative path, so the relative starting point here is the HTML web page)

1. Same level path: The same level means that the HTML page and the target image are in the same level directory. For the use of the same level path,

We only need to write the name of the target image in src.

2. Subordinate path: Subordinate refers to the image in the subordinate directory of the html file. At this time we need to use a / to

Go down to search through. ( Bottom )

3. Upper-level path: When the picture is in the upper-level directory of the html file, we need to use .../ to go back up and search. this

Note:

1. 上述的路径规则虽然都是以查找图片为例，但是总结的规律适用于其它类型资源的 

查找。 

2. / 表示向下级查找，可以无限级穿透。 
3. ../ 表示向上级返回，同样可以无限级返回。 

1.11 Basic introduction to forms

A form is a structure used to collect user information on the Internet. A tag is defined in advance in HTML to accomplish this. The label name is form, it is a double label, we call it a form field.

<form action="" method=""></form>

Note:

1. form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之 为表单域。 
2. form 默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备 了很多的表单标签。这些标签里 使用最多的一个叫 input 。 
3. action 属性值表示将当前表单中的数据提交到哪些。 
4. method 属性值表示以 什么样试来提交当前表单中的数据。最常见的就是 get,post 。其中 get 方式就是指将数据在 URL 中进行提交，这种方式是明文。所以相对不安全。而 POST 方式就是指将数据写在 HTTP 请求的 请求体当中( )。 

1.12 Common form elements

The From tag is only responsible for defining the specific form as a whole. If you want to collect user data in it, you must have some more features.

A module that allows users to input and fill in. At this time, HTML defines many form tags to allow users to complete input

Into. The most common form tag is Input, because the tag name is called input, so the HTML is set to pass

The type attribute is used to distinguish.

1. 文本输入框： <input type="text" /> 
2. 密码输入框: <input type="password " /> 
3. 提交按钮： <input type="submit" /> 
4. 单选框： <input type="radio" /> 
5. 复选框: <input type="checkbox" /> 
6. 文本域: <textarea rows="行数" cols="列数"></textarea> 
7. 下拉框： <select><option value="">选项 1</option> </select>
8. 重置按钮： <input type="reset" /> 
9. 普通按钮: <input type="button" value="按钮" /> 

1.13 Pay attention to details of form elements

1. name attribute: The form collects data through different form elements. In this process, many form element names are called input. If these data are directly submitted to the background, there will be a problem that these data cannot be distinguished. In order to distinguish which number belongs to which form item. We artificially set the name attribute on Input. In this way, after the data reaches the backend, it will become the following format:

   username="syy" 
   
    pwd="123"
   
    gender="男".... 
   

2. value: Its function is to define the default display content of some form elements (text input box, submit button, reset

Button, normal button)

3. checked: This is an attribute and its attribute value is equal to the attribute name. Used to set some of the radio and check boxes to be selected by default.
4. selected: This is also an attribute whose attribute value is equal to the attribute name, add it to the drop-down option to realize that an option is defaulted

Accept selected.

1.14 Basic Introduction to CSS

One, web standards

​ The so-called web standard refers to the requirements for a system to standardize the writing of web pages. It is formulated by the W3C organization.

It requires the separation of the structure, style, and behavior of the web page.

Second, noun explanation

1．结构：就是通过 HTML 标签搭建的网页的结构。 

2．样式：就是通过 CSS 对当前的网页结构进行修饰和美化 

3．行为：通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。 

1.15 Basic Use of CSS

1. Definition

​ Css is called cascading style sheet, cascading style sheet, and style sheet in China. Its function is to modify the current webpage

HTML elements.

2. Basic steps

1. CSS and HTML can be regarded as two independent languages. If you want to use CSS to manipulate HTML, then this

You need to establish a relationship between the two first.

2. At this time, a tag called style (it's a double tag) is prepared in the HTML.

Time can be used to write our CSS code. The common storage location can be under the title tag in the head tag.

3. Find the element we want to manipulate through the CSS selector and style it (written in the style tag)

1.16 Experience CSS

1. Common CSS element attributes:

width defines the element width unit is px,

height defines the height,

background-color Set the background color.

2. The fixed syntax of CSS code writing:

   Selector {CSS code}

3. It is recommended that you write the CSS styles in separate lines during the development phase, and end each line with ==;==.

1.17 CSS selector

1. Definition

​ The so-called CSS selector is a fixed syntax that has been defined in CSS to select certain elements. The role of it

Just select the element we want to style.

Second, the classification of CSS selectors

There are many types of selectors in CSS. We artificially divide them into two categories: simple selectors + composite selectors.

Three, simple selector:

1. Tag name selector: select elements through specific HTML tag names. 【It will call all the names in the current webpage

All tags of the word are selected]

2. Class name selector: select elements by tag class name
3. Id selector: select elements by id name.

1.18 Class name selector

1. Why do you need a class name selector

​ A complete web page requires a lot of tags to be combined together for writing and implementation, because the types of HTML tags are limited,

Therefore, a tag with the same name may appear multiple times in a web page. If you want to set these labels with the same name

Set different styles. Then there is no way to directly use the tag name selector. In this case we can use

Class name selector.

Second, the basic steps of using the class name selector

1. Define the structure of the HTML page, and then set the class attribute on the element we want to select.
2. Set the same class attribute value (class name) on the elements we want to select together
3. At this point, we only need to call our class name according to the fixed syntax in the style tag: .class name

1.19Id selector

1. Why do I need an id selector

If we only want to select one element from a bunch of elements, then we can use the id selector. This

An id is the same as a person’s ID number.

Two, Id selector use

1. Set an id attribute on the element we want to select.
2. Set a value for this id attribute, I call it id name.
3. Calling in style through a fixed syntax: #id 名{}
4. Note: It is required that the id value with the same name cannot appear in a webpage [Although it is effective, it cannot be done]

1.20 Summary of simple selectors

1. By default, the tag name selector and class name selector can select multiple elements at once, and the id name selector can only select one at a time.

Elements.

2. A tag can have both a class name and an id name, and the two attribute values ​​can be the same.
3. Multiple class names are allowed to be set on a label at the same time, and multiple class names are required to be separated by spaces.
4. Regarding the id selector, the same id name can only appear once in a page.

1.21 id name and class name naming rules

1. The name cannot be a pure number or start with a number (but we often end with a number)
2. The name cannot be in Chinese
3. Name package special characters (-_)
4. Be aware of the name when naming it

1.22 Element display type

​ There are many elements defined in the HTML itself, and these elements will exist when they are displayed on the web page by default.

The default state, for example, some elements have no effect on the width and height attributes by default, and some elements have their own line by default

display. This phenomenon is called the element display type. In order to remember, we artificially divide the element display type into three types: block element, inline element, and inline block element.

1. Block element: When there are multiple block elements at the same time, each block element will be displayed on its own line, and by default

Its width and height attributes can work.

2. Inline elements: When there are multiple inline elements at the same time, these elements will be displayed on one line.

No less than automatic line folding. By default its width and height properties do not work

3. Inline block elements: When multiple inline block elements are stored at the same time, these elements will be displayed in one line, by default

Its width and height attributes work.

4. Note: There is no need to memorize which elements are inline, which are blocks, and which are inline blocks.

1.23 Layout label supplement

1. div tag, it is a double tag (DIV+CSS) defined in HTML. We artificially think it is a body

The label with the largest product.

2. The span tag, it is also a double tag, mainly used to put text, we artificially think that this is very small.
3. The title cannot be wrapped in the paragraph tag because the browser cannot parse it normally.

1.24 Element display type conversion

In our web page layout process, we often encounter some "special modules". For this kind of module, our previous one

Some common tags will display "semantic" when they are used and some do not correspond, so we can use the corresponding tags

Forced type conversion, so that it can be displayed as the design draft. There is a display attribute in CSS

You can set different values ​​to complete the element type conversion.

1. Turn into block elements: display:block;
2. Convert to inline block: display:inline-block
3. Converted to inline elements: display:inline; none

1.25 simple selector weight

​ Weight: We can understand that different types of CSS selectors have different control abilities when setting the style of the same element.
For simple selectors: id selector "class name selector" tag name selector

1.26 CSS features

1. In the case of the same weight, the CSS style written after the same element will overwrite the CSS style written first. 【Coverage】

2. The definition of CSS has the characteristic of inheritance, and the child element will inherit some styles of the parent element [inheritance]

   (1) Not all CSS properties can be inherited.

   (2) Not all types of elements inherit the style of ancestor elements (inheritance generally occurs on block elements)

   (3) Inheritance means that child elements can use some styles of ancestor elements

3. The CSS control ability of the same selector on the same element has strengths and weaknesses. 【priority】

1.27 Compound selector

1. Why do you need a composite selector

​ In the actual net production process, many structural hierarchies are often deeply nested, and this structural module

Many people use the same label name. So at this time we can use the compound selector to combine these simple choices

The device is combined. This makes it easy for us to select elements.

2. Common compound selectors:

1. Descendant selector: This type of selector starts with a certain element, uses it as an ancestor, and then continues downward

Go through the search to select the descendant elements below it.

Starting element descendant element...{set style}

Note:

1. 后代选择器当中的每个部分都可以采用任意的简单选择器代替。 
2. 不同的部分之间要用空格隔开。 
3. ...... 就表示可以不停的向下层查找。 

2. Parallel selectors: Connect multiple selectors with commas to indicate that these elements are selected at the same time and then set the same style. The selector of each part can be composed of any type of selector.

1.28 Summary of selector weights

1. Simple selector: id name "class name" element name
2. Composite selector: What you need to understand is that a composite selector is composed of multiple other types of selectors.

For comparison, we artificially define a value for each simple selector, namely: Id(100) class(10)

ele(1), these three values ​​are also called weight values, after having them, only the weight values ​​appearing in the current selector

Perform the addition and the final result is the weight of the selector. The greater the value, the greater the weight

3. Remember that the weight ratio is the comparison of the control power of different selectors on the same element (to distinguish the influence of inheritance)

1.29 CSS file storage location

CSS code can be placed in many places by us. There are three customary ways of writing: inline CSS, external link CSS, and inline CSS.

1. Embedded CSS refers to writing CSS code in html pages.
2. External CSS refers to writing the CSS code in an external independent CSS file.
3. Inline CSS refers to writing CSS code on specific HTML tags.

Note:

1. According to the principle of the browser rendering page, we choose to write the CSS code in the front position of the HTML file.
2. When using external CSS writing method, there is no need to write style tags in the external independent CSS file, and at the same time

A CSS file needs to be introduced into a specific HTML file through the link tag. Don't omit the rel attribute

[]

3. For the above three CSS file storage locations, the in-line CSS has the highest weight, but the external link and internal

There is no such thing as who must be greater than who is embedded (weight), and its control ability depends entirely on the selector power used by each

weight.

4. If you want to directly increase the power of a certain style to the highest, we only need to set at the end of the CSS code

Set

P{ color:pink!important; } 

1.9 Audio tag

<audio autoplay controls loop> 
降级的说明性文字 
<source src="格式 1 路径" /> 
....... 
</audio> 

Note:

1. audio is a double tag used to define a sound resource module.
2. autoplay is used to set auto play.
3. controls call the playback control of the current device.
4. loop Set the current audio loop to play.
5. The text in audio is not displayed by default, and the text is displayed only when the current browser does not support this tag

word.

1.30 Common text styles

1. Line height: line-height, when we set the size of the line height to the height of the current element, a single line of text can be

The effect of centering the current element in the vertical direction.

2. Horizontal alignment: text-align: left | center | right, which respectively indicate the horizontal alignment of the text in the current box.
3. Font size: font-size, the unit is px, under normal circumstances the browser will have a minimum display font.
4. Font weight: font-weight, you can set a keyword or a value (100-900). The keyword has normal for normal, and bold for bold.
5. Font name: font-family, the commonly used ones are "Microsoft Yahei" and "Heidi"
6. Font color: color, you can set color words, or hexadecimal numbers.

1.31 Text shadow

1. Typeface abbreviation

Font: font name of text thickness/line height;

Font: bold 20px/200px'Microsoft Yahei';

2. Text shadow in CSS3

Text-shadow: x y r color;

Text-shadow: 0px 0px 0px red;

Note:

1. x represents the offset of the shadow in the horizontal direction, which can be set to a negative value. Positive and negative do not indicate size, only direction.

Horizontal to the right is positive, to the left is negative, the unit is px

2. y represents the offset of the shadow in the vertical direction, vertical upward is negative, downward is positive
3. r represents the blur degree of the shadow, the larger the value, the more blurred the shadow, the unit is px
4. color represents the color of the shadow
5. C3 allows a paragraph of text to have multiple layers of shadows, separated by commas, and in each layer, use spaces between different parameters

Grid separated.

1.32 Transition attributes

​ The role of the transition attribute is to produce a process between the default style of the element and the final style change. Added a new property called transition in C3

Transition: all 1s linear 0s; 

Note:

1. 第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用 all 表示所有的属 

性都过渡。 

2. 第二个参数的作用设置过渡需要时长，单位是 s 不要省略 
3. 第三个参数的作用设置过渡的动画形式，linear 表示匀速 
4. 第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为 0 ，单位也不能 

省。 

5. :hover 选择某个元素被鼠标移上时的状态。 
6. transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别 

就是第二种做法在鼠标离开的时候不会在有过渡变化。