【JavaWeb - 网页编程】一 HTML技术与CSS技术
2024-04-30 00:20:56
第一章 HTML技术与CSS技术
创作日期：2021-12-19
1.1 网页简述
1.1.1 B/S软件的结构
1.1.2 前端的开发流程
1.1.3 网页的组成部分
页面由三部分内容组成：
- 内容（结构）：我们在页面中可以看到的数据，使用 HTML 技术来展示
- 表现：指内容在页面上的展示形式，比如：颜色，布局，大小等等，使用 CSS 技术实现
- 行为：指的是页面中元素与输入设备交互的响应，使用 JavaScript 技术实现
1.2 HTML技术
1.2.1 HTML简介
Hyper Text Markup Language（超文本标记语言）简称：HTML。HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容如：文字处理，画面安排，图片显示等。
1.2.2 创建HTML页面
- 创建Web工程：
- 在Web工程下创建HTML文件：
- 运行HTML文件：
1.2.3 HTML的书写规范
<!DOCTYPE html><!-- 约束，声明 -->
<html lang="zh_CN"><!-- html标签表示html的开始 lang="zh_CN"表示中文 html标签中一般分为两部分，分别是：head和body -->
<head><!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码 --><meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 --><title>标题</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
hello
</body>
</html>1.2.4 HTML标签的介绍
- 标签的格式：<标签名>封装的数据</标签名>
- 标签名大小写不敏感
- 标签拥有自己的属性
- 基本属性：呈现大小，颜色，布局等
- 事件属性：触发事件等
- 标签分为单标签与多标签：
- 单标签格式：<标签名/>
- 双标签格式：<标签名>封装的数据</标签名>
1.2.5 HTML标签的语法
- 标签不能交叉嵌套：
- 标签必须正确关闭：
- 标签属性必须要有值，属性值必须加引号：
- 注释不能嵌套：
1.3 HTML常用标签介绍
1.3.1 font 字体标签
- font 标签是字体标签，它可以用来修饰文本的字体，颜色，大小（尺寸）
- color 属性修改颜色
- face 属性修改字体
- size 属性修改文本大小
- b 标签是字体加粗标签
- 需求：在网页上显示 "我是字体" 标签，并修改字体为 宋体，颜色为红色
<!-- 需求：在网页上显示 "我是字体标签" ，并修改字体为 宋体，颜色为红色，大小为7 -->
<body>
<font face="宋体" color="red" size="7"><b>我是字体标签</b></font>
</body>1.3.2 特殊字符
- 常用的特殊字符：
- <：<
- >：>
- 空格：
- 需求：把 <br> 换行标签 变成文本 转换成字符显示在页面上
<!-- 需求：把 <br> 换行标签 变成文本 转换成字符显示在页面上 -->
<body>
<br>是换行标签
</body>1.3.3 标题标签 h1
- h1 - h6 都是标题标签，由大到小
- align 属性是对齐方式属性
- left 是左对齐（默认对齐方式）
- center 是居中
- right 是右对齐
- 需求：演示标题1到标题6
<!-- 需求：演示标题1到标题6 -->
<body >
<h1 >标题一</h1>
<h2 align="left">标题二</h2>
<h3 align="center">标题三</h3>
<h4 align="center">标题四</h4>
<h5 align="right">标题五</h5>
<h6 align="right">标题六</h6>
</body>
1.3.4 超链接标签
- a 标签是 超链接标签
- href 属性是设置连接的地址
- target 属性是设置跳转方式
- _self：表示在当前页面跳转
- _blank：表示跳转到新的页面
- 需求：演示超链接
<!-- 需求：演示超链接 -->
<body >
<a href="https://www.baidu.com/" target="_self"><font color="#6495ed">百度一下</font>
</a>
<br>
<a href="https://www.taobao.com/" target="_blank"><font color="#cd5c5c">淘宝</font>
</a>
</body>1.3.5 列表标签
- ul 是无序列表标签
- type 属性可以修改列表项前面的符号是否显示
- li 是列表项标签
- 需求：使用无序列表方式展示 刘德华，张学友，郭富城，周瑞发
<!-- 需求：使用无序列表方式展示 刘德华，张学友，郭富城，周润发 -->
<body >
<ul type="none"><li>刘德华</li><li>张学友</li><li>郭富城</li><li>周润发</li>
</ul>
</body>1.3.6 img 标签
- img 标签是图片标签，用来显示图片
- src 属性可以设置图片的路径（绝对路径和相对路径）
- width 属性可以设置图片的宽度
- height 属性设置图片的高度
- border 属性设置图片边框的大小
- alt 属性设置在图片不存在时，用来替代显示的文本内容
- 需求：使用 img 标签显示一张图片，并修改其宽高和边框属性
<!-- 需求：使用 img 标签显示一张图片，并修改其宽高和边框属性 -->
<body >
<img src="photo/JavaWeb.jpeg" height="500" width="500" border="1" >
<img src="photo/Java.jpeg" alt="图片错误！">
</body>1.3.7 表格标签
- table 标签是表格标签
- cellspacing 属性设置单元格间距
- tr 标签是行标签
- th 标签是表头标签
- td 标签是单元格标签
- 需求：做一个 带表头的三行三列的表格，并显示边框，调整表格宽高与对其方式和单元格间距
<!-- 需求：做一个 带表头的三行三列的表格，并显示边框，调整表格宽高与对其方式和单元格间距 -->
<body >
<table align="center" border="1" width="200" height="200" cellspacing="0"><tr><th>1-1</th><th>1-2</th><th>1-3</th></tr><tr><th>2-1</th><th>2-2</th><th>2-3</th></tr><tr><th>3-1</th><th>3-2</th><th>3-3</th></tr>
</table>
</body>
- 跨行跨列表格
- colspan 属性设置跨列
- rowspan 属性设置跨行
- 需求：新建一个五行五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列
<!-- 需求：需求：新建一个五行五列的表格，第一行，第一列的单元格要跨两列
第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列 -->
<body >
<table align="center" border="1" width="500" height="500" cellspacing="0"><tr><th colspan="2">1-1</th><th>1-3</th><th>1-4</th><th>1-5</th></tr><tr><th rowspan="2">2-1</th><th>2-2</th><th>2-3</th><th>2-4</th><th>2-5</th></tr><tr><th>3-2</th><th>3-3</th><th>3-4</th><th>3-5</th></tr><tr><th>4-1</th><th>4-2</th><th>4-3</th><th rowspan="5" colspan="5">4-4</th></tr><tr><th>5-1</th><th>5-2</th><th>5-3</th></tr>
</table>
</body>
1.3.8 了解 ifarme 框架标签（内嵌窗口）
- ifarme 标签可以在A页面上嵌套B页面
- ifarme 标签和 a 标签组合使用的步骤：
- 在 ifarme 标签中使用 name 属性定义一个名称
- 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
- 需求：嵌套页面并与 a 标签结合进行页面的切换
<body >
<iframe src="hello2.html" width="500" height="500" name="htm1"></iframe><br/><br/>
<a href="hello2.html" target="htm1">跳转 html2 页面</a><br/><br/>
<a href="hello3.html" target="htm1">跳转 html3 页面</a><br/><br/>
<a href="hello4.html" target="htm1">跳转 html4 页面</a>
</body>1.3.9 表单标签
- form 标签是表单标签
- action 属性设置提交的服务器地址
- method 属性设置提交的方式GET（默认值）或POST
- GET 请求的特点
- 浏览器地址栏中的地址是：action 属性值?name=value&name=value...
- 不安全
- 它有数据长度的限制
- POST 请求的特点
- 浏览器地址栏中只有 action 属性值
- 相对于 GET 请求要安全
- 理论上没有数据长度的限制
- input 标签嵌套于 form 标签当中，规定了用户可以在其中输入数据的输入字段，用来声明允许用户输入数据的 input 控件，输入字段可通过多种方式改变，取决于 type 属性
- type 属性
- text 属性值代表文本输入框，value 设置默认显示内容
- password 属性值代表密码输入框， value 设置默认显示内容
- radio 属性值代表单选框，按照相同的 name 属性值进行单选框绑定
- checked 属性可设置默认选项
- checkbox 属性值代表复选框，checked 属性可设置默认选项
- reset 属性值代表重置按钮，value 属性可以修改按钮上的文本
- submit 属性值代表提交按钮，value 属性可以修改按钮上的文本
- button 属性值代表按钮，value 属性可以修改按钮上的文本
- file 属性值代表文件上传域
- hidden 属性值代表隐藏域用来发送默认，无需用户参与的信息
- select 标签用来创建下拉列表框
- option 标签是下拉列表框中的选项，selected 属性设置默认选中
- textarea 表示多行文本输入框
- rows 属性设置可以显示几行的高度
- cols 属性设置每行可以显示多少字的宽度
表单提交的时候，数据没有发送黑服务器的三种情况：
- 表单项没有 name 属性值
- 单选，复选（下拉列表中的 option 标签）都需要添加 value 属性
- 表单项不在提交的 form 标签中
- 需求：创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交。
<body >
<!-- 需求：创建一个个人信息注册的表单界面：包含用户名，密码，确认密码 -->
<!-- 包含性别（单选）兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交 -->
<form action="http://www.baidu.com" method="get"><h1 align="center">用户注册</h1><table align="center" ><tr><td>用户名称：</td><td><input type="text" name="name"></td></tr><tr><td>用户密码：</td><td><input type="password" name="password"></td></tr><tr><td>确认密码：</td><td><input type="password" name="Spassword"></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="girl" checked="checked">女</td></tr><tr><td>兴趣爱好：</td><td><input type="checkbox" name="hobby" value="sport">运动<input type="checkbox" name="hobby" value="Swimming">游戏<input type="checkbox" name="hobby" value="rade">阅读<input type="checkbox" name="hobby" value="music">唱歌</td></tr><tr><td>国籍：</td><td> <select name="country"><option selected="selected">---请选择国籍---</option><option value="cn">中国</option><option value="en">美国</option><option value="fr">法国</option><option value="ge">德国</option></select></td></tr><tr><td>自我评价：</td><td><textarea rows="10" cols="20" name="evaluate">填写内容</textarea></td></tr><tr><td>选择文件：</td><td><input type="file" name="file"></td></tr><tr><td>隐藏域：</td><td><input type="hidden" name="action" value="login"></td></tr><tr><td><input type="reset" name="reset"></td><td> <input type="submit" name="submit"></td></tr></table>
</form></body>
1.3.10 其他标签
- div 标签用来定义目录列表，默认独占一行
- span 标签用于对文档中的行内元素进行组合，没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化，默认长度为封装数据的长度
- p 段落标签，默认会在段落的上方或下方都有空行
- 需求：演示 div，span，p 标签的演示
<body>
<div>你好，世界</div>
<span>你好，世界，你好，中国</span>
<p>你好，世界</p>
</body>
1.4 CSS 技术
1.4.1 CSS 技术介绍
CSS 是【层叠样式表单】，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
1.4.2 CSS 语法规则
- 选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）
- 属性（property）：是将要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaraction）
- 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，最后一条声明的最后可以不加分号，一般一行只描述一个属性
- CSS 注释：/* 注释内容 */
1.4.3 CSS 与 HTML 的三种结合方式
- 第一种：在标签的 style 属性上设置："key：value value；"，修改标签样式
- 需求：分别定义两个 div，span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
<body>
<div style="border: 1px red solid" >div标签1</div>
<div style="border: 1px red solid">div标签2</div>
<span style="border: 1px red solid">span标签1</span>
<span style="border: 1px red solid">span标签2</span>
</body>
- 缺点：
- 如果标签多了，样式多了，代码量非常庞大
- 可读性非常差
- 代码没复用性
- 第二种：在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式
xxx{key : value value;
}
- 需求：分别定义两个 div，span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html1</title><!-- style 标签专门用来定义 css 样式代码 --><style type="text/css">div{border: 1px solid red;}span{border: 1px solid red;}</style>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
- 缺点：
- 只能在同一个页面内复用代码，不能在多个页面中复用 css 代码
- 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大
- 第三种：把 css 样式写成一个单独的 css 文件，在通过 link 标签引入即可复用，即使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css"/> 标签，导入 css 样式文件
- 需求：分别定义两个 div，span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html1</title><link rel="stylesheet" type="text/css" href="./css/hello.css"/>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
1.4.4 CSS 选择器
- 标签名选择器：
标签名{属性名:属性值;
}
- 需求：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素，边框为 1 像素黄色实现。并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素，边框为 5 像素蓝色虚线
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html1</title><link rel="stylesheet" type="text/css" href="./css/hello.css"/>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>/* CSS */
div{font-size: 30px;color: blue;border: 1px yellow solid;
}span{font-size: 20px;color: yellow;border: 5px yellow solid;
}
- id 选择器：
#id名{属性名:属性值;
}
- 需求：分别定义两个 div 标签，第一个 div 标签定义 id 为 div1 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，字体大小为 30 个像素，边框为 1 像素黄色实线。第二个 div 标签定义 id 为 div2 ，然后根据 id 属性定义 css 样式修改字体颜色为红色，字体大小为 20 个像素，边框为 5 像素蓝色点线
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html1</title><link rel="stylesheet" type="text/css" href="./css/hello.css"/>
</head>
<body>
<div id="div1">div标签1</div>
<div id="div2">div标签2</div>
</body>
</html>/* CSS */
#div1{font-size: 30px;color: blue;border: 1px yellow solid;
}#div2{font-size: 20px;color: red;border: 5px blue dotted;
}
- class 选择器（类选择器）：
.标签class值{属性名:属性值;
}
- 需求：修改 class 属性值为 class01 的 div 与 span 标签，字体颜色为蓝色，字体大小为 30 个像素，边框为 1 像素黄色实线。修改 class 属性值为 class02 的 div 与 span 标签，字体颜色为灰色，字体大小为 26 个像素，边框为 1 像素红色实线
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html1</title><link rel="stylesheet" type="text/css" href="./css/hello.css"/>
</head>
<body>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
<span class="class01">span标签1</span>
<span class="class02">span标签2</span>
</body>
</html>/* CSS */
.class01{font-size: 30px;color: blue;border: 1px yellow solid;
}.class02{font-size: 26px;color: #5b7472;border: 1px red solid;
}
- 组合选择器：组合选择器可以让多个选择器共用一个样式代码
选择器1,选择器2,选择器n{属性名:属性值;
}
- 需求：修改 class="class01" 的 div 标签 和 id = "id01" 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素边框为 1 像素黄色实线
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html1</title><link rel="stylesheet" type="text/css" href="./css/hello.css"/>
</head>
<body>
<span class="class01">span标签1</span>
<span id="id01">span标签2</span>
</body>
</html>/* CSS */
.class01,#id01{font-size: 20px;color: blue;border: 1px yellow solid;
}
1.4.5 CSS 常用样式
- 颜色：color，颜色可以写颜色名如：black，blue，red，green等，也可以写 rgb 值和十六进制表示值，如果写十六进制值必须加#
- 宽度：width，可以写像素值，也可以写百分比
- 高度：height，可以写像素值，也可以写百分比
- 背景颜色：background-color
- 字体样式：color（字体颜色），font-size（字体大小）
- 边框：border
- DIV居中：margin-left:auto;margin-right:auto
- 文本居中：text-align:center
- 超链接去下划线：text-decoration:none
- 边框合并：border-collapse:collapse
color:red;
color:rgb(255,0,0);
color:#00F6DE;
width:25px;
height:20%;
background-color:yellow;
font-szie:35px;
border:1px solid red;
margin-left:auto;
margin-right:auto;
text-align:center;
text-decoration:none;
border-collapse:collapse;下一节：
【JavaWeb - 网页编程】一 HTML技术与CSS技术相关推荐
- 网页开发基础，HTML、CSS技术、JavaScript基础
一.学习目标 1.HTML技术 2.CSS技术 3.JavaScript基础 二.重要知识点 1.HTML技术 超文本标记语言(英语:HyperText Markup Language,简称:HTML ...
- 【JavaWeb - 网页编程】八 JSP 动态网页技术
第八章 JSP 动态网页技术 创作日期:2021-12-27 8.1 JSP 介绍 JSP(全称JavaServer Pages)是一种动态网页技术标准.JSP部署于网络服务器上,可以 ...
- 网站为什么要css,在网页制作中为什么要使用CSS技术
*望采纳,谢谢 CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域, ...
- 【JavaWeb - 网页编程】五 XML 介绍
第五章 XML 介绍 创作日期:2021-12-24 5.1 XML 简介 5.1.1 什么是 xml xml 是可扩展的标记性语言 5.1.2 xml 的作用 用来保存数据,而且这些数据具有自我描述 ...
- 【JavaWeb - 网页编程】三 jQuery 类库
第三章 jQuery 类库 创作日期:2021-12-21 3.1 jQuery 介绍 jQuery,顾名思义,也就是 JavaScript 和 查询(Query)它就是辅助 Java ...
- HTML学生作业网页：网页设计期末作业 使用HTML CSS技术实现非遗文化网页设计题材【汉服文化—共12个页面】
- 网页设计css分析,基于CSS技术的网页制作实例分析
21世纪我国科学技术水平大幅提高,计算机网络技术成为了推动各行各业事业发展的助推器,可以利用计算机网络快速发布和获取信息,同样在人们的政治生活.经济生活等多个方面发挥着无可比拟的作用.网页设计与计算机 ...
- html如何实现表格效果,DIV+CSS技术实现类似table表格的效果
当前位置:网站首页 >> 网站技术 >> DIV+CSS技术实现类似table表格的效果 [发布人:站长之家 发布日期:2015-04-03] 表格在网页制作中使用非常广 ...
- css应用网页设计,CSS技术在网页设计中的运用
多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术,可对每一个HTML的 ...
最新文章
- java获取真实ip工具类
- Gitlab Webhooks, External Services, and API(一)
- php call_user_func和,php – call_user_func()和$var()之间有区别吗？
- boost::python模块显示如何使扩展类pickleable
- SAP CRM enterprise search change pointer注册场景之一 - 产品创建
- HDFS文件目录操作代码
- 【渝粤题库】陕西师范大学201491 法学导论作业
- windows 安装mongodb
- 【Windows Server 2019】文件共享，應該不支持 Everyone 訪問
- .net上传大文件不成功
- python的程序变量名_python中变量的名称和程序效率
- VBA技能：取整函数的使用
- 从零部署Linux服务器完全指南2022版(CentOS 8+Nginx+PHP)
- MAC电脑连接windows台式机
- Java IO模型：BIO、NIO、AIO讲解
- ROS与Web交互控制显示
- Unity3D开发之3D按钮的声音播放
- 自动控制原理2.2---控制系统的复数域数学模型
- 您必须应用的＃1规则永远不会在Twitter或Facebook上被骗
- 【程序源代码】表白墙-小程序