1. What is a browser
A browser displays a web page
What does a web page consist of: html css javascript
Google browser, Firefox
ie uc 360 cheetah Baidu oupeng 2345 safari
[ps] Google browser, or Firefox. Can be used as code debugging Oh
Compare a web page to a beauty.
html is a plain woman without makeup and won't move.
css is the makeup for this plain woman. Make her look better.
javascript is to make this woman move!!! Dynamic effects.
Finally, we can make up the web page we all see, and we can see very good-looking
2. What is html
Hyper Text Markup Language
Not only text, but also pictures, audio, video, hypertext, beyond the scope of text.
A website can have not only text, but also pictures, audio, video, etc
html WYSIWYG, very simple
3. Two modes [ key ]
B/S:(Browser/Server)
Browser / Server Mode
You only need a browser and know the URL of the website. You can access websites through websites, such as QQ in web version, wechat in web version, Taobao in web version and JD in web version
C/S:(Client/Server)
Client / Server Mode
It's the software we installed. A 360, QQ is installed on the computer, or wechat is installed on the mobile phone
Install Taobao and install Jingdong. These software are called client server mode
You can think of a question:
For customers: B/S mode or C/S mode? C/S ok
For the procedure: B/S is good.
Because if it is C/S, the platform should be considered. For example, I am windows, IOS and Android, and the tablet is different from the mobile phone
Therefore, when developing, develop many versions of application software.
However, if B/S mode is adopted, only one version needs to be developed. Screen adaptation can be used during development
4. What is the basic unit of HTML?
A web page is composed of HTML, CSS and JavaScript
The most basic unit of html is tags.
Tag: the smallest basic unit of html.
Syntax format of label:
Bilateral Tags: < tag name attribute 1 = "attribute value 1" attribute 2 = "attribute value 2" > < / tag name >
Single label label: < label name attribute 1 = "attribute value 1" attribute 2 = "attribute value 2" / >
HBuilder is recommended for developing tools
https://www.w3school.com.cn/html/html_lists.asp
Official manual for learning html
<!-- notes --> <!-- Write a bilateral label html It's officially defined. You can't write it yourself A tag is a function --> <marquee direction="right">This is a simple bilateral label</marquee> <!-- b The function of the label is bold --> <b>This is another simple label</b> <!-- Single label --> <!-- hr The function of the label is a split line --> <hr />
Let's start to systematically study various labels. As we just said, a label is a function
4.1 structure label
Structure tag is the most basic fixed format of web pages
[note]: when writing web pages in the future, you should write structure tags
<html>
<!-- Shortcut key ctrl + ? notes -->
<!-- Outermost label html Bilateral label
stay html Two more labels are written in the label, one head((head) one body(Body)
among head Labels and body Label is html Child tags for
-->
<head>
<!-- Sets the encoding format of the current page charset It's a label meta Properties of utf-8 Is the attribute value -->
<meta charset="utf-8"/>
<!-- title Is a bilateral label that displays content in the browser's header -->
<title>use Baidu Search,You'll know</title>
</head>
<body>
What you see is what you get
</body>
<!-- 1.html All the labels are<>Enclosed labels are divided into unilateral labels and bilateral labels -->
<!-- 2.html It is case insensitive, but lower case is generally recommended -->
<!-- 3.The label must remember the function -->
<!-- 4.Tags can have attributes. Generally, the attribute values of tags are enclosed in double quotation marks. Note that there is no space around the equal sign -->
<!-- 5.Tags can be nested. When I write nested tags, I use indentation to make the code highly readable -->
</html>
4.2 typesetting label
1. Line feed label br unilateral label
2. Split line label hr single side label
3. Paragraph label p bilateral label
<!-- The structure labels are all written -->
<html>
<head>
<meta charset="utf-8">
<title>Typesetting label</title>
</head>
<body>
<!-- br The label is a unilateral label, and its function is line feed -->
Three thousand harem beauties<br/>
From then on, the king did not come early
<!-- hr Label unilateral label, the function is to print a split line -->
<hr/>
<!-- p The label is a bilateral label, which has the special effect of paragraphs. It becomes a paragraph separately, and there is space between paragraphs-->
<p>"A strong youth makes a strong country,Youth independence means national independence... "Students from Qingyun campus of No. 28 middle school in Nanchang read" Young China theory "enthusiastically at Mei ruao's former residence,The school carries out civilized practice activities in the new era with the theme of patriotic education</p>
<p>"A strong youth makes a strong country,Youth independence means national independence... "Students from Qingyun campus of No. 28 middle school in Nanchang read" Young China theory "enthusiastically at Mei ruao's former residence,The school carries out civilized practice activities in the new era with the theme of patriotic education</p>
<p>"A strong youth makes a strong country,Youth independence means national independence... "Students from Qingyun campus of No. 28 middle school in Nanchang read" Young China theory "enthusiastically at Mei ruao's former residence,The school carries out civilized practice activities in the new era with the theme of patriotic education</p>
</body>
</html>
4.3 text labels
Title label: h1-h6 bilateral label
Text label: font bilateral label
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text label</title>
</head>
<body>
<!-- Title label h1~h6 Gradually smaller is a few levels of labels word file-->
<h1>Roast kidney</h1>
<h2>Pot-stewed Pig Feet</h2>
<h3>Stew wild mushrooms with small pheasants and lie on the board after eating</h3>
<h4>Roast pheasant</h4>
<h5>Roast Camel</h5>
<h6>Roasted Whole Lamb</h6>
<!-- Even if you write a wrong tag and find that there is no error, it just has no effect. The fault tolerance rate of the tag is quite strong, but you should also write the correct tag -->
<h7>And zajian</h7><br/>
There is no old friend when leaving Yangguan in the West
<!-- Tags can be added with attributes!!! -->
<!-- color This property sets the property value of the color, which is the representation of the English color
size This property sets the font size to 1~7
face This attribute sets the font style, such as Kaiti, Songti, Microsoft YaHei, etc
-->
<font color="tomato" size="5" face="Regular script">There is no old friend when leaving Yangguan in the West</font>
<!-- Labels can be nested -->
<h1><font color="red">Have meat for lunch today</font></h1>
<h1 >Jump up and chisel you to death</h1>
<!-- Want to write duplicate code h2*6 Press tab key -->
<div></div>
<div></div>
<div></div>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
</body>
</html>
4.3 list labels
1. Unordered list
ul and li tags are used at the same time, where li tag is a sub tag of ul tag
<ul> </ul>
2. Ordered list
ol and li tags are used at the same time, where li tag is a sub tag of ol tag
3. User defined list [hardly used]
dl tag and dd are used at the same time. dd is a sub tag of dl
dt is also a sub tag of dl, but dt is the title and dd is the content
<div> <ul type="circle"> <li>tea with milk <ol type="1"> <li>Caramel Macchiato</li> <li>Church Pearl</li> <li>Milk tea three brothers</li> </ol></li> <li>Coffee <ol type="I"> <li>Silky Latte</li> <li>North American coffee</li> </ol> </li> <li>ice cream <ol type="A"> <li>Oreo taste</li> <li>Strawberry flavor</li> <li>Mango Flavor</li> </ol></li> </ul> <dl> <li>I am a custom list</li> <li>Ha ha Da</li> </dl> </div>
4.4 block labels and line labels [important]
It is called meaningless label, but it is very useful!!!
Because after learning css and js, we can use them together
div bilateral label, separate
span double side labels are in a separate line
footer
header
<div> I'm a piece of label 1 </div> <div> I'm a piece of label 2 </div> <div> I'm a piece of label 3 </div> <span>I am line label 1</span> <span>I am line label 2</span> <span>I am line label 3</span>
4.5 picture labels
You can put pictures in a website. Do you know what good picture websites are? Can you recommend them to me
img unilateral tags display pictures in web pages
There are some properties:
src: the attribute value is the address of the picture (it can be relative address, absolute address and network address!)
The src attribute is particularly important and involves the resources of the picture
Width: sets the width of the picture in pixels px
Height: sets the height of the picture in pixels px
When only one width and height is set, it will be scaled proportionally. For example, the original image is 1000px wide and 400px high
If you only set a width of 200px, its height will automatically change to 80px
alt: the text description of the picture. This information is displayed when the picture fails to load. If the picture is loaded successfully, this information is not displayed
title: when the mouse moves over the picture. The mouse will display this information
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>picture</title> </head> <body> <img src="1.jpg" width="400" title="Do you believe in light" alt="Picture loading failed"> </body> </html>
4.6 hyperlink labels
The link tab can be clicked. After clicking, you can jump to another page
Bilateral label a label
Properties:
href: the address corresponding to the a tag. It can be a local address or a network address
Target: how to open the target web page
Attribute value:_ self this form opens (default)_ blank open a new form
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hyperlink label</title> </head> <body> <!-- a Tags are local resources that jump between pages --> <!-- <a href="4 Text label.html">Order me!!!</a> --> <a href="http://www.baidu.com" target="_ Blank "> jump to Baidu page</a> </body> </html>
4.7 implementation of hyperlink anchor function [to be used later!!!]
Use a tag to quickly locate a position on our page!!!
Name an a tag
Write the a tag where you need to use the anchor, href = # anchor name
4.8 form labels
table bilateral label
Nest some tags
tr label bilateral label control line. It is a child label of table
The td tag is the control column of the bilateral tag. It is the sub tag caption of tr: the header tag is the sub tag of table
th tag: it is very similar to td. It is a tr sub tag, but it is darker and thicker than td tag
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form</title> </head> <body> <div id="asc"> <table border="5" cellspacing="0" cellpadding="10" width="50%" align="center" bgcolor="aquamarine" bordercolor="red"> <tr align="center"> <th>ID</th> <th>full name</th> <th>Age</th> </tr> <tr align="center"> <td>1</td> <td>Zhang San</td> <td>21</td> </tr> <tr align="center"> <td>2</td> <td>Satan is</td> <td>2500</td> </tr> <tr align="center"> <td>3</td> <td>Wagbo</td> <td>270</td> </tr> </table> </div> </body> </html>
4.9 text format label
b bold label
big defines the label of a large font
em Italic Font
i Italic Font
Small small font
Strongbold font sup defines superscripts
sub definition subscript
ins definition insert font
del define delete font
4.10 character entities
There is no way to display special symbols in html, which can only be reflected by character entities
The less than sign (<) and the greater than sign (>) cannot be used in HTML because browsers mistakenly think they are tags.
If we want to display reserved characters correctly, we must use character entities in HTML source code
Just check the official manual for which you want to use