1、html 学习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-De0p73tU-1652713720130)(media/c5106bae1124db8fea545d2ab7280af3.png)]2、CSS 学习

课堂笔记：

1、B/S 软件的结构

JavaSE C/S Client Server B/S Browser Server

2、前端的开发流程

页面由三部分内容组成！

分别是内容（结构）、表现、行为。

内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用

html 技术来展示。

表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用

CSS 技术实现

行为，指的是页面中元素与输入设备交互的响应。一般使用javascript 技术实现。

4、HTML 简介

Hyper Text Markup Language （超文本标记语言）简写：HTML

通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

5、创建 HTML 文件。

2、在工程下创建 html 页面

第一个 html 示例：

注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。

6、HTML 文件的书写规范

<html> 表示整个 html 页面的开始

<head> 头信息

<title>标题</title> 标题

</head>

<body> body 是页面的主体内容页面主体内容

</body>

</html> 表示整个 html 页面的结束

Html 的代码注释

7、HTML 标签介绍

标签的格式:

<标签名>封装的数据</标签名>
标签名大小写不敏感。
标签拥有自己的属性。
1. 分为基本属性：bgcolor=“red” 可以修改简单的样式效果
2. 事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。
标签又分为，单标签和双标签。
1. 单标签格式： <标签名 /> br 换行 hr 水平线
2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ruSSkXYx-1652713720141)(media/c5106bae1124db8fea545d2ab7280af3.png)]双标签格式: <标签名> …封装的数据…</标签名>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pz9S7GEw-1652713720142)(media/9c55c18a0f95fc174f725fb5e29f4dff.jpeg)]

标签的语法：

正确：<div><span>早安，尚硅谷</span></div> 错误：<div><span>早安，尚硅谷</div></span>

<hr />

正确：<div>早安，尚硅谷</div> 错误：<div>早安，尚硅谷

<hr />

正确：<br />

错误：<br>

<hr />

正确：<font color=“blue”>早安，尚硅谷</font> 错误：<font color=blue>早安，尚硅谷</font> 错误：<font color>早安，尚硅谷</font>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQuGDTpr-1652713720142)(media/c5106bae1124db8fea545d2ab7280af3.png)]<hr />

正确： <br/>

错误： -->

<hr />

注意事项：

html 代码不是很严谨。有时候标签不闭合，也不会报错。

8、常用标签介绍文档：w3cschool.CHM

、font 字体标签

需求 1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。

、特殊字符

需求 1：把 <br> 换行标签变成文本转换成字符显示在页面上常用特殊字符表：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1g58pCaR-1652713720144)(media/50d450037a22da0313d494b37417c94b.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XKdk5kkS-1652713720144)(media/a374acb97ce237879ffa278d8aa8058c.jpeg)]

、标题标签

标题标签是 h1 到 h6

需求 1：演示标题 1 到标题 6 的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HFqESrAd-1652713720145)(media/c5106bae1124db8fea545d2ab7280af3.png)]、超链接（ **** 重点，必须掌握 * ）

在网页中所有点击之后可以跳转的内容都是超连接需求 1：普通的超连接。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YiW1ytx4-1652713720145)(media/a374acb97ce237879ffa278d8aa8058c.jpeg)]

、列表标签

无序列表、有序列表

需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FqJLFpgp-1652713720145)(media/c5106bae1124db8fea545d2ab7280af3.png)]、img 标签

img 标签可以在 html 页面上显示图片。

需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NycoJ6Hk-1652713720146)(media/c5106bae1124db8fea545d2ab7280af3.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dR32n3ht-1652713720146)(media/a374acb97ce237879ffa278d8aa8058c.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L05M5FTx-1652713720146)(media/1b354aa76246925b71cc88fc1d5268dc.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yeii7ZNL-1652713720146)(media/c5106bae1124db8fea545d2ab7280af3.png)]需求 1：做一个带表头的，三行，三列的表格，并显示边框

需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6slsdvFs-1652713720147)(media/c5106bae1124db8fea545d2ab7280af3.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6VN7gHFl-1652713720147)(media/a374acb97ce237879ffa278d8aa8058c.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JfcREUrn-1652713720147)(media/df57ec4156513d9cdf96356ee0a74384.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wq2WDAMn-1652713720148)(media/c5106bae1124db8fea545d2ab7280af3.png)]需求 1：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kymFeq2w-1652713720148)(media/a374acb97ce237879ffa278d8aa8058c.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jv2D4rUt-1652713720148)(media/c5106bae1124db8fea545d2ab7280af3.png)]、了解 iframe 框架标签 (内嵌窗口)

ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8eku7s5-1652713720149)(media/a374acb97ce237879ffa278d8aa8058c.jpeg)]

、表单标签（ ***** 重点，必须掌握 * ）

什么是表单?

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRoBrBDN-1652713720149)(media/ed9114fead50ce0b0ba28ecbfc9b6f09.jpeg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ehXHibTD-1652713720149)(media/c5106bae1124db8fea545d2ab7280af3.png)]需求 **1:**创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。

隐藏域，自我评价（多行文本域）。重置，提交。

表单的显示**

Javaweb-01.html和css相关推荐

22-05-15 西安 javaweb(01) html 、css、javaScript
HTML超文本标记语言 1.html语法 1.标签的分类:双标签.单标签单标签的写法<>或</> html4必须加, html5可加可不加注意:双标签在其中 ...
web前端-01：关于css居中的几种方法
web前端-01:关于css居中的几种方法在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
【java学习之路】（javaWeb篇）002.CSS
CSS样式概述:CSS[Cascading Style Sheets]全称层叠样式表. 理解:可以把HTML文件想向成是一个房子骨架,里面标签(块元素.行内元素)理解为搭建房子转,CSS负责美化房子 ...
【干货分享】前端面试知识点锦集01（HTML+CSS篇）—— 附答案
1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 参考答案构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格, ...
01.HTML和CSS基础知识总结（内附思维导图）
1.网页的基础认知 1-1.网页由那些部分组成文字.图片.音频.视频.超链接 1-2.网页背后的本质是什么前端程序员写的代码 1-3.前端的代码是通过什么软件转换成用户眼中的页面通过 ...
WEB前端学习笔记01利用纯CSS书写二级水平导航菜单
先放效果图: 将鼠标放置在对应一级导航处,即显示二级导航栏 HTML部分代码: <!DOCTYPE html> <html><head><meta chars ...
JavaWeb（2）CSS
1.CSS 1. CSS的概念:Cascading Style Sheets:层叠样式表 2. CSS的使用:CSS与HTML结合的方式 (1)内联样式:在标签内使用style属性指定的CSS代码,不 ...
JavaWeb 01 JavaWeb概述
1.B/S和C/S ⑴ 现在的软件开发的整体架构主要分为B/S架构与C/S架构: B/S:浏览器/服务器 C/S:客户端/服务器客户端:需要安装在系统里,才可 ...
JavaWeb学习笔记之——CSS
CSS 文章目录 CSS 1.概念 2.CSS 的使用:CSS 与 html 结合方式 2.1.内联样式 2.2.内部样式 2.3.外部样式 3.CSS 语法 4.选择器:筛选具有相似特征的元素 4. ...
01 html和css （前端基础第一天）
---恢复内容开始--- 1.HTML 第一天目标学习目标:- 了解常用浏览器- 掌握WEB标准- 理解标签语义化- 掌握常用的排版标签- 掌握常用的文本格式化图像链接等标签- 掌握三种列表标签- ...

Javaweb-01.html和css

页面由三部分内容组成！

标签的语法：

、特殊字符

、标题标签

、列表标签

表单的显示**

Javaweb-01.html和css相关推荐

最新文章

热门文章

Javaweb-01.html和css

页面由三部分内容组成！

标签的语法：

、特殊字符

、标题标签

、列表标签

表单的显示** insertAdIfNeeded();

Javaweb-01.html和css相关推荐

最新文章

热门文章

表单的显示**