Home > Developer > Web Develop
1. Web Overview
1. What is Web
Web is an application on the Internet-Web page
Typical program:
1. C/S
C:client (client)
S:server (server)
2, b/S
B:browser (browser)
S:server (server)
2. The composition & running process of the web
Consists of server, browser and communication protocol
Server: Handling user requests and responses
Browser: To send a request to the server in place of a user (users Agent)
Communication protocols: Specification of how data is packaged and delivered-HTTP
Http:hyper Text Transfer protocal
Super Text Transfer Protocol
3. Web server
2. Use
Used to accept a user's request and give a response
Storing information for the web
Basic safety Features
2. Product
1. APACHE
2. TOMCAT
3. IIS
3. Technology
1. JSP
2. php
3. ASP.
4. ASP
5. Python WEB (Django,flask)
4. WEB Browser
2. Use
1, in place of users to send requests to the server
2. As a response data interpretation and execution engine
2. Mainstream Browser products
1. Microsoft Internet Explorer (IE)
2. Google Chrome
3. Mozilla Firefox
4. Apple Safari
5. Opera Opera
浏览器靠内核处理数据，内核包含两部分： 1、内容排版引擎 - HTML，CSS 2、脚本解释引擎 - JS 3、浏览器技术 HTML，CSS，JavaScript
2. HTML overview
1. HTML Introduction and Basic grammar
1. What is HTML
Html:hyper Text Markup Language
Super Text Markup Language
A language for writing web pages
Hypertext: Text with special features is hypertext
Normal text A: normal character a
Hypertext A: A feature that represents a hyperlink
普通文本 b : 普通字符 b 超文本 b : 表示文字加粗的功能 标记：超文本的组成形式 普通文本：a 超文本a ：<a></a> 超文本b ：<b></b> 语言：语言有自己的语法规范2、HTML在计算机中的表现 所有的网页(HTML)文件在计算机中都是以 .html 或 .htm 作为结尾的文件 开发工具：所有的文本编辑软件都是开发工具 1、记事本 2、Editplus，Sublime 3、Dreamweaver,... ... 运行工具：浏览器 推荐使用 Google Chrome
3, HTML basic Syntax (emphasis)
1, syntax of the tag
1, what is a tag
in a Web page, the symbol used to represent the function is called "tag/label/element"
2, Syntax
All tags must be used in <>.
The marks are divided into two tags and a single mark
1, double Mark
has the display start and end of display
< tags > content </tag;
Ex:
1, <a>...</a>
2, <b >...</b>
3, <p>...</p>
4, <div>...</div>
Note: Double mark, with start, must have end, otherwise error
2, The single Mark
has only one token, which can either represent the start or end
< tag > or < tag/>
Ex:
1, <br> or <br/>: line break
2, 3, , or : An image
2, nested
in a pair of tags, and then nested other tags, equivalent to a nested
Ex: Bold Hyperlinks
<a><b> Baidu </b></a>
<b><a> Baidu </a></b>
for good readability, the nested content is as exclusive as possible, and add indentation
<a>
<b></b>
</a>
Exercise:
1, write a pair of HTML tags
2, nest a pair of head tags inside HTML tags
3, HTML tags nested inside a pair of body tags
4. HTML Document Structure
1. Document type declaration
The first marker that appears at the top of the page
Role: Tell the browser which version of HTML to use
<!doctype html>--Using the HTML5 version
<! DOCTYPE html>--effect ditto
2. HTML page
Under Document type declarations, use a pair of HTML root tags to make up
Include two pairs of elements in HTML
1. Represents the head of a Web page
2. <body></body>
Represents the body of a Web page
练习：(3~5分钟) 1、创建 01-page.html 网页文件 2、搭建网页结构 1、增加文档类型声明 2、增加 html 根标记 3、在 html 中增加头部和主体 4、增加适当的注释3、
5, text-related tags
1, special characters in HTML
1, denotes a space
2, < represents <
3, > Express;
4, ©?
5, ¥ = ￥
2, Text style tag
1, Effect
Modify text representation in Web pages
2, Tags
1, <i></i>: Italic display text
2, <u></u >: underline displays Text
3, <s></s>: Strikethrough text
4, <b></b>: Bold display text
5, <sup></sup>: Display text in the form above
6, <sub></sub>: Display text in the following form
Exercise: (3 minutes)
This is a text with bold, italic, Strikethrough, underline,
superscript and subscript
Use the corresponding markup to reflect the corresponding effect of the above text features: The group tag can be displayed with other tags and text in a row 3, heading marker 1, the role of different text size and bold way to display text 2, Grammar 6, List
1, composition of the list
1, type of List
1, ordered list-<ol></ol>
2, unordered list-<ul></ul>
2, list item
< Li></li>
ex: <ol> <li> content 1</li> <li> content 2</li> </o L> Exercise: 1, create a Web page 03-list.html 2, create a series in the body, four list items show the name of the four major Classics 3, create an unordered list in body, four list items show the names of four kings respectively 2. Properties of the list 1, <ol> properties: Type value: 1, 1: Arranged numerically, default 2, a: Arrange by uppercase English characters 3, a: Press lowercase English character arrangement 4, I: Arranged in uppercase Roman numerals 5, I: arranged in lowercase roman numerals 2, <ul> attribute: Type value: 1, disc : solid dot, default value 2, Circle: Hollow Dot 3, Square: solid Block 4, none: No Identity 3 is displayed, the list is nested in a list item, and a list appears <ul& Gt <li> <ol> <li></li> </ol> </li> < ;li></li> </ul> Exercises: 1. Water Margin A. Simon Qing B. Pan Jinlian c. fornicated 2. Kingdoms I. LU BU II marten cicada iii. Guan Yu
7. Images and hyperlinks
1. URL
Uniform Resource Locator
A Uniform Resource locator that identifies the location of a resource in a network, commonly known as a path
1. URL classification
1. Absolute path
Use absolute paths when accessing resources on the Internet
Ex
Http://www.baidu.com
Http://www.baidu.com/img/bd_logo.png
2. Relative path
Find the path to the resource file from the location where the current file is located
1, the same directory
2, under the sub-directory
3. Under the parent directory
3. Root relative path
Find a resource file from the root directory where the Web site resides
注意： 1、url中不能出现中文 2、url是严格区分大小写2、图像 1、标记 2、属性 1、src 指定要显示的图片的URL 2、width 宽度，以px为单位的数值(允许省略px) 3、height 高度，以px为单位的数值(允许省略px) 注意： 如果宽度 和 高度只设定一个属性值的花，那么另外一个属性值也跟着等比缩放
Web Full Stack---HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
