文章目录

1、前言
- 1.1 软件架构
2、HTML
- 2.1 快速入门
- 2.2 常用标签
- - 2.2.1 文本标签
  - 2.2.2 图片标签
  - 2.2.3 列表标签
  - 2.2.4 链接标签
  - 2.2.5 div和span
  - 2.2.6 语义化标签
  - 2.2.7 表格标签
  - 2.2.8 表单标签
3、CSS
- 3.1 使用方式
- 3.2 语法
- 3.3 选择器
- - 3.3.1 基础选择器
  - 3.3.2 拓展选择器
- 3.4 属性

1、前言

JavaWeb即使用Java语言开发基于互联网的项目。

1.1 软件架构

软件架构分为C/S架构和B/S架构，C指的是Client，B指的是Browser，S指的是Server。比如QQ、迅雷等就是C/S架构。而B/S架构的就是使用浏览器来解析。
B/S架构使用到了静态资源和动态资源，静态资源是使用静态网页开发技术发布的资源，特点是所有用户都能访问，得到的结果一致，如文本、图片、音频、视频、HTML、CSS、JavaScript。动态资源是使用动态网页技术发布的资源，特点是所有用户访问的结果可能不一样，如jsp、servlet、psp、asp等，如果用户请求的是动态资源，那么服务器在接收到请求后回执行动态资源，转换为静态资源后再返回给用户浏览器。
HTML用于搭建基础网页，展示网页的内容；CSS用于美化网页，布局页面；Javascript用于控制页面的元素，让页面有动态的效果。

2、HTML

HTML（Hyper Text Markup Language 超文本标记语言）是最基础的网页开发语言，用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本，由标签构成。（不是编程语言）

2.1 快速入门

html文件由.html后缀或.htm后缀构成。标签分为围堵标签和自闭和标签，前者需要一头一尾两标签，如<html></html>，后者开始和结束在一起，如<br/>。在开始标签中可以定义属性，属性由键值对构成，值需要单引号或双引号包起来。示例如下：

<html><head><title>title</title></head><body><FONT color='red'>Hello World</font><br/><font color='green'>Hello World</font></body>
</html>

2.2 常用标签

HTML参考手册：https://www.w3school.com.cn/tags/html_ref_byfunc.asp
特殊字符对照表：https://www.jb51.net/onlineread/htmlchar.htm

2.2.1 文本标签

注释：；
<h1> to <h6>：标题标签，字体大小逐渐递减；
<p>：段落标签；
<br>：换行标签；
<hr>：展示一条水平线；
<b>：字体加粗；
<i>：字体斜体；
<font>:字体标签；
<center>:文本居中；

<!DOCTYPE html>
<html lang="ch"><head><meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /><meta charset="UTF-8" /><title>学哥斌简介</title></head><body><h1>h1标题</h1><hr color="#FFD700" /><p>第一段，<font color="#FF0000">&quot;修改了字体&quot;</font><b><i>加粗斜体</i></b> 内容内容内容。</p><p>第二段，内容内容内容。</p><p>第三段，内容内容内容。</p><p>第四段，内容内容内容。</p><hr color="#FFD700" /><center><font color="gray" size="2">居中，修改字体颜色为灰色，大小为2<br />换了一行</font></center></body>
</html>

2.2.2 图片标签

img：展示图片，src：指定图片的位置。

<!--展示一张图片 img-->
<html><head><meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /><title></title></head><body><img src="wu.jpg" align="right" alt="找不到图片" width="500" height="500" />      <img src="timg.jpg" /> <img src="time2.jpg" /></body>
</html>

2.2.3 列表标签

有序列表：ol、li;
无序列表：ul、li

2.2.4 链接标签

<a>定义一个超链接，href指定访问路径，target指定打开方式。

<!--超链接  a-->
<html><head><meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /><title></title></head><body><a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579686808660&di=cbe0ea5b7d286ba904e28d755deff0af&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F170615%2F19502QV8-6.jpg">点我</a><br /><a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579686830952&di=5c038610d84a038c797698c0ac9409e9&imgtype=0&src=http%3A%2F%2Ffinance.gmw.cn%2Fattachement%2Fjpg%2Fsite2%2F20131231%2Feca86bd9e2ca142c8a6a44.jpg">点我</a><br /><a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579686849868&di=4c2e66a8d16a54f8cdbad4747f333998&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fb%2F7f%2F51d2484834.jpg" target="_blank">点我</a><br /><a href="./5_%C3%A5%C2%88%C2%97%C3%A8%C2%A1%C2%A8%C3%A6%C2%A0%C2%87%C3%A7%C2%AD%C2%BE.html">列表标签</a><br /><a href="mailto:itcast@itcast.cn">联系我们</a><br /><a href="https://www.baidu.com"><img src="timg.jpg" /></a></body>
</html>

2.2.5 div和span

div:每一个div占满一整行。块级标签；
span：文本信息在一行展示，行内标签，内联标签。

2.2.6 语义化标签

语义化标签没有具体功能，只是为了提高程序的可读性。如：
<header>：页眉；
<footer>：页脚。

2.2.7 表格标签

table：定义表格
tr：定义行
td：定义单元格
th：定义表头单元格
<caption>：表格标题
<thead>：表示表格的头部分
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

2.2.8 表单标签

表单是用于采集用户输入数据的，用于和服务器进行交互。<form></form>用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。属性action指定提交数据的URL，属性method指定提交方式是get还是post。
表单项标签input用与设置输入，属性type用于设置元素展示的样式。

input的type种类	说明
text	文本输入框，默认值。
password	密码输入框，输入值不可见。
radio	单选框，要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。一般会给每一个单选框提供value属性，指定其被选中后提交的值。checked属性，可以指定默认值。
checkbox	复选框，给每一个单选框提供value属性，指定其被选中后提交的值，checked属性，可以指定默认值。
file	文件选择框。
hidden	隐藏域，用于提交一些信息。
submit	按钮，用于提交表单。
button	普通按钮。
image	图片提交按钮，src指定图片的路径。

label指定输入项的文字描述信息。
select: 下拉列表；
textarea：文本域。

3、CSS

CSS（Cascading Style Sheets层叠样式表）用于和HTML结合，页面美化和布局控制。

3.1 使用方式

内联样式：在标签内使用style属性指定css代码，如<div style="color:red;">hello css</div>；
内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码，如：

<style>div{color:blue;}
</style>
<div>hello css</div>

外部样式：定义css资源文件，在head标签内定义link标签，引入外部的资源文件，如：

<!--a.css文件-->
div{color:green;
}<!--html文件-->
<link rel="stylesheet" href="a.css"><div>hello css</div><div>hello css</div>

3.2 语法

选择器 {属性名1:属性值1;属性名2:属性值2;...
}

3.3 选择器

3.3.1 基础选择器

id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一。#id属性值{}
元素选择器：选择具有相同标签名称的元素。标签名称{}
类选择器：选择具有相同的class属性值的元素。.class属性值{}
id选择器优先级高于元素选择器，类选择器选择器优先级高于元素选择器。

3.3.2 拓展选择器

选择所有元素：*{}
并集选择器：选择器1,选择器2{}
子选择器：筛选选择器1元素下的选择器2元素：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1：选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素：元素名称[属性名="属性值"]{}
伪类选择器：选择一些元素具有的状态：元素:状态{}

3.4 属性

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
background：背景
border：设置边框，符合属性
width：宽度
height：高度
margin：外边距
padding：内边距
left、right：浮动

[JavaWeb-04]HTML和CSS相关推荐

javaweb(04) xml
javaweb(04) xml xml简介什么是xml xml(eXtensible Markup Language) 是可扩展的标记性语言.xml的使命,就是以一个统一的格式,组织有关系的数据,为 ...
前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案响应式页面优化规范与模块化...
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
【java学习之路】（javaWeb篇）002.CSS
CSS样式概述:CSS[Cascading Style Sheets]全称层叠样式表. 理解:可以把HTML文件想向成是一个房子骨架,里面标签(块元素.行内元素)理解为搭建房子转,CSS负责美化房子 ...
JavaWeb（2）CSS
1.CSS 1. CSS的概念:Cascading Style Sheets:层叠样式表 2. CSS的使用:CSS与HTML结合的方式 (1)内联样式:在标签内使用style属性指定的CSS代码,不 ...
JavaWeb学习笔记之——CSS
CSS 文章目录 CSS 1.概念 2.CSS 的使用:CSS 与 html 结合方式 2.1.内联样式 2.2.内部样式 2.3.外部样式 3.CSS 语法 4.选择器:筛选具有相似特征的元素 4. ...
JavaWeb,利用HTML和CSS蛋糕商城注册页面实现------JAVA,JavaWeb入门基础教程
主页 <html><head><meta charset="UTF-8"></head><frameset rows=&quo ...
22-05-19 西安 javaweb(04) xml、DOM4J，Xpath、 tomcat应用服务器、HTTP协议
初识XML xml: eXtensible Markup Language 可扩展标记语言 xml文件声明版本号以及文档的字符编码 ,每一个xml配置文件都要有.也可以不写,因为每一个xml ...
尚硅谷JavaWeb笔记——HTML、CSS（后端补充前端知识，这些就够了）
文章目录 HTML语言学习 html语言规范 html标签简介单标签和双标签块元素与内联元素特殊字符表单源代码效果图关于表单的提交 CSS 标签选择器 ID选择器类型选择器组合选择器 ...
22-05-15 西安 javaweb(01) html 、css、javaScript
HTML超文本标记语言 1.html语法 1.标签的分类:双标签.单标签单标签的写法<>或</> html4必须加, html5可加可不加注意:双标签在其中 ...
CSS自学教程--一天搞定CSS（终篇总结）
虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...

[JavaWeb-04]HTML和CSS