2022/3/9
1, Bootstrap (available in bootstrap Chinese document)
1. Concept: a framework for front-end development
1) framework: for semi-finished software, developers can develop it based on the framework to simplify coding
2) benefits:
1. Many css styles and ks plug-ins have been defined. Our developers can directly use these styles and plug-ins to get rich page effects.
2. Responsive layout: the same set of pages can be compatible with devices with different resolutions.
2. Quick start
1) Download Bootstrap
2) copy these three folders in the project
3) create html pages and introduce necessary resources
Responsive layout:
1. The same set of pages can be compatible with devices with different resolutions.
2. Implementation: rely on grid system: divide a row into 12 cells on average, and specify how many cells the elements occupy
3. Steps:
1) define the container, which is equivalent to the previous table
Container classification:
1.1 container: left blank on both sides
1.2 container fluid: each device is 100% wide
2) definition line: equivalent to the previous tr# style: row
3) define elements. Specifies the number of cells the element occupies on different devices.
Style: col - Equipment Code - number of grids
Equipment code:
1.1 xs: ultra small screen mobile phone (< 768px): col-xs-12
1.2 sm: small screen flat panel (> = 768px)
1.3 md: medium screen desktop display (> = 992px)
1.4 lg: large screen large desktop display (> = 1200px)
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above three meta label*must*Put it at the top, anything else*must*Follow! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js To make IE8 support HTML5 Element and media query( media queries)function -->
<!-- Warning: Pass file:// Protocol (that is, dragging html pages directly into the browser) response when accessing pages JS doesn't work -- >
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<!-- jQuery (Bootstrap All JavaScript All plug-ins depend on jQuery，So it must be put in front) -->
<script src="js/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- load Bootstrap All JavaScript plug-in unit. You can also load only a single plug-in as needed. -->
<script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
.inner{
border:1px solid red;
}
</style>
</head>
<body>
<!-- Define container -->
<div class="container-fluid">
<!-- Define row -->
<div class="row">
<!-- Define element:There are 12 grids in one row of the display pad 6 cells in the previous row -->
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
<div class="col-lg-1 col-sm-2 inner">grid</div>
</div>
</div>
</body>
</html>be careful:
1. If the number of cells in a row exceeds 12, the excess part will wrap automatically
2. Grid class attributes can be upward compatible. The grid class is applicable to devices with a screen width greater than or equal to the size of the dividing point
3. If the device width is really less than the minimum value of the device code for setting the grid class attribute, one element will occupy a whole line.
CSS styles and JS plug-ins
Global CSS Style:
Button: class = "BTN BTN default"
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
Picture: class = "img responsive": pictures account for 100% in any size
<img src="..." alt="..." class="img-rounded"> //square <img src="..." alt="..." class="img-circle"> //circular <img src="..." alt="..." class="img-thumbnail"> //Photo frame
Table: table, table bordered, table hover
Form: add: class = "form control" to form items
Components:
Navigation bar:
Page bar:
plug-in unit:
Rotation chart:
2, XML
1. Concept: Extensible Markup Language
Extensible: all labels are customized.
1.1. function
Stored data: 1) configuration file
2) transmission in the network
1.2. The difference between XML and html
1) xml tags are user-defined and html tags are predefined
2) xml syntax is strict and html syntax is loose
3) xml is used to store data and html is used to display data
w3c: World Wide Web Consortium
2. Syntax:
1.1 basic syntax:
1) suffix of XML document xml
2) the first line of xml must be defined as document declaration
3) the xml document has only one root tag
4) attribute values must be enclosed in quotation marks (either single or double)
5) the label must be closed correctly
6) xml tag names are case sensitive
1.2 quick start
<?xml version='1.0' ?> <users> <user id='1'> <name>zhangsan</name> <age>23</age> <gender>male</gender> <br/> </user> <user id='2'> <name>lisi</name> <age>25</age> <gender>female</gender> <br/> </user> </users>
1.3 components
1) document declaration
1. Format <? XML attribute list? >
2. Attribute list:
1.1 version: version number, mandatory attribute
1.2 encoding: encoding method. Tell the parsing engine the character set used in the current document. Default (ISO-8859-1)
1.3 standalone: independent or not
Values: yes (not dependent on other files), no (dependent on other files)
2) instruction (understanding): combined with css
<?xml-stylesheet type="text/css" href="a.css" ?>
3) label: custom label name
Rules:
1.1 the name can contain letters, numbers and other characters
1.2 names cannot start with numbers or punctuation marks
1.3 the name cannot start with the letter XML (or XML, XML, etc.)
1.4 the name cannot contain spaces
4) attribute: id attribute value is unique
5) text: CDATA area: the data in this area will be displayed as is
Format: <! [CDATA [data] >
<?xml version="1.0" encoding="gbk" standalone='no'?> <?xml-stylesheet type="text/css" href="css1.css" ?> <users> <user id='1'> <name>zhangsan</name> <age>23</age> <gender>male</gender> <br/> </user> <user id='2'> <name>lisi</name> <age>25</age> <gender>female</gender> <br/> </user> <code> <![CDATA[if(a>0 && a<100)]]> </code> </users>
Constraints: specify the writing rules of xml documents
As a framework user (Programmer):
1. Ability to introduce constraint documents into xml
2. Be able to simply read constraint documents
Classification:
1.DTD: a simple constraint technique
2.Schema: a complex constraint technique
DTD: import DTD into xml document
1. Internal dtd: define constraint rules in xml documents
2. External dtd: define the constraint rules in the external dtd file
Local: <! DOCTYPE root signature SYSTEM "dtd file location" >
Network: <! DOCTYPE root signature PUBLIC "dtd file name" "dtd file location URL" >
//dtd constraint file <!ELEMENT students (student*) > <!ELEMENT student (name,age,sex)> <!ELEMENT name (#PCDATA)> <!ELEMENT age (#PCDATA)> <!ELEMENT sex (#PCDATA)> <!ATTLIST student number ID #REQUIRED>
<?xml version="1.0" encoding="utf-8" ?> <!-- External constraint file --> <!-- <!DOCTYPE students SYSTEM "student.dtd"> --> <!-- Internal constraint file --> <!DOCTYPE students[ <!ELEMENT students (student*) > <!ELEMENT student (name,age,sex)> <!ELEMENT name (#PCDATA)> <!ELEMENT age (#PCDATA)> <!ELEMENT sex (#PCDATA)> <!ATTLIST student number ID #REQUIRED> ]> <students> <student number="s001"> <name>zhangsan</name> <age>23</age> <sex>male</sex> </student> <student number="s002"> <name>lisi</name> <age>25</age> <sex>female</sex> </student> </students>
Schema:
introduce:
1. Fill in the root element of the xml document
2. Introducing the xsi prefix xmlns: xsi=“ http://www.w3.org/2001/XMLSchema-instance "
3. Introduce XSD file namespace XSI: schemalocation=“ http://www.lnjava.cn/xml student. xsd"
4. Declare a prefix for each xsd constraint to identify xmlns=“ http://www.lnjava.cn/xml " <students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance "
xsi:schemaLocation="http://www.lnjava.cn/xml student.xsd"
xmlns="http://www.lnjava.cn/xml" >
Parsing: operate the xml document and read the data in the document into memory
1. Operate xml document:
1) parse (read): read the data in the document into memory
2) write: save the data in memory to xml document. Persistent storage
2. Method of parsing xml:
1) DOM: load the markup language document into the memory at one time and form a DOM tree in the memory.
Advantages: it is easy to operate and can CRUD all documents
Disadvantages: occupy memory
2) SAX: read line by line, event driven.
Advantages: no memory.
Disadvantages: it can only be read and cannot be added, deleted or modified.
Note: DOM is generally used on the server side and SAX is used on the mobile side.
Common parsers for xml:
1.JAXP: the parser provided by sun company supports dom and sax
2.DOM4J: an excellent parser
3.Jsoup: jsoup is a java HTML parser that can directly parse a URL address and HTML text content. It provides a very labor-saving API. Data can be retrieved and manipulated through DOM, css and operation methods similar to jQuery.
4.PULL: the built-in parser of Android operating system, sax mode.
Jsoup: jsoup is a java HTML parser, which can directly parse a URL address and HTML text content. It provides a very labor-saving API. Data can be retrieved and manipulated through DOM, css and operation methods similar to jQuery.
1) quick start
Steps:
1.1 import jar package
1.2 get Document object
1.3 get the corresponding label Element object
1.4 obtaining data
package ln.javatest.day01.demo01;
//Jsup quick start
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import java.io.File;
import java.io.IOException;
public class JsoupDemo01 {
public static void main(String[] args) throws IOException {
//Get the Document object and get it according to the xml Document
//Get student XML path
String path = JsoupDemo01.class.getClassLoader().getResource("student.xml").getPath();
//Parse the xml document, load the document into memory, and get the dom tree -- > document
Document document = Jsoup.parse(new File(path), "utf-8");
//Get Element object Element
Elements elements = document.getElementsByTag("name");
System.out.println(elements.size()); //2
//Get the Elements object of the first name
Element element = elements.get(0);
//get data
String name = element.text();
System.out.println(name);
}
}Use of objects:
1. Jsup: a tool class that can parse html or xml documents and return documents
1) parse: parses html or xml documents and returns Document
parse (File in, String charsetName): parses html or xml files.
Parse (String html): parse xml or html strings.
parse (URL, int timeoutMillis): obtain the specified html or xml document object through the network path.
package ln.javatest.day01.demo01;
//Jsup object function
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import java.io.File;
import java.io.IOException;
import java.net.URL;
public class JsoupDemo02 {
public static void main(String[] args) throws IOException {
//Get the Document object and get it according to the xml Document
//Get student XML path
String path = JsoupDemo02.class.getClassLoader().getResource("student.xml").getPath();
//Parse the xml document, load the document into memory, and get the dom tree -- > document
//parse (File in, String charsetName): parses html or xml files.
/*Document document = Jsoup.parse(new File(path), "utf-8");
System.out.println(document);*/
//Parse (String html): parse xml or html strings.
String str = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>" +
"<students>\n" +
" <student number=\"s001\">\n" +
" <name>zhangsan</name>\n" +
" <age>23</age>\n" +
" <sex>male</sex>\n" +
" </student>\n" +
" <student number=\"s002\">\n" +
" <name>lisi</name>\n" +
" <age>25</age>\n" +
" <sex>female</sex>\n" +
" </student>\n" +
"</students>";
Jsoup.parse(str);
//parse (URL, int timeoutMillis): obtain the specified html or xml document object through the network path.
URL url = new URL("https://www.baidu.com/s?wd=111");
Jsoup.parse(url,100000);
}
} 2.Document: document object. Represents a dom tree in memory.
Get Element object
1) getElementById(String id): get the unique element object according to the id attribute value
2) getElementsByTag(String tagName): get the element object collection according to the tag name
3) getElementsByAttribute(String key): get the element object collection according to the attribute name
4) getElementsByAttributeValue(String key,String value): get the collection of element objects according to the corresponding attribute name and attribute value
package ln.javatest.day01.demo01;
//Document/Element object function
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import java.io.File;
import java.io.IOException;
import java.net.URL;
public class JsoupDemo03 {
public static void main(String[] args) throws IOException {
//Get the Document object and get it according to the xml Document
//Get student XML path
String path = JsoupDemo03.class.getClassLoader().getResource("student.xml").getPath();
//Parse the xml document, load the document into memory, and get the dom tree -- > document
//parse (File in, String charsetName): parses html or xml files.
Document document = Jsoup.parse(new File(path), "utf-8");
//Get element object
//Get all student objects
Elements elements = document.getElementsByTag("student");
System.out.println(elements);
//Get the element objects whose attribute name is id
Elements elements1 = document.getElementsByAttribute("id");
System.out.println(elements1);
//Gets the element object whose number attribute value is s001
Elements elements2 = document.getElementsByAttributeValue("number", "s001");
System.out.println(elements2);
//Gets the element object of the id attribute value
Element id1 = document.getElementById("1");
System.out.println(id1);
}
} 3.Elements: a collection of Element objects. It can be used as ArrayList < Element >
4.Element: element object
1.1 get sub element object:
1) getElementById(String id): get the unique element object according to the id attribute value
2) getElementsByTag(String tagName): get the element object collection according to the tag name
3) getElementsByAttribute(String key): get the element object collection according to the attribute name
4) getElementsByAttributeValue(String key,String value): get the collection of element objects according to the corresponding attribute name and attribute value
1.2 get attribute value
String attr(String key): get the attribute value according to the attribute name
1.3 obtaining text content
String text(): get the plain text content of all sub tags
String html(): get all the contents of the tag body (including the tag and text contents of sub tags)
5.Node: node object
Is the parent class of Document and Element
package ln.javatest.day01.demo01;
//Document/Element object function
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import java.io.File;
import java.io.IOException;
public class JsoupDemo04 {
public static void main(String[] args) throws IOException {
//Get the Document object and get it according to the xml Document
//Get student XML path
String path = JsoupDemo04.class.getClassLoader().getResource("student.xml").getPath();
//Parse the xml document, load the document into memory, and get the dom tree -- > document
//parse (File in, String charsetName): parses html or xml files.
Document document = Jsoup.parse(new File(path), "utf-8");
//Get the name tag through the Document object, get all the name tags, and you can get two
Elements elements = document.getElementsByTag("name");
System.out.println(elements.size());
System.out.println("--------------");
//Get the word label object through the Element object
Element elements1 = document.getElementsByTag("student").get(0);
Elements ele_name = elements1.getElementsByTag("name");
System.out.println(ele_name.size());
//Gets the value of the student property of the object
String number = elements1.attr("number"); //The attribute names here are not case sensitive
System.out.println(number);
System.out.println("-----------------------");
//Get text content
String text = ele_name.text();
String html = ele_name.html();
System.out.println(text);
System.out.println(html);
}
}Shortcut query method:
1.selector: selector
Usage: Elements select (String cssQuery)
Syntax: refer to the syntax defined in the Selector class
package ln.javatest.day01.demo01;
//Selector query
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import java.io.File;
import java.io.IOException;
public class JsoupDemo05 {
public static void main(String[] args) throws IOException {
//Get the Document object and get it according to the xml Document
//Get student XML path
String path = JsoupDemo05.class.getClassLoader().getResource("student.xml").getPath();
//Parse the xml document, load the document into memory, and get the dom tree -- > document
//parse (File in, String charsetName): parses html or xml files.
Document document = Jsoup.parse(new File(path), "utf-8");
//3. Query the name tag
Elements elements = document.select("name");
System.out.println(elements);
//4. Query the element whose id value is id1
Elements elements1 = document.select("#id1");
System.out.println(elements1);
//5. Get the age sub tag of the student tag and the number attribute value is s001
//Get the student tag and the number attribute is s001
Elements elements2 = document.select("student[number=\"s001\"]");
System.out.println(elements2);
//Obtain the age sub tag based on the previous step
Elements elements3 = document.select("student[number=\"s001\"] age");
// Elements elements3 = document. select("student[number=\"s001\"]>age"); Same effect as above
System.out.println(elements3);
}
} 2.XPath: Xpath is the XML path language, which is a language used to determine the location of a part in XML (a subset of the standard General Markup Language) documents
1) using the Xpath of jsup requires importing additional jar packages
2) query w3cschool reference manual and complete the query with xpath syntax