1. Basic concepts
① Path to access a software: Protocol: // IP address: port number/resource path
例: mysql.jdbc://127.0.0.1:3306/mydb
② Two architectures of software
B/S: Browser/Server -> can run directly in the browser, such as Taobao, Jingdong, etc...
C/S: Client/Server -> special applications need to be opened, such as QQ, Feiqiu, etc...
③, the difference:
B/S does not require special software, the client does not need to be maintained, and the security and stability are weaker than CS
C/S is more secure and faster, but it requires a client and needs to be upgraded
④ Three Musketeers on the Web
html: Complete the structure of the web page -Shimizu Room
css: complete the style of the web page -paint the wall red...
javascript: Control the behavior of web pages -dynamically modify the structure and style
⑤ Static webpage: No connection with backend/database
Dynamic webpage: need to be connected with the backend/database, the data will change according to the situation
2、HTML
HTML (Hypertext Markup Language) is a technology for writing web pages;
Document structure:
-
html: make sure this is an html document
-
head: the head, the tags inside are all functional explanations, not displayed in the body of the webpage
-
body: the main body, the tags of the structure displayed on the page are written here
<!-- 这是声明：主要是版本号 -->
<!DOCTYPE html>
<html><!-- 这是开始，相当于跟标签 -->
<head><!-- 这是头部标签 -->
<meta charset="UTF-8"><!-- 这是编码集 -->
<!-- 这是标题 -->
<title>这里是标题</title>
</head>
<body>
<h1>社会主义国家</h1><!-- 后面是换行标签 --><br/>
<h2>中华人民共和国</h2>
<!-- 分割线 -->
<hr/>
<h3>中国共产党</h3>
共产 主义好！
<!-- 这是身体标签 -->
</body>
</html>
Basic label:
h1-h6: heading tags
br: newline label<br/>
hr: dividing line<hr/>
p: a paragraph
: Space
Image tag:
<!--
img:用于展示图片：src：代表图片的路径，alt:如果没有图片,就看到它的值，width:设置宽度，height:设置高度
-->
<img alt="没图片了吧" src="图片路径" width="600px">
Absolute path: use protocol (http://, https://, file://) or prefix with "/"
Relative path: use the file itself as a reference path for positioning
- …/ represents the upper level path
- …/…/ represents the upper path of the upper layer
Hyperlink label
<body>
<!-- 这是超文本连接，target是设置是否从新新开一个窗口 -->
<a
href="file:///D:/Java0827/workspace/EclipseWorkspace/day_31HTML&CSS/WebContent/%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE.html"
target="_black">转到</a>
<a href="https://www.baidu.com/" target="_self">跳转</a>
<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_self">图片</a>
</body>
Table label
grammar:
table: table (root)
tr: row (must be in the table)
td: column, grid (must be in tr)
Write table-->tr-->td first
<table border="5" width = "300px">
<thead><!-- thead ：表头(不必需) 一般会用th -->
<tr>
<!-- 在开头的列还可以使用th，只能在开头使用，使用后会加粗剧中 -->
<th>id</th>
<th>name</th>
<th>number</th>
</tr>
</thead>
<tbody><!-- tbody : 表的身体 -->
<tr>
<td>1</td>
<td>詹姆斯</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>艾佛森</td>
<td>0</td>
</tr>
</tbody>
<tfoot><!-- tfoot : 表脚(不必需) -->
<tr>
<td>3</td>
<td>欧文</td>
<td>1</td>
</tr>
</tfoot>
</table>
Interrow: rowspan
Cross column: colspan
<table border="20" width = "300px" height = "200px">
<tr>
<!-- colspan:跨列 -->
<td colspan="2">第1格</td>
</tr>
<tr>
<td rowspan="2">第3格</td>
<td>第4格</td>
</tr>
<tr>
<!-- rowspan:跨行 -->
<td>第6格</td>
</tr>
</table>
Form label form
form is a form tag, all of our form elements are placed in this tag
- action: the path to access the background
- method: method of access (GET/POST)
- get: There is a size limit and it is not safe
- post: There is no size limit, and it is safer [post is recommended for all]
<!-- 语法 -->
<form action="/login" method="post">
...
</form>
note:
1. As long as the content of the data to be transmitted must be placed in the form tag;
2. name: (representing the name of this element), the element must have a name attribute to submit the value to the background;
3. Value: The value of the current element. If it is not written, the default is the content filled in (generally, in order to save space during the transmission process, the filled content will not be directly transmitted to the background). It represents in the submit, button, reset and other buttons Is the text in the button;
4. Do not mix English and Pinying in the actual development, try to use English.
Input implements a very versatile label
<!-- type属性：决定input标签的展现效果
text：文本框（默认值，可以不写）
password：密码框
radio：单选框
checkbox：多选框/复选框
file：文件上传
hidden：隐藏域
submit：提交按钮
button：普通按钮
reset：重置按钮
image：图片按钮
select:选择(下拉) option:每一个选择
文字比较多，使用文本域 (两个标签要挨着)
rows:行数
cols:列数
-->
<input type="属性" name="名字" value="元素值">
Integrated use:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<!--
form
表单元素中除按钮之外，都应当具备name属性，有了name属性值，表单的数据才能提交到服务器
-->
</head>
<body>
<input type="hidden" name="id" value="22">
姓名<input type="text" name="name" value="王xx"><!-- 这里value可以设置默认值 -->
<br/>
密码<input type="password" name="password" >
<br/>
性别<input type="radio" name="sex" value="1">男<!-- 这里的value是用来传输值的 -->
<input type="radio" name="sex" value="0" checked>女<!-- 这里的checked是设置默认是 -->
爱好<input type="checkbox" name="hobby" value="1">打球
<input type="checkbox" name="hobby" value="2">摄影
<input type="checkbox" name="hobby" value="3">看书
<br/>
民族<select name="national">
<option value="1">----请选择民族----</option>
<option value="2" selected>汉族</option><!-- selected是默认选择-->
<option value="3">回族</option>
<option value="4">维吾尔族</option>
<option value="5">哈萨克族</option>
</select><br/>
头像照片<input type="file" name="file" value="1">
<br/>
自我介绍<textarea name="intro" rows="20" cols="20"></textarea>
<hr/>
<input type="submit" value="没填完不要点这里"> <!-- 按钮的value可以设置名字 --><br/>
<input type="reset" value="可以重置"><br/>
</form>
</body>
</html>
effect:
div and span tags
div: block-level element, on a line: div,h1-h6,p,hr,...
span: In-line elements, do not occupy a single line: span, a, img,...
3、CSS
CSS is (Cascading Style Sheets) Cascading Style Sheets
Three ways to write CSS:
The first type: inline style: style: the meaning of style (all the labels that can be displayed have this attribute)
The writing of style: key:value;
The second type: style tag The
third type: outer link
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三种写法</title>
<!--
三种写法：
第一种：行内样式:style:样式的意思(所有能显示的标签都有这个属性)
样式的写: key:value;
第二种：样式标签
第三种：外连接
-->
<!-- 第三种：外连接，在外部定义一个.css结尾的文件夹 -->
<link rel="stylesheet" type="text/css" href="csstest/Test.css" />
<!-- 第二种：样式标签 -->
<style type="text/css">
h2{
color:green;font-size: 10px
}
</style>
</head>
<body>
<!-- 第一种：行内样式 -->
<div style="color:red;font-size: 50px">每天都是好心情</div>
<h2>我是中国人</h2>
<h2>实现中国梦</h2>
<h2>好好学习，天天向上</h2>
<div>你好吗</div>
<div>Just so so！</div>
</body>
</html>
CSS four selectors
- Universal selector *
- Label selector
- Class selector.
- id selector #
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--
选择器一共有四种
第一种：通用选择器
-->
<style type="text/css">
*{
color:blue;
}
/* 第二种：标签选择器 */
h3{
color:#E2622F;
}
/* 第三种：class选择器 */
.tx{
color:#2FC1E0;/* 可以是十六进制的数字表示颜色 */
}
/* 第四种：id选择器，只能作用于一个，id不能重名 */
#sishi{
color:red;
}
</style>
</head>
<body>
<div class="tx">凯尔特人</div>
<div id="sishi">森林狼</div>
<div id="si">密尔沃基雄鹿</div>
<h3>拉里伯德</h3>
<h3 class="tx">巴克利</h3>
<h5>阿的江</h5>
</body>
</html>
