The first stop of front-end learning - HTML+CSS

That is, HyperText Markup language Hypertext Markup Language, the web pages we are familiar with are written in it, and the role of HTML is to define the content and structure of web pages.

HyperText refers to the use of hyperlinks to organize web pages and connect web pages
Markup refers to <标签>the way of giving content different functions and meanings

2 HTML elements

HTML elementsconsists of a series of elements such as

<p>Hello, world!</p>

elements
<p>and </p>are called the start and end tags, respectively
Hello, world surrounded by tags is called content
p is a pre-defined html tag, the function is to treat the content as a separate paragraph

Elements can also have attributes, such as

<p id="p1">Hello, world!</p>

Attributes are generally pre-defined, and the id attribute here is to give the element a unique identifier

Elements can be nested, such as

<p>HTML 是一门非常<b>强大</b>的语言</p>

Wrong nested writing:

<p>HTML 是一门非常<b>强大的语言</p></b>

An element that does not contain content is called an empty element , such as

<img src="1.png">
<img src="1.png"/>

img is used to display pictures
The src attribute is used to indicate the image path

3 HTML pages

The previous introductions are just individual HTML elements, which can serve as an integral part of a complete HTML page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <p id="p1">Hello, world!</p>
    <img src="1.png">
  </body>
</html>

html The element includes all other elements in the page, and only one element is needed for the entire page, called the root element
head Elements include elements that are not used to display content, such as , , etc. titlelinkmeta
bodyElements include elements that present content to users, such as various elements that will be learned later for displaying text, pictures, videos, and audio

4 common HTML elements

4.1 Text elements

1. Heading element h:

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

2. Paragraph element p

x <p>段落</p>

3. List elements (unordered and ordered):

unordered list

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

ordered list

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

Lists can also be nested

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

4. Hyperlink a:

 <!-- 超链接 -->

    <a href="1.html">本地网页</a>
    <a href="http://www.baidu.com">互联网网页</a>
    <a href="#p1">网页中锚点</a>
    <hr>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="p1">很下面的内容</p>
    <a href="#">回到顶部</a>

4.2 Multimedia elements

1. Image element img

<img src="文件路径">

There are 3 src formats

file address
data URL, the format is as follows

data: media type; base64, data

object URL, need to be used with javascript

2. Video element video

<video src="文件路径"></video>

3. audio audio

<audio src="文件路径"></audio>

4.3 Form elements (emphasis)

The role of the form: collect the data filled in by the user and submit the data to the server

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

common form items

text box

<input type="text" name="uesrname">

password box

<input type="password" name="password">

hidden frame

<input type="hidden" name="id">

date box

<input type="date" name="birthday">

Single box

x <input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

Checkbox

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

File Upload:

<input type="file" name="avatar">

The full form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
    <form action="http://localhost:8080/front" >
        username:<input type="text" name="username"/>
        <br>
        password:<input type="password" name="password"/>
        <input type="hidden" name="id" value="1"/>
        <br>
        birth:<input type="date" name="birthday"/>
        <br>
        男<input type="radio" name ="sex" value="男">
        女<input type="radio" name ="sex" value="女">
        <br>
        唱<input type="checkbox" name ="fav" value="唱">
        跳<input type="checkbox" name ="fav" value="跳">
        rap<input type="checkbox" name ="fav" value="rap">
        篮球<input type="checkbox" name ="fav" value="篮球">
        <br>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

5 Http requests

5.1 Request Composition

The request consists of three parts

request line
request header
request body

5.2 Request method and data format

1. Get request example

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost

%E5%BC%A0 is the URL-encoded result of [Zhang]

2. Post request example

POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

application/x-www-form-urlencoed format details:

Parameters are divided into names and values, separated by =
Multiple parameters are separated by &
[Zhang] and other special characters need to be encoded into [%E5%BC%A0] with encodeURIComponent() before sending

3. JSON request example

POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25

{"name":"zhang","age":18}

json object format

{"property name":property value}

where attribute values can be

String ""
number
true, false
null
object
array

json array format

[element1, element2, ...]

4. Example of multipart request (file upload)

The request method must be post, and the request body method must be form-data

POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--

boundary=123 is used to define the separator
The starting delimiter is--分隔符
The ending delimiter is--分隔符--

Data Format Summary

Client sends

coding
- application/x-www-form-urlencoded : url-encoded
- application/json: utf-8 encoding
- multipart/form-data: the encoding of each part can be different
Forms only support sending data in application/x-www-form-urlencoded and multipart/form-data formats
File upload needs to use multipart/form-data format
js code can support sending data in any format

server receive

For data in the application/x-www-form-urlencoded and multipart/form-data formats, Spring receives them in the same way, and only needs to use the property name of the java bean to correspond to the request parameter name.
For data in applicaiton/json format, Spring needs to use @RequestBody annotation + java bean to receive data

6 CSS

6.1 what is css

Cascading Style Sheet overlay cascading style sheet

CSS: presentation layer (beautifying web pages)

Font, color, margin, height, width, background image, webpage animation, webpage floating...

6.2 Quick Start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范:<style>可以编写css代码
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
               }-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

Advantages of CSS:

Separation of content and presentation
The structure of the web page is single and can be reused
Very rich in style
It is recommended to use a css file separate from html
Using SEO, it is easy to be indexed by search engines

6.3 Three ways to import CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--3.外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>



<!--1.行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<!--优先级:就近原则，谁离他近就调用什么样式
    这里  行内>外部>内部  -->
<body>
    <h1 style="color: red">我是标题</h1>
</body>
</html>

Extension: two ways of writing external styles

1. Link type: html

<style> 
<link rel="stylesheet" href="css/style.css">
</style>

2. Imported: Css2.1 exclusive

<style>
	@import "css/style.css";
</style>

The difference between the two:

link belongs to html tag, and @import is provided by css.
When the page is loaded, the link will be loaded at the same time, and the css referenced by @import will wait until the page is loaded before loading.
Compatibility issues: @import can only be recognized by IE5 and above, and link is an html tag, so there is no compatibility issue.
Weight problem: The weight of @import is higher than that of link.
DOM manipulation: DOM can manipulate the styles in the link, but not the styles in @import.

6.4 Common selectors

1. Basic selector

Label selector: select a category of labels

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，或选择到页面上所有这个标签的元素*/
        h1{
            color: #a13d30;
            background-color: #3cbda6;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>

<body>
    <h1>学html</h1>
    <h1>学html</h1>
    <p>这是一个段落标签</p>
</body>

</html>

Class selector class, select all tags with the same class attribute, across tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*
        类选择器的格式，.class的名称{}
        好处:可以多个标签归类，是同一个class，可以复用
        */
        .hua{
            color: red;
        }
        .zhong{
            color: yellow;
        }
    </style>
</head>
<body>
    <h1 class="hua">标题1</h1>
    <h1 class="zhong">标题2</h1>
    <h1 class="hua">标题3</h1>
    <p class="hua">P标签</p>
</body>
</html>

id selector: globally unique

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id选择器:#id名称{}
            id必须保证全局唯一，不可复用
            优先级:id选择器>class选择器>标签选择器
        */
        #hua{
            color: #ff008a;
        }
        .style1{
            color: #02ff00;
        }
        h1{
            color: #2d1dc1;
        }
    </style>
</head>
<body>
    <h1 id="hua" class="style1">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
</body>
</html>

2. Layer selector

First look at the structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>
<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    <p class="active">p7</p>
    <p>p8</p>
</body>
</html>

descendant selector: all descendants

/*后代选择器 所有的后代*/
body p{
    background-color: red;
}

offspring selector: next generation only

body >p{
	background-color: #02ff00;
}

Adjacent sibling selector: adjacent, the next one of the same type

.active + p{
    background-color: #3cbda6;
}

Universal selector: all of the same type below

.active~p{
            background-color: #ff008a;
        }

3. Attribute selector:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*  属性选择器
            属性名 = 属性值
            = :绝对等于
            *= :包含这个元素
            ^= :以...为开头的元素
            $= :以...为结尾的元素*/
        /*1.存在id属性的元素*/
        /* a[id]{
            background-color: yellow;
        }*/
        /*2.选择id等于first的元素*/
        /*a[id=first]{
            background-color: yellow;
        }*/

        /*class中有link的元素*/
        /*a[class*="links"]{
            background-color: yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background-color: yellow;
        }*/

        /*选中以pdf结尾的元素*/
        a[href$=pdf]{
            background-color: yellow;
        }

    </style>
</head>
<body>
    <p class="demo">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="" class="links item first" target="_blank" title="test">2</a>
        <a href="img/123.html" class="links item">3</a>
        <a href="img/123.png" class="links item">4</a>
        <a href="img/123.jpg" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="abc.doc" class="links item">8</a>
        <a href="abcd.doc" class="links item">9</a>
    </p>

</body>
</html>