HTML&CSS
站长
· 阅读数 61
JavaWeb
访问Web网站原理
用户在浏览器输入域名，根服务器根据域名进行域名解析DNS解析为IP，再将IP传回服务器进行搜索（小科普：ipv4的根服务器全球13台，美国10台，日本欧洲3台，IPv6是中国主导但还没有全名普及，屏蔽根服务器就直接从互联网消失，为了避免这种制裁，各国比如俄罗斯使用了镜像服务器）
C/S和B/S
C/S（Client/Server）
常用的桌面软件结构，比如QQ、王者等
- 安全，不容易拿到源码
- 速度更快
- 每次升级都需要重新安装客户端
B/S （Browser/Server）（浏览器/服务器）
4399小游戏之类
- 不安全，在网页直接F12就能拿到源码
- 使用简便，只需要一个浏览器，不用软件更新
静态页面&动态页面
- 静态页面：静态页面一旦写好之后，页面的内容就不会改变了。如果要改变只有修改页面的代码才会发生改变。常见的静态页面开发技术：html；
- 动态网页：动态页面一旦写好之后，即使不改变页面的代码，页面的内容也可能会随着时间、环境或者数据库操作的结果而发生改变。常见的动态页面开发技术：JSP/Servlet、
ASP、PHP等；
HTML（用的第五版本）
HTML文件可以直接通过浏览器打开
基本结构
<!- 文档声明 ->
<!DOCTYPE html>
<!- 语言类型 ->
<html lang="en">
<!- 网页的头部 ->
<head>
<!- 字符集类型 ->
<meta charset="UTF-8">
<!- 网页标题 ->
<title>Document</title>
</head>
<!- 网页的主体内容 ->
<body>
</body>
</html>
表格标签
- 普通表格
| 标签 | 表述 |
|---|---|
| table | 标题标签 |
| tr | 行标签 |
| td | 列标签 |
| px | 像素 |
| th | 表头标签（居中对齐加黑） |
<table width="200px" height="100px" border="2">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>万金油</td>
<td>99</td>
<td>未知</td>
</tr>
</table>
- 列合并colspan 只能合并两个相邻具有相同值的列，合并后的单元格会占用合并之前所在值的空间，取值规则：合并n列，取值为n，同时删除当前tr下的n-1个单元格；
<table width="200px" height="100px" border="2">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>万金油</td>
<td>99</td>
<td colspan="2">未知</td>
</tr>
- 行合并rowspan
取值规则：合并n行，取值为n，同时依次删除与当前行同级的n-1个tr下的一个单元格；
<table width="200px" height="100px" border="2">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>万金油</td>
<td>99</td>
<td >未知</td>
<td rowspan="2">打篮球</td>
</tr>
<tr>
<td>徐阶</td>
<td>34</td>
<td>男</td>
</tr>
</table>
图片标签
| 标签属性 | 描述 |
|---|---|
| alt | 当图片无法显示的时候（路径错误）就会显示 |
| src | 指定图片的路径 |
| width | 指定图片的宽度 |
| heigth | 指定图片的高度 |
- src相对路径
./本层级 ../上一层级 ../../上上层级
<img src=".\img\dog.png" height="200" width="200" alt="柴犬"/>
- src绝对路径
绝对路径要在磁盘中打开
<img src="file://C:\Users\19245\Desktop\img\4.png" />
超链接标签
| 属性 | 描述 |
|---|---|
| href | 指示超链接需要链接的位置 |
| target | 指示该超链接以什么样的方式进行跳转 |
- target
_blank：在新的标签页打开；
_self：在当前标签页中打开，默认取值；
<a href="https://re.jd.com/" target="_blank">大哥进货了</a>
表单标签
form标签
和后端进行交互的标签
| form的属性 | 描述 |
|---|---|
| action | 要提交的路径 |
| method | 要提交的方式 |
- Input标签
<input type="" name="" value="" />
有name属性才能提交到服务器
| type属性 | 描述 |
|---|---|
| test | 普通文本框 |
| passsword | 密码框 |
| radio | 单选框 |
| File | 文件上传 |
| hidden | 隐藏域 ，有些数据不想用户看到又需要处理 |
| submit | 提交按钮 ，按钮必须使用Value设置框内内容 |
| button | 普通按钮 |
| reset | 重置按钮 |
| image | 图片按钮 |
<form action="" method="">
账号：<input type="test" name="name"><br>
密码：<input type="password" name="pwd"><br>
性别：男<input type="radio" name ="sex"/>女 <input type="radio" name ="sex"/><br>
爱好：跑步<input type="checkbox" name="sing" />跳舞<input type="checkbox" />
隐藏：<input type="hidden" /><br>
<!-- 点击提交就会以method的方式提交到action的地址-->
<input type="submit" value="提交"/><br>
<input type="button" value="普通按钮" /><br>
<input type="reset" value=" 重置按钮" />
</form>
- textarea标签（多行文本框）
类似于写简介等不确定字数的文本
简介：<textarea cols="20" rows="10"></textarea >
- select标签（下拉框）
使用还需要在select里面套一层option标签
地址：<select>
<option>四川省</option>
<option>浙江省</option>
<option>云南省</option>
<option>贵州省</option>
</select>
<select>
<option>--请选择你的城市--</option>
<option>绵阳市</option>
<option>崇州市</option>
<option>海南市</option>
<option>成都市</option>
</select>
- div&span标签
div是块级标签，独占一行 span是行内标签，内容占用多少就占用多少空间
<div style="background-color: aqua">占用一行</div>
<div style="background-color: rebeccapurple">独占一行</div>
<span>span抱歉</span>
<span>span抱歉</span>
<span>span抱歉</span>
CSS
Cascading Style Sheets层叠样式表
语法
单个样式写法：
<标签名 style="样式属性:样式属性值;">内容</标签名>
多个样式写法：
<标签名 style="样式属性1:属性值;样式属性2:属性值;">蓉华教育</标签名>
CSS代码中的注释：
/* 注释内容 */
CSS对大小写敏感
三种写法
执行顺序是就近原则，比如行内样式离得近，就优先执行行内样式
行内样式
仅仅只是对当前行有效
<标签名 style=“样式属性：样式属性值”>内容</标签名>
内部样式
对整个HTML页面有效
<style type="text/css">
input{
样式属性1：样式属性值1；
样式属性2：样式属性值2；
}
</style>
ex:
<style type="text/css">
input{
border-radius: 10px;background-color: aqua
}
</style>
外部样式
新建一个以.css结尾的文件，把需要设置的属性值全部写在里面-->标签连接之前的那个文件
语法：
<link rel="stylesheet" href="CSS文件路径" />
CSS选择器
- 标签选择器
就上面用的那个，就只对Input标签起作用
标签名{
样式
}
- 通用选择器
*{
样式
}
- 类选择器
.class{
样式
}
- id选择器
用法和类选择器一致
#id值{
样式
}
转载自:https://juejin.cn/post/7273119689185345573