HTML
- Role: Responsible for building the page structure and content (building a rough house)
- HyperTextMarkupLanguage: Hypertext Markup Language
- Hypertext: refers to not only plain text, but also fonts and multimedia (pictures, audio, video)
- Markup language:
- <start tag attribute="xxx">tag body</end tag>
Create a Maven project named JSDVN2206 and delete the src directory
Create a web directory, create a day01 directory under the directory, and then create a 01 text-related label.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 特点:字体加粗,独占一行,自带上下间距 -->
<h1 align="center">内容标题1</h1>
<h2 align="right">内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<!-- br:换行标签 -->
<h6>内容<br>标题6</h6>
<!-- 分割线 -->
<hr>
<!-- 段落标签特点:独占一行,自带上下间距 -->
<p>段落1</p>
<p>段落2</p><p>段落3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>
<hr>
<h3>列表标签</h3>
<h4>无序列表</h4>
<ul>
<li>马超</li>
<li>澜</li>
<li>炸弹猫</li>
<li>小摩托</li>
<li>鬼谷子</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>张鹏</li>
<li>安郭建</li>
<li>田浩</li>
<li>李大帅</li>
<li>马兴男</li>
</ol>
<h4>列表嵌套</h4>
<ul>
<li>凉菜
<ol>
<li>凉拌凤爪</li>
<li>东北大拉皮</li>
</ol>
</li>
<li>热菜
<ol>
<li>鹅肝</li>
<li>牛舌</li>
</ol>
</li>
</ul>
</body>
</html>
Create 02 Resume Exercise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<hr>
<h2>基本信息</h2>
<p>姓名:<b>苍老师</b></p>
<p>性别:<i>男</i></p>
<p>爱好:<s>摄影</s></p>
<h2>个人经历</h2>
<ul>
<li>小学9年</li>
<li>中学6年</li>
<li>高中12年</li>
</ul>
<h2>获得荣誉</h2>
<ol>
<li>知名度最高奖</li>
<li>达内体重达人</li>
</ol>
</body>
</html>
Create 03 image tags.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- src资源路径:
1. 相对路径:一般访问站内资源时使用
- 图片和页面在同一目录: 直接写图片名
- 图片在页面的上级目录: ../图片名
- 图片在页面的下级目录: 文件夹名/图片名
2. 绝对路径: 一般访问站外资源,图片盗链,有找不到图片的风险
alt: 当图片不能正常显示时,显示的文本
title: 图片标题
width/height 两种赋值方式: 1.像素 2.上级元素的百分比
只设置宽度时,高度也会等比例缩放
-->
<img src="aa.jpg" alt="这是一张美女图片">
<img src="../b.jpg" title="这是标题" alt="">
<img src="abc/c.jpg" width="50" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://cdn.tmooc.cn/bsfile//imgad///047cbbe2ae9d4cb2989b386f5086b551.jpg" alt="">
</body>
</html>
common text labels
- Content title: h1-h6
Features: Exclusive line, bold font, with its own upper and lower spacing - Horizontal dividing line: hr
- Paragraph label: p
Features: Exclusive line with its own upper and lower spacing - Newline: br
- Bold: b
- Italic: i
- underscore: u
- strikethrough: s
list label
- Unordered list: ul and li
- Ordered list: ol and li
- List nesting: Ordered lists and unordered lists can be nested arbitrarily and infinitely
image tag img
- src: resource path
-
相对路径：访问站内资源使用- Pictures and pages are in the same directory: directly write the picture name
- The picture is in the parent directory of the page:
../图片名 - The picture is in the subdirectory of the page: folder name/picture name
-
绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险
-
- alt: the text displayed when the image cannot be displayed normally
- title: the text displayed when the mouse hovers over the image
- Width/height: Set the width and height of the picture, two assignment methods: 1. Pixel 2. Percentage If only the width and height are set, it will be scaled proportionally
hyperlink a
-
href: The resource path is similar to the src of the image tag
-
The wrapped text of a tag is a text hyperlink, and the wrapped picture is a picture hyperlink
-
Jump inside the page, add the id attribute in the destination element, and then jump to the location of the destination element through the hyperlink href="#id"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a id="top" href="https://www.baidu.com">超链接1</a> <a href="02简历练习.html">超链接2</a> <a href="a.jpg">超链接3</a> <a href="https://www.baidu.com"><img src="a.jpg" width="100"></a> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <img src="a.jpg"> <a href="#top">回到顶部</a> </body> </html>Table label table
-
Related tags: table table tr means row td means column th header caption table title
-
Related attributes: border border colspan across columns rowspan across rows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <!-- table row 表示行 table data 表格数据表示列 --> <tr> <td colspan="2">1-1</td> <td>1-3</td> <td rowspan="2">1-4</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td colspan="4" align="center">3-1</td> </tr> </table> <table border="1"> <tr> <td colspan="2">1-1</td> <td rowspan="2">1-3</td> </tr><tr> <td rowspan="2">2-1</td> <td>2-2</td> </tr><tr> <td colspan="2">3-2</td> </tr> </table> <table border=""> <caption>购物车</caption> <tr> <th>编号</th> <th>商品名</th> <th>价格</th> </tr> <tr> <td>1</td> <td>华为Mate 40 pro</td> <td>6799</td> </tr> <tr> <td>2</td> <td>华为Mate 50 pro</td> <td>6799</td> </tr> <tr> <td>3</td> <td>华为MatePad pro</td> <td>4999</td> </tr> <tr> <td>总价:</td> <td colspan="2">18,597元</td> </tr> </table> </body> </html>
form form
- Function: Obtain various information entered by the user and submit this information to the server
- You need to learn various controls in the form, including: text box, password box, single choice, multiple choice, drop-down selection, date selector, file selector, various buttons, etc.
- Relevant code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- action:提交路径 maxlength:最大字符长度 value:设置默认值 readonly只读 --> <form action="https://www.baidu.com"> 用户名:<input type="text" name="username" maxlength="5" value="abc" readonly> 密码:<input type="password" name="password"></input><br> <!-- value是单选框必须添加的属性,否则提交on checked默认选中 --> 性别:<input type="radio" name="gender" checked value="m" id="r1"> <label for="r1">男</label> <input type="radio" name="gender" value="w">女 <br> 兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" name="hobby" checked value="hj">喝酒 <input type="checkbox" name="hobby" value="tt">烫头<br> 生日:<input type="date" name="birthday"><br> 靓照:<input type="file" name="pic"><br> 所在地: <select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> <option value="sjz" selected>石家庄</option> </select><br> <input type="submit" value="注册"> </form> </body> </html>partition label
-
-
Function: It can be understood as a container that manages multiple related tags in a unified manner
-
Block-level partition label div: The characteristic is to occupy a single line
-
Inline partition label span: The characteristic is that it occupies one line
-
How to divide the page area? Divide into at least three major areas (head, body, footer) Each large area is divided into n small areas
-
The HTML5 standard has added some partition tags with stronger semantics, in order to improve the readability of the code. The functions of these tags are block-level partition tags like div
- header head
- footer legs
- main body
- section area
- nav navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>块级分区标签1</div><div>块级分区标签2</div><div>块级分区标签3</div>
<span>行内分区标签1</span>
<span>行内分区标签2</span>
<span>行内分区标签3</span>
<div>头</div>
<div>体</div>
<div>脚</div>
</body>
</html>
CSS
- Cascading Style Sheets
- Role: Responsible for beautifying the page (decoration)
How to add CSS style code in html page
- Inline style: add style code in the style attribute of the label, disadvantages: can not be reused
- Internal style: Add a style tag in the head tag, find the element through the selector and then add the style code, which can be reused but cannot be reused on multiple pages
- External style: write the style code in a separate css style file, and import it through the link tag in the html page, which can be reused on multiple pages, and the style code and html code can be separated.
- The external style is used most in the work, and the internal style is used more in the learning process
08CSS import method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
color: blue;
}
</style>
<!-- 引入外部的CSS样式文件 -->
<link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>
h3 {
color:green}
Selector
tag name selector
- Format: tag name {style code}
- Matches all tags with the same name on the page
id selector
- Format: #id{style code}
- Use when you need to select an element in the page
class selector
- Format: .class{style code}
- When you need to select multiple irrelevant elements on the page, just add the same class attribute value to multiple elements
group selector
- Format: p,#abc,.xyz{style code}
- How to combine multiple selectors into one selector
attribute selector
- Format: tag name[attribute name='value']{style code}
09Selector.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 */
#p1 {
color: red;
}
/* class选择器 */
.c1 {
color: yellow;
}
/* 分组选择器 */
h4,#p1,.c1 {
background-color: blue;
}
/* 属性选择器 */
input[type="text"] {
color: red;
}
/* 任意元素选择器 */
* {
/*边框 粗细 样式 颜色*/
border: 1px solid purple;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<p id="p1">苹果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3>冰箱</h3>
<h3 class="c1">洗衣机</h3>
<h3>电视机</h3>
<h4>张三</h4>
</body>
</html>
selector exercise
-
Change Jacky Cheung to green
-
Change Andy Lau and Wukong to blue
-
Modify the background of the 3 Buddhist scriptures and Liu Bei to yellow
-
Change the background of the password box to red
-
Add a red border to all elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#l1 {
color: green;
}
.c1 {
color: blue;
}
h1,h2 {
background-color: yellow;
}
input[type="password"] {
background-color: red;
}
* {
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li id="l1">张学友</li>
<li class="c1">刘德华</li>
<li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1>
<h1>八戒</h1>
<h1>沙僧</h1>
<h2>刘备</h2>
<input type="text">
<input type="password">
</body>
</html>
Selectors (Continued)(SelectorsContinued.html)
descendant selector
- Format: body div div p{style code}
- The above format matches all p in the div in the body (including child elements and descendant elements)
child element selector
- Format: body>div>div>p{style code}
- The above format matches all child elements p in the div in the body (excluding descendant elements)
pseudo class selector
- The state of the element is selected, including the following four states
- a:link not visited/visited visited/hover hovering/active click {style code}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 子孙后代选择器 */
/*body div div p {
color: red;
}*/
/* 子元素选择器 */
div>div>p {
color: blue;
}
/* 伪类选择器 */
a:link {
color: red} /*未访问状态*/
a:visited {
color: green} /*访问过状态*/
a:hover {
color: yellow} /*悬停状态*/
a:active {
color: pink} /*点击状态*/
</style>
</head>
<body>
<a href="https://www.tmooc.cn/">超链接1</a>
<a href="https://pvp.qq.com/">超链接2</a>
<a href="https://www.baidu.com/">超链接3</a>
<p>p1</p>
<div>
<p>p2</p>
<div><p>p3</p></div>
<div>
<p>p4</p>
<div><p>p5</p></div>
</div>
</div>
</body>
</html>
selector review
- tag name div{}
- id selector#id{}
- class selector.class{}
- Group selector div, #id, .class{}
- Attribute selector input[attribute name='value']{}
- any element*{}
- descendants div div p{}
- Child element selector div>div>p{}
- Pseudo-class selector a:link/visited/hover/active
### Selector practice:
-
change liu bei to red
-
Zhang Fei and Apple changed to green
-
text box and all fruit background yellow
-
p2 font pink
-
p2 and p3 background blue
-
Hyperlink unvisited green, visited red, hover yellow, click purple
-
02 selector exercise
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #l1{ color: red} .c1{ color: green} input[type='text'],body>p{ background-color: yellow; } body>div>div>p{ color: pink} body div div p{ background-color: blue} a:link{ color: green} a:visited{ color: red} a:hover{ color: yellow} a:active{ color: purple} </style> </head> <body> <ul> <li id="l1">刘备</li> <li>关羽</li> <li class="c1">张飞</li> </ul> <p>香蕉</p> <p class="c1">苹果</p> <input type="text"> <input type="password"> <div> <p>p1</p> <div><p>p2</p></div> <div> <div><p>p3</p></div> </div> </div> <a href="http://www.qq.com"></a> </body> </html>
color assignment
- Three primary colors: Red Green Blue RGB Red Green Blue, the value range of each color is 0-255
- Five color assignment methods:
- Color words: red/blue/yellow
- 6-digit hexadecimal assignment: #ff0000
- 3-digit hexadecimal assignment: #f00
- 3-digit decimal assignment: rgb(255,0,0)
- 4-digit decimal assignment: rgba(255,0,0,0-1) a=alpha The smaller the transparency value, the more transparent
Background picture
-
background-image:url("path") ; set background image
-
background-repeat:no-repeat; No repetition
-
background-size: 100px 200px; set the background image size width and height
-
background-position: horizontal and vertical; control position, pixel offset value and percentage
03 Colors and backgrounds
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 200px; height: 200px; background-color: pink; /* 设置背景图片 */ background-image: url("../day01/abc/c.jpg"); /* 设置背景图片尺寸 */ background-size: 100px 100px; /* 禁止重复 */ background-repeat: no-repeat; /* 控制位置:横向 纵向 */ /*background-position: 50px 50px;*/ background-position: 50% 50%; } #d2 { width: 611px; height: 376px; background-color: #e8e8e8; background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png"); background-repeat: no-repeat; background-position: 90% 90%; background-size: 318px 319px; } h1 { /*color: #ff0000;*/ /*color: #f00;*/ /*color: rgb(0,0,255);*/ color: rgba(255,0,0,0.3); } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <h1>颜色测试</h1> </body> </html>
Text and font-related styles
-
-
text-align: left/right/center; text horizontal alignment
-
text-decoration: overline/underline/line-through/none text decoration
-
line-height:20px; line height, multi-line text can control line spacing, single-line text can achieve vertical centering
-
font-size: 20px; set the font size
-
font-weight:bold/normal; set bold or remove bold
-
font-style: italic; set italic
-
font-family:xxx,xxx,xxx; set the font
-
font: 20px xxx,xxx,xxx; set font size and font
-
text-shadow: color x offset value y offset value concentration (the larger the value, the more blurred)
04 Text and font related
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 50px; border: 1px solid red; /* 文本对齐方式 */ text-align: center; /* 行高,通过行高控制垂直居中效果 */ line-height: 50px; /* 文本修饰,overline上划线,underline下划线,line-through删除线 */ text-decoration: line-through; /* 文本阴影 颜色 x偏移值 y偏移值 浓度 */ text-shadow: red -15px -15px 1px; /* 字体大小 */ font-size: 20px; /* 字体加粗 bold加粗 normal去掉加粗 */ font-weight: bold; } a { text-decoration: none; /* 去掉自带下划线 */ } h3 { font-weight: normal; /* 去掉自身携带加粗效果 */ font-style: italic; /* 设置斜体 */ /*font-family: cursive; 设置字体 */ font: 30px cursive; } </style> </head> <body> <div>文本和字体测试</div> <a href="">超链接</a> <h3>这是个h3</h3> </body> </html>
Combined training
- Andy Lau width 100 height 30
green background red font
horizontal and vertical center - Apples and Bananas font size 25px italic
- Remove the bold from the refrigerator
- Washing machine underlined
- Baidu removes the underline font and bold font size 20px
Text and font related exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 30px;
background-color: green;
color: red;
text-align: center;
line-height: 30px;
}
span {
font-size: 25px;
font-style: italic;
}
#h1_1 {
font-weight: normal;
}
#h1_2 {
text-decoration: underline;
}
a {
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div id="d1">刘德华</div>
<div>张学友</div>
<span>香蕉</span>
<span>苹果</span>
<h1 id="h1_1">冰箱</h1>
<h1 id="h1_2">洗衣机</h1>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
The display mode of the element display
display :
-
block : the default value of block-level elements, features: exclusive line, you can modify the width and height of the element, including: div, h1-h6, p
-
inline : the default value of inline elements, features: occupy one line, cannot modify the width and height of elements, including: span, hyperlink a
-
inline-block : the default value of the inline block element, features: occupies one line, can modify the width and height, including: img, input
-
none : hide the element
-
The width and height of inline elements cannot be modified. If it must be modified, you need to change the display to block or inline-block first
05 element display method
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 100px; height: 100px; display: none; /* 隐藏元素 */ } div { border: 1px solid red; width: 100px; height: 100px; } span { border: 1px solid blue; width: 100px; height: 100px; display: inline-block; } a { background-color: #0aa1ed; width: 132px; height: 40px; display: block; text-align: center; line-height: 40px; color: white; text-decoration: none; /* 去除下划线 */ font-size: 20px; border-radius: 3px; /* 设置圆角 */ } </style> </head> <body> <a href="">查看详情</a> <div>div1</div> <div>div2</div> <div>div3</div> <span>span1</span><span>span2</span><span>span3</span> <img src="../b.jpg" alt=""> <img src="../b.jpg" alt=""> <img src="../b.jpg" alt=""> </body> </html>
box model
- Function: The display effect of the control element includes: size, element position, border, element content position
- Box Model: Content + Margin + Border + Padding
- content content
- Margin
- border
- inner margin padding
Content of the box model
- width/height
- There are two methods of assignment:
- Pixels: 200px
- Percentage of parent element: 50%
- Inline elements cannot modify width and height
Margins outside the box model
-
Margin: The distance between an element and its parent element or adjacent sibling elements is called Margin
-
Assignment method:
- margin-left/margin-right/margin-top/margin-bottom : 10px; Assign a value in a single direction
- margin : 10px; Assignment in four directions
- margin : 10px 20px; up and down 10 left and right 20
- margin : 10px 20px 30px 40px; top right bottom left clockwise assignment
-
The upper and lower adjacent elements add the outer margin to each other to take the maximum value, and the left and right adjacent elements add the outer margin
-
The top and bottom margins of inline elements are invalid
-
Glue problem: When the upper edge of the element overlaps with the upper edge of the superior element, adding an upper margin to the element will cause a glue problem, and adding overflow to the superior element: hidden solves it
-
Some tags will have their own margins, such as: body, h1-h6, p, list tags
Border of the box model
- Assignment method:
- border-left/right/top/bottom : thickness style color; add a border in a single direction
- border : thickness style color; add borders in four directions
- border-radius : 20px ; rounded corners, the larger the value, the more rounded, more than or equal to half of the width and height is a perfect circle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 100px;
border: 1px solid red;
/*margin-left: 100px;
margin-top: 100px;
margin-bottom: 50px;
margin: 50px;*/
/* 顺时针,上右下左 */
margin: 10px 20px 30px 40px;
}
#d2 {
width: 100px;
height: 100px;
border: 1px solid blue;
/* 上下相邻的元素彼此添加外边距,取最大值 */
margin-top: 100px;
}
#s1 {
/* 行内元素是无法设置上下外边距 */
/*margin-top: 100px;*/
margin-right: 100px;
}
#s2 {
/* 左右相邻元素彼此添加外边距,两者相加 */
margin-left: 50px;
}
#big {
width: 200px;
height: 200px;
background-color: palegreen;
overflow: hidden;/* 解决粘连问题 */
}
#big>div {
width: 50px;
height: 50px;
background-color: pink;
margin-left: 50px;
/* 当元素的上边缘和上级元素的上边重叠时,给元素添加上外边距会出现粘连问题,
需要在上级元素中添加overflow: hidden; */
margin-top: 50px;
}
#border_div {
width: 200px;
height: 200px;
border: 10px solid cornflowerblue;
/* 设置圆角,需要考虑边框 */
border-radius: 110px;
}
</style>
</head>
<body>
<div id="border_div"></div>
<div id="big">
<div></div>
</div>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1">外边距测试</div>
<div id="d2">div2</div>
</body>
</html>
Box model padding
-
Padding: The distance between the edge of the element and the content is the padding
-
Assignment method: similar to margin
- padding-left/right/top/bottom:10px; assign a value in a single direction
- padding:10px; Assignment in four directions
- padding:10px 20px; up and down 10 left and right 20
- padding: 10px 20px 30px 40px; top right bottom left clockwise assignment
-
Adding padding to an element will affect the width and height of the element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 150px; height: 150px; border: 1px solid red; /* 内边距会影响元素的宽高 */ padding-top: 50px; padding-left: 50px; } </style> </head> <body> <div>内边距</div> </body> </html>08 box model exercise
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 100px; height: 100px; background-color: red; margin: 25px 0 0 25px; overflow: hidden; } #d1>div { width: 50px; height: 50px; background-color: blue; margin: 25px 0 0 25px; } #d2 { width: 50px; height: 50px; border: 4px solid green; border-radius: 5px; margin-left: 125px; padding: 50px 0 0 50px; } </style> </head> <body> <div id="d1"> <div></div> </div> <div id="d2">哈喽</div> </body> </html>
Three major features of CSS
- Inheritance: Elements can inherit the text and font-related styles of the parent element, and the effects of some tags are not affected by inheritance, such as: the font color of hyperlinks
- Cascading: Multiple selectors may select the same element. When the added styles are different, they will all cascade into effect. If the styles are the same, the priority determines which one takes effect
- Priority: The smaller the scope of action, the higher the priority, !important > id > class > tag name > inheritance (inheritance belongs to indirect selection)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
font-size: 35px;
color: red;
}
div {
/* !important作用是提升优先级 */
color: green !important;
}
</style>
</head>
<body>
<div id="d1">
<p>这是个p标签</p>
<span>这是个div里面的span</span>
<a href="">超链接</a>
</div>
<span>这是个div外面的span</span>
</body>
</html>
### Centering related
-
text-align:center; Center the text content of the element, center the inline element itself and the inline block element itself in the element
-
margin:0 auto; Center the block-level element itself
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span { background-color: cornflowerblue; } body>div { background-color: palegreen; /* 元素自身文本内容居中,内部的行内元素居中 */ text-align: center; } body>div>div { background-color: cadetblue; width: 200px; margin: 50px 0; } body>div>a { width: 100px; background-color: orange; display: block; /* 块级元素的居中,只能够通过margin: 0 auto;来实现 */ margin: 0 auto; /* 上下0,左右auto */ } </style> </head> <body> <div> <a href="">查看详情</a> <span>文本内容</span> <div><a href="">超链接</a></div> <div><p>这是p标签</p></div> </div> </body> </html>
01 comprehensive exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
div {
width: 198px;
height: 233px;
background-color: #e8e8e8;
text-align: center;
}
.title_p {
color: black;
margin: 0 0 6px 0;
}
.price_p {
color: #0aa1ed;
margin: 6px 0;
font-weight: bold;
}
a {
width: 100px;
height: 24px;
background-color: #0aa1ed;
color: white;
text-decoration: none;
display: inline-block;
line-height: 24px;
border-radius: 3px;
}
</style>
</head>
<body>
<div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png">
<p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
<p class="price_p">￥4600.00</p>
<a href="">查看详情</a>
</div>
</body>
</html>
element positioning
- static positioning
- relative positioning
- absolute positioning
- fixed positioning
- floating position
static positioning
- The default positioning method, also known as document flow positioning
- Format: position:static
- Features: Elements are based on the upper left, block-level elements are arranged from top to bottom, and in-line elements are arranged from left to right, and cascading effects cannot be achieved
- How to control the position of elements? Via margins
relative positioning
-
Format: position:relative
-
Features: Cascading effects can be achieved, elements do not break away from the document flow (no matter where the element is displayed, it still occupies the original position) (Note: can be cascaded)
-
How to control the position of the element? Use left/right/top/bottom to make the element offset relative to the initial position
-
Application scenario: used when an element needs to be moved while other elements are not affected (fine-tuning of element position)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 1px solid red; } div:hover { /* 悬停效果 */ /* margin: 20px 0 0 20px; 不能层叠*/ position: relative; /* 相对定位 */ left: 20px; top: 20px; } </style> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
absolute positioning
-
Format: position : absolute
-
Features: Cascading effects can be achieved, elements are separated from the document flow (do not occupy the original position)
-
How to control the position of the element? Use left/right/top/bottom to offset the position of the element relative to the window or a certain superior element. If you need to relative to a certain superior element, you must set the relative positioning for the superior element
-
Application scenario: Use absolute positioning when you need to add an element to the web page that does not affect the display position of other elements (such as Jingdong menu)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 1px solid red; } #d1 { position: absolute; /* 绝对定位 */ right: 0; bottom: 0; } #big { width: 200px; height: 200px; background-color: red; margin: 100px 0 0 100px; } #big>div { width: 100px; height: 100px; background-color: green; margin: 50px 0 0 50px; position: relative; /* 做参照物 */ } #big>div>div { width: 50px; height: 50px; background-color: blue; position: absolute; /* 绝对定位 */ left: 0; top: 0; } </style> </head> <body> <div id="big"> <div> <div></div> </div> </div> <div id="d1">div1</div> <div>div2</div> <div>div3</div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; background-color: rgba(0,0,0,0.3); padding: 10px; position: relative;/*参照物*/ } input{ width: 260px;/*300-20*2内边距*/ padding: 10px 20px; border: none; } img{ position: absolute; top: 14px; right: 40px; } p{ margin: 0; font-size: 12px; color: red; } </style> </head> <body> <div> <input type="text" placeholder="请输入用户名"> <img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" alt=""> <p>用户名不能为空!</p> </div> </body> </html>
fixed positioning
-
Format: position:fixed;
-
Features: The element is fixed at a certain position in the window, and the element is out of the document flow
-
How to control the position of the element? Use left/right/top/bottom to offset the position of the element relative to the window
-
Application scenario: used when the element needs to be fixed at a certain position in the window
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding-top: 100px; } #d1 { width: 1000px; height: 100px; background-color: lavender; position: fixed; /* 固定定位 */ top: 0; } #d2 { width: 50px; height: 200px; background-color: paleturquoise; position: fixed; /* 固定定位 */ right: 20px; top: 70%; /* 除了能够用像素外,还可以使用百分比 */ } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <img src="../b.jpg"> <img src="../b.jpg"> <img src="../b.jpg"> <img src="../b.jpg"> <img src="../b.jpg"> <img src="../b.jpg"> <img src="../b.jpg"> </body> </html>
floating position
-
Format: float : left/right
-
Features: The element breaks away from the document flow, floats left or right from the current line, and stops when it hits the edge of the parent element or other floating elements
-
Floating elements will automatically wrap if they cannot fit in one line, and may get stuck when wrapping
-
When all sub-elements of the element are floating, the height of the automatic recognition is 0, and the following elements will appear on the top and display abnormally. Add overflow:hidden to the element to solve it
-
Application scenario: Use when you need to change elements arranged vertically to horizontal
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body>div { width: 200px; /*height: 200px;*/ border: 1px solid red; /* 当元素的所有子元素全部浮动时,自动识别高度为0 后面的元素会顶上来导致显示异常,添加如下代码 */ overflow: hidden; } #d1 { /* width: 80px;当宽度大于容器宽度时,元素会自动换行 */ width: 50px; /* height: 60px;当高度大于其他元素高度时,会卡住其他元素 */ height: 50px; background-color: red; float: left; } #d2 { width: 50px; height: 50px; background-color: green; float: left; } #d3 { width: 50px; height: 50px; background-color: blue; float: left; } </style> </head> <body> <div> <div id="d1">div1</div> <div id="d2">div2</div> <div id="d3">div3</div> </div> </body> </html>
floating positioning exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 去掉自带的内外边距 */
ul {
margin: 0;
padding: 0;
/* 去掉字体前面的黑点 */
list-style-type: none;
}
li {
/* 向左浮动 */
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>免费课</li>
<li>直播课</li>
<li>精品课</li>
<li>线上班</li>
<li>线下班</li>
</ul>
</body>
</html>
09 comprehensive exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
p,ul{
margin: 0;
padding: 0;
}
body>div {
width: 366px;
height: 233px;
background-color: #e8e8e8;
}
#top_div {
background-color: #0aa1ed;
height: 35px;
border-radius: 2px;
}
#top_div>img {
margin: 10px 0 0 10px;
}
#top_div>span {
font-size: 16px;
color: white;
/* 位置微调使用相对定位 */
position: relative;
bottom: 4px;
}
.c_div {
padding-left: 10px;
}
.c_div>p {
color: #62b5ec;
margin: 17px 0 9px 0;
}
ul {
list-style-type: none; /* 去掉点 */
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
a {
text-decoration: none;
color: #0aa1ed;
}
a:hover {
color: #0a7eb8;
}
</style>
</head>
<body>
<div>
<div id="top_div">
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png" alt="">
<span>电脑,办公/1F</span>
</div>
<div class="c_div">
<p>电脑整机</p>
<ul>
<li><a href="">笔记本</a></li><li><a href="">游戏机</a></li>
<li><a href="">台式机</a></li><li><a href="">一体机</a></li>
<li><a href="">服务器</a></li><li><a href="">联想</a></li>
</ul>
</div>
<div class="c_div">
<p>电脑配件</p>
<ul>
<li><a href="">CPU</a></li><li><a href="">SSD硬盘</a></li>
<li><a href="">显示器</a></li><li><a href="">显卡</a></li>
<li><a href="">组装电脑</a></li><li><a href="">机箱</a></li>
</ul>
</div>
<div class="c_div">
<p>外设/游戏</p>
<ul>
<li><a href="">键盘</a></li><li><a href="">鼠标</a></li>
<li><a href="">U盘</a></li><li><a href="">移动硬盘</a></li>
<li><a href="">游戏设备</a></li><li><a href="">智能单车</a></li>
</ul>
</div>
</div>
</body>
</html>
Overflow settings Overflow
- visible (default): beyond the display
- hidden: beyond the hidden part
- scroll: scroll beyond the part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
/* 设置超出部分的显示方式 */
overflow: scroll;
}
img {
width: 100px;
/* 设置行内元素的垂直对齐方式
top:上对齐
middle:中间对齐
bottom:下对齐
baseline基线对齐(默认) */
vertical-align: bottom;
}
</style>
</head>
<body>
<input type="text"><img src="../b.jpg">
<div>
<img src="../b.jpg" alt="">
</div>
</body>
</html>
Show Hierarchy z-index
-
When elements modify the positioning method, there will be a problem of element stacking. Through z-index, you can control who is displayed on the top and who is displayed below the stacked elements.
-
The z-index style will take effect only after the positioning method has been changed
-
The larger the z-index value, the higher the display level
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 50px;
height: 100px;
background-color: red;
position: absolute;
/* 设置显示层级,值越大显示越靠前
只对非静态定位的元素有效 */
z-index: 2;
}
#d2 {
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
JavaScript
-
Role: Responsible for adding dynamic effects to the page
-
Language Features :
-
Belongs to scripting language (does not need to be compiled and directly parsed and executed by the browser)
-
object-oriented
-
weakly typed language
-
Java: String name = "tom"; int age = 18; age = "abc"; //报错
JS: let name = "tom"; let age = 18; age = "xyz"; //不报错
-
Strong security: JS language can only access data inside the browser, and data on computers other than the browser is prohibited from accessing
-
Strong interactivity: Because the JS language is embedded into the html page and finally executed on the client side, it can directly interact with the user, while the language like Java runs on the server and needs the help of the network for user interaction, so the interactive JS language will be stronger
How to add JS language in HTML page
-
Three import methods:
-
Inline: add js code in the event attribute of the tag, and execute it when the event is triggered
-
Event: It is some specific interactive moments that occur in the browser window
-
Click event: Trigger some specific interactive moments in the browser window when the user clicks on the element
-
-
Internal: Add script tags anywhere in the html page, and write js code in the tag body
-
External: write js code in a separate js file, and then import it to the html page through the src attribute of the script tag in the html page
-
After creating the day04 directory
01JS import method.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 内联 onclick点击事件 alert()弹出提示框 -->
<input type="button" value="按钮" onclick="alert('按钮点击了!')">
<!-- 内部引入JS -->
<script>
/* 在浏览器的控制台输出 */
console.log("内部引入成功!");
</script>
<!-- 引入外部js文件,如果script标签引入了外部js文件,则不能在
标签体内写js代码 -->
<script src="my.js"></script>
</body>
</html>
variables, data types, operators, various statements, methods, object-oriented
variable
- JS is a weakly typed language
Java: String name="tom"; int age = 18; age="abc"; //报错
JS: let name="tom"; let age = 18; age="xyz"; //不报错
-
The difference between let and var keywords, the scope is different
-
The variable declared using let is a local variable
-
A variable declared using var, no matter where it is declared, is equivalent to a global variable
-
Java:
for(int i=0; i<10; i++){
int y = i+1;
}
int z = i+y; //报错,i和y超出了自身的作用域
JS:
for(let i=0; i<10; i++){
let y = i+1;
}
let z = i+y; //访问不到i和y,因为超出了作用域
for(var i=0; i<10; i++){
var y = i+1;
}
var z = i+y; //能够访问到i和y的值
type of data
- There are only reference types (object types) in JavaScript
- Common object types:
- number : numeric type, equivalent to the sum of all numeric types in Java
- String : String, can be decorated with single quotes or double quotes: 'tom' , "tom"
- boolean : boolean value, true/false
- undefined : Undefined, when the variable is only declared and not assigned, the type of the variable is undefined
- The way to get the variable type: typeof variable
operator
-
Arithmetic operators: + - * / %, JS division will automatically convert integer or decimal according to the result
- Java : int x = 5; int y = 2; x / y = 2; - JS : let x = 5; let y = 2; x / y = 2.5; -
Relational operators: > < >= <= != == and ===
- == : Unify the types on both sides of the equal sign first, and then compare the values: "666" == 666 true
- === : compare the types first, then compare the value after the types are the same: "666"==666 false
-
Logical operators: && || !
-
Ternary operator: condition? value1 : value2
-
Assignment operators: = += -= *= /= %= ++ –
various sentences
- if else
- while
- do while
- for
- switch case
method/function
-
Java : public return type method name (parameter list) { method body }
-
JS : function method name (parameter list) { method body }
-
Four common methods:
- no parameter no return value
- Return value without parameter
- With parameters but without return value
- have parameters and return value
-
Three ways to declare methods:
- function method name (parameter list) { method body }
- let method name = function(parameter list) { method body }
- let method name = new Function("parameter 1", "parameter 2", "method body");
02 method.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" onclick="f1()">
<script>
//1.无参无返回值
function f1() {
console.log("f1");
}
//调用
f1();
//2.有参无返回值
function f2(name,age) {
console.log(name+":"+age);
}
f2("孙尚香",28);
//3.无参有返回值
function f3() {
return "我是返回值!";
}
let info = f3();
console.log(info);
//4.有参有返回值
function f4(x,y) {
return x*y;
}
let result = f4(8,9);
console.log(result);
//第二种声明方法的方式
let f5 = function (name,age) {
console.log(name+":"+age);
}
f5("刘备",20);
//第三种声明方法的方式
let f6 = new Function("name","age","console.log(name+':'+age)");
f6("吕布",40);
</script>
</body>
</html>
DOM Document Object Model
- and page related content
- Get the element object by the id of the element
let element object = document.getElementById("element id"); - Get the element object through the selector touched in CSS
let element object = document.querySelector("selector"); - Obtain and modify the text content of the element element
object.innerText; //get
element object.innerText = "xxx"; //modify - Get and modify the value of the control in the form
Control.value; //Get
Control.value = "xxx"; //Modify
03 page related methods.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>这个是div</div>
<input type="text" id="i1">
<input type="button" value="按钮" onclick="f()">
<script>
function f() {
//得到文本框和div对象
let i = document.querySelector("#i1");
let d = document.querySelector("div");
//取出文本框的值并赋值给div
d.innerText = i.value;
}
</script>
</body>
</html>
04 square exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="平方" onclick="f()">
<div>结果:<span>0</span></div>
<script>
function f() {
let i = document.querySelector("#i1");
let s = document.querySelector("span");
s.innerText = i.value*i.value;
}
</script>
</body>
</html>
NaN
-
Not a Number: not a number
-
isNaN(x) Determines whether the variable is NaN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="平方" onclick="f()">
<div>结果:<span>0</span></div>
<script>
function f() {
let i = document.querySelector("#i1");
let s = document.querySelector("span");
/* isNaN判断变量是否是NaN */
if (isNaN(i.value)) {
s.innerText = "请输入数字!";
return;
}
//s.innerText = i.value * i.value;
// 加入做其他运算,当两个字符串进行-*/运算时会自动转换为数值,但是+号不会
//第一种,强转
//s.innerText = i.value*1 + i.value*1;
//parseFloat()将字符串转成整数或小数
s.innerText = parseFloat(i.value) + parseFloat(i.value);
}
</script>
</body>
</html>
05 calculator exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="减" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>
结果:<span></span>
</div>
<script>
function f(x) {
//得到页面中相关的元素对象
let i1 = document.querySelector("#i1");
let i2 = document.querySelector("#i2");
let s = document.querySelector("span");
//判断输入的两个值是不是NaN
if (isNaN(i1.value)||isNaN(i2.value)){
s.innerText="输入错误!";
return;
}
switch (x) {
case 1: //加
s.innerText = i1.value*1+i2.value*1;
break;
case 2: //减
s.innerText = i1.value-i2.value;
break;
case 3: //乘
s.innerText = i1.value*i2.value;
break;
case 4: //除
s.innerText = i1.value/i2.value;
break;
}
}
</script>
</body>
</html>
06 guess the number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入0-100之间的整数" id="i1">
<input type="button" value="猜一猜" onclick="f()">
<div>结果:<span>0</span></div>
<script>
//0-100随机整数
let x = parseInt(Math.random()*101);
let count = 0;
let i1 = document.querySelector("#i1");
let s = document.querySelector("span");
function f() {
count++;
if (isNaN(i1.value)) {
s.innerText = "输入错误!";
return;
}
if (i1.value > x) {
s.innerText = "猜大了!";
}else if (i1.value < x) {
s.innerText = "猜小了!";
}else {
s.innerText = "恭喜你第"+count+"次猜对了!";
//次数清零
count = 0;
//生成一个随机整数
x = parseInt(Math.random()*101);
}
}
</script>
</body>
</html>
JavaScript Object Classification
-
Built-in objects: including String, number, boolean, etc.
-
BOM : Browser Object Model , browser object model, including browser-related content
-
DOM : Document Object Model, document object model, including content related to page tags
BOM Browser Object Model
-
window: The properties and methods in this object are called global properties and methods, and window can be omitted when accessing
-
Common methods in windows:
-
alert("xxx") pops up a prompt box
-
confirm("xxx") pops up a confirmation box
-
prompt("xxx") pops up the text box
-
isNaN(x) Determines whether the variable is NaN
-
parseInt() and parseFloat() convert strings to integers or decimals
-
console.log() console output
-
let timer = setInterval(method, time interval) start the timer
-
clearInterval(timer) stop timer
-
setTimeout(method, time interval) Start a timer that only executes once
-
-
Common properties in the window object
-
location location
-
location.href Obtain and modify the request address of the browser
-
location.reload() Refresh the page
-
-
historyHistory
-
history.length Get the number of historical pages
-
history.back() returns to the previous page
-
history.forward() Go to the next page
-
history.go(n) n=1 is to go to the next page n=-1 to return to the previous page n=2 to go to the next 2 pages n=0 means refresh
-
-
07 timer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>0</h1>
<h2>0</h2>
<script>
let count = 0;
//开启定时器,每隔1秒调用一次方法
//方法作为参数进行传递时不写()
setInterval(f,1000);
function f() {
count++;
let h = document.querySelector("h1");
h.innerText = count;
}
let num = 0;
//匿名方法开启定时器
let timer = setInterval(function () {
num++;
let h = document.querySelector("h2");
h.innerText = num;
if (num == 50) {
//停止定时器
clearInterval(timer);
}
},100)
//开启只执行一次的定时器
setTimeout(function () {
alert("时间到!");
},3000);
</script>
</body>
</html>
DOM Document Object Model
- Contains content related to page elements
-
Get the element object in the page through the selector
let element object = document.querySelector("selector")
-
Get and modify the text content of an element
Element object.innerText = "xxx"; Modify text content
Element object.innerText Gets the text content
-
Get and modify the value of the input control
Control object.value = "xxx"; Modify
control object.value get
-
create element object
let element object = document.createElement("tag name");
-
Add an element object to an element
document.body.appendChild(element object);
parent element.appendChild(element object);
parent element.append(element object, element object, element object);
01Dom related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建标签
let d = document.createElement("div");
//给div设置显示文本
d.innerText = "我是div";
//把div添加到body里面
document.body.appendChild(d);
//创建h1和h2
let h1 = document.createElement("h1");
let h2 = document.createElement("h2");
h1.innerText = "这是h1";
h2.innerText = "这是h2";
//把h1和h2同时添加到body中
document.body.append(h1,h2);
//创建图片标签并设置图片
let i = document.createElement("img");
//给元素设置属性
i.src = "../b.jpg";
//添加到页面中
document.body.append(i);
</script>
</body>
</html>
02 Handsome guys and beautiful women practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="添加帅哥" onclick="f(1)">
<input type="button" value="添加美女" onclick="f(2)">
<script>
let input = document.querySelector("#i1");
function f(x) {
//得到图片名
let imgName = x == 1 ? "a.jpg" : "b.jpg";
for (let i = 0; i < input.value; i++) {
let img = document.createElement("img");
img.src = imgName;
document.body.append(img);
}
}
</script>
</body>
</html>
03Employee list exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" placeholder="姓名">
<input type="text" id="i2" placeholder="工资">
<input type="text" id="i3" placeholder="工作">
<input type="button" value="添加" onclick="f()">
<table border="1">
<tr>
<th>姓名</th><th>工资</th><th>工作</th>
</tr>
</table>
<script>
//获取三个文本框
let i1 = document.querySelector("#i1");
let i2 = document.querySelector("#i2");
let i3 = document.querySelector("#i3");
//通过标签名获取table
let table = document.querySelector("table");
function f() {
//创建tr和td
let tr = document.createElement("tr");
let nameTd = document.createElement("td");
let salaryTd = document.createElement("td");
let jobTd = document.createElement("td");
//把用户输入的内容添加到td中
nameTd.innerText = i1.value;
salaryTd.innerText = i2.value;
jobTd.innerText = i3.value;
//把td追加到tr
tr.append(nameTd,salaryTd,jobTd);
//把tr追加到table
table.append(tr);
}
</script>
</body>
</html>
04Custom objects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<caption>个人信息</caption>
<tr>
<td>照片:</td><td><img id="head_img" src="head.jpg" width="50px" alt=""></td>
</tr>
<tr><td>名字:</td><td id="name_td">xxx</td></tr>
<tr><td>年龄:</td><td id="age_td">xxx</td></tr>
<tr>
<td>好友:</td>
<td><ul id="friend_ul"></ul></td>
</tr>
</table>
<input type="button" value="请求数据" onclick="f()">
<script>
function f() {
//模拟从服务器获取到的数据
let person = {
name:"苍老师",age:50,url:"a.jpg",friend:["克晶","传奇","成恒"]};
//获取页面中的元素对象
let head_img = document.querySelector("#head_img");
let name_td = document.querySelector("#name_td");
let age_td = document.querySelector("#age_td");
let friend_ul = document.querySelector("#friend_ul");
//把对象中的数据取出并赋值给页面中的元素对象
head_img.src = person.url;
name_td.innerText = person.name;
age_td.innerText = person.age;
//遍历好友数组
for (let fn of person.friend) {
//创建li
let li = document.createElement("li");
li.innerText = fn;
//把li追加到ul中
friend_ul.append(li);
}
}
</script>
</body>
</html>
Front-end MVC design pattern
-
MVC design pattern, in fact, is to divide all the codes of the front-end to realize a certain business into three parts
-
Model : model, refers to the data model, this data generally comes from the server
-
View : view, refers to the page label content
-
Controller : Controller, refers to the process code that displays data into the view
-
Disadvantages of the front-end MVC design pattern: Frequent DOM (code for traversing to find elements) operations are required in the Controller part, which will affect execution efficiency
M, V, VM design patterns
-
Model : model, refers to the data model, this data generally comes from the server
-
View : view, refers to the page label content
-
ViewModel: view model, which binds elements that may change on the page to a variable in memory, and when the value of a variable changes, it will directly find the corresponding element from memory to change it
Vue
-
The Vue framework is currently the most popular front-end framework
-
The Vue object is equivalent to the VM in the MVVM design pattern. It is responsible for binding the elements and variables that may change in the page. After the binding, it will continuously monitor the changes of the variables. When the value of the variable changes, it will automatically find the corresponding element. and change its display
06HelloVue (create a js directory in the web and put it into the vue.js file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{
{info}}</h1>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!-- 引入本地的vue.js文件 -->
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"#app", /* 告诉vue对象管理的区域 */
data:{
info:"Hello Vue!"
}
})
setTimeout(function () {
v.info = "值改变了!";
},3000);
</script>
</body>
</html>
Related instructions
-
{ {variable}} : Interpolation, let the text content here be bound to the variable
-
v-text="variable", let the text content of the element be bound to the variable
-
v-html="variable", let the html content of the element be bound to the variable
-
v-bind: attribute name = "variable", let the xxx attribute of the element bind to the variable, you can omit v-bind
-
v-model = "variable", two-way binding, when the value of the variable changes, the page will change accordingly, and the variable will also change when the content of the page changes, only when using the controls in the form will it involve two-way binding.
-
v-on : event name = "method", event binding, abbreviation @event name = "method", the method to call must be declared in the methods in Vue
07 Text-related commands
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!-- {
{变量}}插值表达式,让此处的文本和data中变量进行绑定,不依赖于某个标签 -->
<h1>{
{info}}</h1>
{
{info}}
<!-- v-text=变量,让元素的文本内容和变量进行绑定 -->
<p v-text="info"></p>
<!-- v-html=变量,让元素的标签内容和变量进行绑定 -->
<p v-html="info"></p>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:"文本相关练习!<b>加粗</b>"
}
})
</script>
</body>
</html>
Install Vue plugin in Idea
- File -> Settings -> Plugins, search for Vue in the Marketplace, restart after the installation is complete
08 attribute binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!-- v-bind属性绑定 -->
<input type="text" v-bind:value="msg">
<!-- 上面的简写形式 -->
<input type="text" :value="msg">
<a :href="url">超链接</a>
<img :src="src">
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
msg:"属性绑定测试",
url:"https://www.baidu.com",
src:"../b.jpg"
}
})
</script>
</body>
</html>
09 Two-way binding test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!-- 当需要获取input值的时候使用双向绑定 -->
<input type="text" v-model="msg">
<h1>{
{msg}}</h1>
<hr>
<input type="radio" v-model="gender" value="男">男
<input type="radio" v-model="gender" value="女">女
<h1>{
{gender}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
msg:"双向绑定测试",
gender:"男"
}
})
</script>
</body>
</html>
10 event binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="按钮1" v-on:click="f()">
<!-- @click为v-on:click的简写形式 -->
<input type="button" value="按钮2" @click="ff()">
{
{info}}
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
info:"事件绑定"
},
methods:{
//第一种方法定义
f:function () {
v.info = "按钮1点击了!";
},
//第二种方法定义
ff() {
v.info = "按钮2点击了!";
}
}
})
</script>
</body>
</html>
11 Guess the number practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" v-model="num" placeholder="请输入0-100之间的整数">
<input type="button" value="猜一猜" @click="f()">
<h1>结果:{
{info}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
let x = parseInt(Math.random()*101);
let v = new Vue({
el:"div",
data:{
num:"",
info:""
},
methods:{
f() {
if (v.num > x) {
v.info = "猜大了!";
}else if (v.num < x) {
v.info = "猜小了!";
}else {
v.info = "恭喜你猜对了!";
}
}
}
})
</script>
</body>
</html>
12 computer exercises
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" v-model="n1">
<input type="text" v-model="n2">
<input type="button" value="加" @click="f('+')">
<input type="button" value="减" @click="f('-')">
<input type="button" value="乘" @click="f('*')">
<input type="button" value="除" @click="f('/')">
<h1>结果:{
{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
n1:"",
n2:"",
result:""
},
methods:{
f(x) {
//eval()方法可以将字符串以代码的形式执行
v.result = eval(v.n1+x+v.n2);
}
}
})
</script>
</body>
</html>
### Vue directives (continued)
- v-for="(variable, i) in array"; Traverse the array while repeatedly generating the current label, the number is the same as the number of objects in the array
- v-if="variable", the display state of the element is bound to the variable, true is displayed, false is not displayed (delete the element)
- The v-else and v-if instructions are used in combination to display the inversion of the state and v-if elements
- v-show="variable", when the variable value is true, the element is displayed, and when it is false, the element is hidden (used when the display state needs to be switched frequently)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table border="1">
<caption>国产优秀纯电汽车</caption>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>类型</th>
</tr>
<!-- car代表数组中的每一个对象,i代表遍历的下标值 -->
<tr v-for="(car,i) in arr">
<td>{
{i+1}}</td>
<td>{
{car.name}}</td>
<td>{
{car.price}}</td>
<td>{
{car.type}}</td>
</tr>
</table>
<h1 v-for="car in arr">{
{car.name}}->{
{car.price}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
arr:[
{
name:"极氪001",price:350000,type:"SUV"},
{
name:"比亚迪汉EV",price:250000,type:"轿车"},
{
name:"比亚迪宋EV",price:150000,type:"SUV"}
]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" v-model="name" placeholder="姓名">
<input type="text" v-model="salary" placeholder="工资">
<input type="text" v-model="job" placeholder="工作">
<input type="button" value="添加" @click="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
<th>操作</th>
</tr>
<tr v-for="(e,i) in arr">
<td>{
{i+1}}</td>
<td>{
{e.name}}</td>
<td>{
{e.salary}}</td>
<td>{
{e.job}}</td>
<td><input type="button" value="删除" @click="del(i)"></td>
</tr>
</table>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
name:"",
salary:"",
job:"",
arr:[{
name:"张三",salary:500,job:"销售"},
{
name:"李四",salary:300,job:"人事"}]
},
methods:{
f() {
//往数组中添加一个对象
v.arr.push({
name:v.name,salary:v.salary,job:v.job});
v.name = "";
v.salary = "";
v.job = "";
},
del(i) {
//删除数组中i下标位置的对象
v.arr.splice(i,1);
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table border="1">
<caption>个人信息</caption>
<tr>
<td>照片:</td><td><img :src="person.imgUrl" width="50px" alt=""></td>
</tr>
<tr><td>名字:</td><td>{
{person.name}}</td></tr>
<tr><td>年龄:</td><td>{
{person.age}}</td></tr>
<tr>
<td>好友:</td>
<td><ul>
<li v-for="name in person.friend">{
{name}}</li>
</ul></td>
</tr>
</table>
<input type="button" value="请求数据" @click="f()">
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el: "div",
data: {
person: {
name: "xxx", age: "xxx", imgUrl: "../day05/head.jpg", friend: ["xxx", "xxx"]}
},
methods:{
f() {
let person = {
name:"苍老师",age:50,imgUrl:"a.jpg",friend:["克晶","传奇","成恒"]}
v.person = person;
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div v-if="isLogin">
<input type="text" v-model="newName">
<input type="button" value="添加" @click="arr.push(newName)">
<a href="javascript:void(0)" @click="isLogin=false">登出</a>
</div>
<div v-else>
<a href="javascript:void(0)">注册</a>
<!-- 如果超链接点击时,不离开此页面需要添加javascript:void(0),
作用废掉跳转功能 -->
<a href="javascript:void(0)" @click="isLogin=true">登录</a>
</div>
<ul>
<li v-for="name in arr">{
{name}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
let v = new Vue({
el:"body>div",
data:{
arr:["刘备","关羽"],
isLogin:false,
newName:""
}
})
</script>
</body>
</html>
Install the Element plugin in Idea
- File -> Settings -> Plugins, search for Element in the Marketplace, and the installation is complete