Home > Developer > Web Develop
Purpose of study
1, can change the front-end template
2, decorate your own page
3, the front-end interaction of multiple technologies
4. Ability to manipulate webpage elements
5, can communicate with front-end developers
Development tools:
Pycharm/webstorm
EditPlus (for Beginners)
Sublime (various modules, recommended)
Visual Studio/vscode
Chrome (Google browser)
1. Configure HTML templates
Open sub,crtl+alt+h to generate an HTML template or file->new file->html
<!DOCTYPE HTML> <!--HTML standard H5 Standard, can only appear in the first sentence first line--<HTML> <!--page start -up <Head> <!--to set the properties of a Web page-- <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <!--page property values -- <Metaname= "Keywords"content=""> <!--keywords like baidu google search keywords-- <Metaname= "description"content=""> <!---describes what is displayed after you search for a keyword- <title>Title</title> <!--tab title --- <styletype= "Text/css"> *{margin:0;padding:0;} </style> <!--'/' indicates strict and non-strict mode -- <Linkhref=""rel= "stylesheet"></Head> <!--head -to-<Body> <!--body, content -- </Body></HTML> <!--end page -
2. HTML Tags:
tags are enclosed by angle brackets <> keywords, usually paired up
2.1HTML specification
1) by the closed label must be closed
2) all labels are lowercase
3) Development of Fit, note code indentation (usually four spaces or two spaces)
4) Special symbol specification use, and end with a semicolon
2.2 Defining the title
<Body> <H1>Python</H1><!--bold order about large font size, a page generally will only appear once H1, can be used by our search engine keyword matching--<H2>Java</H2> <!--also has a line break function-- <H3>C++</H3> <h4>C#</h4> <h5>Go</h5> <h6>Vb</h6>the Python 3 Program Development Guide first describes the 8 key elements that make up the Python language, followed by a detailed description of the data types, control structures and functions, modules, file processing, debugging, processes and threads, networks, databases, regular expressions, GUI program design and so on, and introduces some other related topics. The book is an example of the main line, each chapter is accompanied by exercises to facilitate the reader to better understand and grasp the content of the story. </Body>
2.3 Paragraph Labels
<p></p>, front and back elements will be wrapped.
<Body> <H1>Python</H1>the Python 3 Program Development Guide first describes the 8 key elements that make up the Python language, followed by a detailed description of the data types, control structures and functions, modules, file processing, debugging, processes and threads, networks, databases, regular expressions, GUI program design and so on, and introduces some other related topics. The book is an example of the main line, each chapter is accompanied by exercises to facilitate the reader to better understand and grasp the content of the story. <P>Mark Summerfield,qtrac is a company owner and an independent training specialist, consultant, technical editor and author with expertise in Python, C + +, QT, and PYQT. The books written by Mark Summerfield include "Rapid GUI programming with Python" and "qt:the definitive Guideto PyQt Programming" (Addison-wesley , 2008), and Jasmin Blanchette co-authored the C++gui Programming with Qt 4 (addison-wesley,2006). As Trolltech's document manager, Mark founded and is responsible for editing Trolltech's technical magazine, "Qt Quarterly". </P></Body>
Effect:
2.4 Special Symbols < > Amp ©
<H2>Special symbol use</H2> <P>&Lt;h1&Gt Python<; H1></P> <P>Less than------&Lt</P> <P>Greater than------&Gt</P> <P>&------&Apm</P> <P>Copyright Number----©<P> <P>Space------ ------</P> <P>Fork------×</P> <P>Change<BR/>Yes</P>
Effect:
2.5 tags
Sub Editor ctrl+alt+enter keywords such as p to add labels to the selection
Alt+shift+w
Sub Editor ctrl+d multiple selection, after the ESC key can be selected, undo the keyword
Google Chrome Ctrl+r Refresh
b Bold
P Paragraph
Strong with bold difference is SEO search engine can be optimized
A <a href= "" >this is a tag </a> add jump
<href= "http:\\www.baidu.com">This is a label </a > #跳转到百度
<a href= "#" >this is a label </a> #跳转到当前页面
<ahref="#"name= "Top">This is top</a> <!--the location of the jump -<ahref= "#top">This is a label</a> <!--jump to the above -
<id= "P"> <!-- other types of tag jumps, can only be taken once-- <href= "#p">This is a label </A >
2.6 pic
1) BMP Bitmap, occupy a large space, rich in color.
2) jpeg,jpg lossy compression, this format is generally used in the page
3) GIF motion diagram
4) PNG supports alpha channel, transparent, translucent, lossless compression supported
<src= "" alt=""/>
SRC: Picture path
Width: widths, per pixel
Height: High
ALT: Search engine keywords
2.7 List
1) unordered list
Disc: Round black Solid
Square: Square Black solid
Circle: Hollow Circle
<ul type= "Square" ><Li>111</Li> <Li>222</Li> <Li>333</Li> <Li>444</Li> </ul>
2) ordered list
<ol>
Li{[email protected]}*3 #sub中从5开始创建创建3列
</ol>
I: lowercase roman character serial number
I: Uppercase Roman character serial number
A: Capital Letter Serial Number
A: Small Letter serial Number
<ol type= "I"> <Li>5</Li> <Li>6</Li> <Li>7</Li> </ol>
3) Define a list
< DL > < DT > Title 1</dt> <dd> Data definition </dd> </dl>
HTML Base 1 (Environment preparation, labeling)
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
