HTML、JSP基础介绍

typora-copy-images-to: ..\images

一、HTML

1. 基本结构



    
    
        
        
        HelloWord
    

    
    
        content
    


：文档类型声明标签，告诉浏览器用的是哪种HTML版本显示网页
：定义网页的语言，en表示英文，zh-CN表示中文，用于提示浏览器要不要翻译语言
：指定字符集

2. 常用标签

2.1. 标题

2.2. 段落

 一组标签是一个段落

 换行标签

2.3. 文本格式化

 加粗
 倾斜线
 下划线 
 删除线

2.4. 盒子标签

 分割、分区，一个大盒子，块级元素，一行只能有一个
 一行可以有多个，行级元素

2.5. 图像

 图片和html文件放在同一位置，就可以使用相对路径（相对于html文件的路径）
同一级路径：image.jpg
下一级路径：images/image.jpg
上一级路径：../image.jpg

2.6. 超链接


①语法格式
文本或图像
目标打开方式默认为_self：当前tab打开
_blank：新tab打开
Hello  //当前窗口
Hello //新窗口
②内部链接
href="html文件名"
③空连接
href="#"
④下载链接
href = "exe或zip链接"
⑤锚点链接
Hello
  #起名
链接跳转到这里#id引用

2.7. 特殊字符

 空格字符，要加上分号

3. 表格标签

姓名	年龄	性别
aa	18	男
bb	20	女

4. 列表标签

4.1 无序列表

无序列表
无序列表标签
一
元素，必须为但里面元素可以是任意类型
二
三

4.2 有序列表


e
a
f

4.3 自定义列表


一 //dt主属性
二 //dd子属性并列
三
四

5. 表单标签

5.1 输入表单


账户:

密码:


性别:男女



爱好：吃饭睡觉

同意用户隐私政策

按钮

5.2 下拉表单

5.3 文本域


abcdefg

二、CSS

1. 基本样式



Title

2. 选择器

2.1 标签选择器

以HTML标签名开头的选择器
缺点：所有同类的标签都会被选择，无法选择其中一个

2.2 类选择器

可以单独选择一个或者某几个标签

定义某个标签里面的class=“名称”，通过.名称来调用，可以有多个名称，用空格隔开



.red {
color: red;
}

2.3 id选择器

定义某个标签里面的id=“名称”，通过#名称来调用，可以有多个名称，用空格隔开

#red {
background-color: red;
width: 100px;
height: 100px;
}

id是唯一的，所以id选择器只能调用一次

2.4 通配符选择器

表示选择页面中所有标签
* {
color: deeppink;
}

3. 字体属性

3.1 样式

h2 {
font-family: "JetBrains Mono";
}

3.2 大小

select{
font-size: 20px;  //px像素大小
}

3.3 粗细

.cu {
font-weight: 700; //700相当于加粗，400相当于变细
}

4. 文本属性

4.1 对齐

h2 {
text-align: center; //居中对齐，还有别的属性 
}

4.2 装饰

h2 {
text-decoration: underline; //下划线，还有很多别的属性
}

百度一下
#baidu {
text-decoration: none;  //删除百度一下的下划线
}

5. 样式

5.1 内部样式表

放在标签内部

5.2 行内样式表

在标签内部写style="属性"
如：
前端入门

5.3 外部样式表

在外部新建一个.css文件，在这个文件里只有样式，没有标签，实际开发中最常使用
  //通过这个方式引用样式文件到HTML文件中，第一个属性表示被链接的文档是一个链接表，第二个为路径

6. Emmet语法

按tab自动生成

①同等级标签：p+div

②父子级标签：ul>li

③.div，#div 生成包含class或id的标签

④生成多个标签：div5

⑤自增标签：div{$}5 表示生成内容为1-5的5个div标签

7. 复合选择器

7.1 后代选择器

元素2要是元素1的后代（子标签），比如ul li元素1 元素2 { 样式声明 }

7.2 子选择器

元素1 > 元素2 { 样式声明 }表示选择元素1里所有元素2中最近的标签，就近原则（亲儿子）

7.3 并集选择器

div，p 元素1，元素2 { 样式声明 }逗号表示和的意思，用，分割

7.4 伪类选择器

①链接伪类选择器

/*a:link未被访问的链接，设置为黑色，取消下划线*/
a:link {
color: black;
text-decoration: none;
}

/*a:visited选择点击过的链接，设置为橘色*/
a:visited {
color: orange;
}

/*a:hover选择鼠标经过的那个链接，设置为天蓝色*/
a:hover {
color: skyblue;
}

/*a:active选择鼠标按下，但没有松开的链接，设置为红色*/
a:active {
color: red;
}

②:focus伪类选择器

选取获得焦点（光标）的表单元素选取出来（高亮）

input:focus { 样式声明 }，主要是针对表单form input元素

三、JSP

1. 什么是JSP

JSP是Java server pages，Java的服务器页面JSP的主要作用是代替Servlet程序回传HTML页面的数据。因为Servlet程序回传HTML页面数据是一件非常繁琐的事情，开发成本和维护成本都极高。因此出了JSP解决这个问题。

JSP必须通过启动服务器，然后才能输入网址访问。

JSP本质上是一个Servlet程序。JSP翻译出来的Java类，间接的继承了HttpServlet类，也就是说JSP翻译出来的就是个Servlet程序。

2. 常用脚本

==声明脚本==

<%!
int a = 10;
%>

==表达式脚本==

作用：在jsp页面上输出数据
<%="abc"%>

==代码脚本==

<%
java语句
%>

3. 常用标签

①JSP静态包含
<%@include file="/demo.html"%>
②JSP动态包含

③JSP请求转发

4. EL表达式

${}

5. JSTL标签库


    org.apache.taglibs
    taglibs-standard-spec
    1.2.5


    org.apache.taglibs
    taglibs-standard-impl
    1.2.5

c:set

<%--
作用：往域中保存数据
域对象.setAttribute(key,value)
scope属性设置保存到哪个区域，
page:PageContext域
session:Session域
appilication:ServletContext域
request:request域
var属性设置key，value设置值--%>

${requestScope.abc}

c:if

做判断

${123}

c:choose

相当于if elseif，从上往下执行只要有一个满足，其他的就都不执行

    2  //when 标签的父标签必须是choose标签
    1


   //otherwise标签里面如果要有when标签，必须让它父标签是choose标签

c:foreach

//包含begin和end,var既是遍历的变量名，又是输出内容，step步长  items：遍历的元素
  
${i}