JavaWeb 静态网页

2. 标记语言不是编程语言

语法

标签

<table border="1" cellpadding="1" cellspacing="1"><tbody><tr><td><strong>文件标签</strong></td><td style="text-align:center;"><img alt="" height="193" src="https://img-blog.csdnimg.cn/cc13b0841d514e589553fd61b4ff5b81.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAU291dGgucmV0dXJu,size_14,color_FFFFFF,t_70,g_se,x_16" width="457"></td></tr><tr><td><strong>文档标签</strong></td><td style="text-align:center;"><img alt="" height="472" src="https://img-blog.csdnimg.cn/b2f915901b7c41c29cd5f2908f24141c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAU291dGgucmV0dXJu,size_17,color_FFFFFF,t_70,g_se,x_16" width="546"></td></tr><tr><td><strong>图片标签</strong></td><td style="text-align:center;"><img alt="" height="104" src="https://img-blog.csdnimg.cn/a90452f4d63b4eb1b82e6441e5909ea4.png" width="406"></td></tr><tr><td><strong>列表标签</strong></td><td style="text-align:center;"><img alt="" height="145" src="https://img-blog.csdnimg.cn/ed74ebc6a5a7442eb2eb0dc387318417.png" width="617"></td></tr><tr><td><strong>链接标签</strong></td><td style="text-align:center;"><img alt="" height="123" src="https://img-blog.csdnimg.cn/1e3a9ab3f8ae446b86fafaebf9a64981.png" width="539"></td></tr><tr><td><strong>其他标签</strong></td><td style="text-align:center;"><img alt="" height="65" src="https://img-blog.csdnimg.cn/f8bb4f5f76d4435fb42a94e5a0f00fb1.png" width="352"></td></tr><tr><td><strong>语义化标签</strong></td><td style="text-align:center;"><img alt="" height="86" src="https://img-blog.csdnimg.cn/ed2abf16ad444e42b93431b7a63d63b3.png" width="395"></td></tr><tr><td><strong>表格标签</strong></td><td style="text-align:center;"><img alt="" height="376" src="https://img-blog.csdnimg.cn/084b1e15bb62486e9d602031dd151369.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAU291dGgucmV0dXJu,size_18,color_FFFFFF,t_70,g_se,x_16" width="574"></td></tr><tr><td><strong>表单标签</strong></td><td style="text-align:center;"><img alt="" height="240" src="https://img-blog.csdnimg.cn/2774e1be2dc0445794afc8392de593cc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAU291dGgucmV0dXJu,size_20,color_FFFFFF,t_70,g_se,x_16" width="672"></td></tr><tr><td><strong>表单项标签</strong></td><td style="text-align:center;"><img alt="" height="154" src="https://img-blog.csdnimg.cn/358627a8cca04c65b252cadf33decd4f.png" width="400"></td></tr></tbody></table>

特殊字符集

CSS

Cascading Style Sheets 层叠样式表

**层叠：**多个样式可以作用在同一个 html 的元素上，同时生效。

好处：

1. 功能强大

2. 将内容展示和样式控制分离

? 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 ? ? ? * 降低耦合度。解耦

? ? ? ? * 让分工协作更容易

? ? ? ? * 提高开发效率

CSS 与 html 结合方式

<table border="1" cellpadding="1" cellspacing="1"><tbody><tr><td colspan="1" rowspan="2"><strong>内联样式</strong></td><td><strong>概述：</strong>在标签内使用 style 属性指定 css 代码</td></tr><tr><td>如：<div style="color:red;">hello css</div></td></tr><tr><td colspan="1" rowspan="2"><strong>内部样式</strong></td><td><strong>概述：</strong>在 head 标签内定义 style 标签，style 标签的标签体内容就是 css 代码</td></tr><tr><td>如：<br>      <style><br>          div{<br>                color:blue;<br>          }<br>     </style><br>     <div>hello css</div></td></tr><tr><td colspan="1" rowspan="2"><strong>外部样式</strong></td><td><p><strong>概述：</strong></p><p>1. 定义 css 资源文件<br>2. 在 head 标签内，定义 link 标签，引入外部的资源文件</p></td></tr><tr><td>如：<br>        a.css 文件：<br>        div{<br>            color:green;<br>        }<br>        <link rel="stylesheet" href="css/a.css"><br>        <div>hello css</div><br>        <div>hello css</div></td></tr><tr><td><strong>注意</strong></td><td>1、2、3 种方式，css 作用范围越来越大<br>1 方式不常用，后期常用 2、3<br>外部样式格式可以写为：<br>        <style><br>            @import "css/a.css";<br>        </style></td></tr></tbody></table>

语法格式

选择器 {

? ? ? ? ? ? 属性名 1: 属性值 1;

? ? ? ? ? ? 属性名 2: 属性值 2;

? ? ? ? ? ? ...

? ? ? ? ? ? }

注释：/* 注释信息 */

**注意：**每一对属性需要使用；隔开，最后一对属性可以不加。

选择器

**概述：**筛选具有相似特征的元素。

<table border="1" cellpadding="1" cellspacing="1"><tbody><tr><td><strong>基础选择器</strong></td><td style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/07397a86ce6445dbaf6834b4962a613c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAU291dGgucmV0dXJu,size_16,color_FFFFFF,t_70,g_se,x_16"></td></tr><tr><td><strong>扩展选择器</strong></td><td style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/7ca97b8286c04cb5b3588eb23a1af1f1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAU291dGgucmV0dXJu,size_12,color_FFFFFF,t_70,g_se,x_16"></td></tr></tbody></table>

属性

案例：注册页面

=======

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>注册页面</title>

<style>

/初始化/

• {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/设置背景图居中且不重复/

body {

background: url("../img/register_bg.png") no-repeat center;

}

/最大的盒子/

#d_layout {

width: 65%;

height: 560px;

background-color: white;

border: 8px solid #EEEEEE;

margin: 40px auto;

}

/左边的盒子/

#d_left {

float: left;

margin: 20px;

}

/中间的盒子/

#d_center {

float: left;

width: 55%;

margin: 40px auto 0 55px;

}

/右边的盒子/

#d_right {

float: right;

margin: 20px;

}

/选中左边盒子中的第一个 p 标签/

#d_left > p:first-child {

color: #FFD026;

font-size: 20px;

}

/选中左边盒子中的最后一个 p 标签/

#d_left > p:last-child {

color: #A6A6A6;

font-size: 20px;

}

/选中右边盒子中的 p 标签/

#d_right > p:first-child {

font-size: 10px;

}

/子选择器/

#d_right p a {

color: pink;

}

/左边单元格/

.td_left {

width: 100px;

text-align: right;

height: 45px;

}

/右边单元格/

.td_right {

padding-left: 40px;

}

/并集选择器/

#username, #password, #email, #name, #tel, #birthday, #checkcode {

width: 251px;

height: 32px;

border: 1px solid #A6A6A6;

/设置边框圆角/

border-radius: 5px;

padding-left: 10px;

}

/验证码/

#checkcode {

width: 110px;

}

/图片/

#img_check {

height: 32px;

margin-left: 10px;

vertical-align: middle;

}

/按钮/

#btn_submit {

width: 150px;

height: 40px;

background-color: #FFD026;

border: 1px solid #FFD026;

margin-top: 20px;

}

</style>

</head>

<body>

<div id="d_layout">

<div id="d_left">

<p>新用户注册</p>

<p>USER REGISTER</p>

</div>

<div id="d_center">

<form action="#" method="post">

<table>

<tr>

<td class="td_left"><label for="username">用户名</label></td>

<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>

</tr>

<tr>

<td class="td_left"><label for="password">密码</label></td>

<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>

</tr>

<tr>