本文详细介绍了HTML的基本结构和常见标签，包括内容、表现和行为的区分，以及字体、链接、列表、图片、表格等元素的使用。同时，讲解了CSS的基础知识，如选择器、样式声明和结合HTML的方式，展示了如何通过CSS控制网页样式。此外，还涵盖了表单元素及其提交细节，以及CSS中的字体颜色、尺寸、边框等样式属性。
1.B/S
软件的结构
JavaSE C/S Client Server
JavaEE B/S Browser（浏览器） Server（服务器）
2.页面由三部分内容组成！
分别是内容（结构）、表现、行为。
内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现
行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。
3**、HTML** 简介
Hyper Text Markup Language （超文本标记语言） 简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画
面如何安排，图片如何显示等）.
-
创建 HTML 文件。略（注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。）
-
HTML 文件的书写规范
<html> 表示整个 html 页面的开始
<head> 头信息
标题
</head>
<body>body 是页面的主体内容
页面主体内容
</body>
</html> 表示整个 html 页面的结束
Html 的代码注释
<!-- 这是 html 注释，可以在页面右键查看源代码中看到 -->
6.HTML 标签介绍
1.标签的格式: <标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性：bgcolor="red" 可以修改简单的样式效果
ii. 事件属性： οnclick="alert('你好！');" 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
i. 单标签格式： <标签名 />
br 换行 hr 水平线
ii. 双标签格式: <标签名> ...封装的数据...</标签名>
标签的语法：
<!-- 标签不能交叉嵌套 -->
<!-- 属性必须有值，属性值必须加引号 -->
<!-- 注释不能嵌套 -->
7.1 font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸**)
color 属性修改颜色； face 属性修改字体； size 属性修改文本大小
例：<font color**="red"** face**="宋体"** size**="7">我是字体标签</font**>
7.2 特殊字符
常用的特殊字符**:
<!-- 特殊字符 < ----- < > ----- > 空格 --- -->
-
3标题标签
标题标签是 h1 到 h6
<!-- 标题标签 align 属性是对齐 left 左对齐 center 居中 right 右对齐 -->
7.4超链接 （ ** 重 点 ，必 须 掌 握 * ）
<!-- a标签是 超链接 href属性设置连接的地址 target属性设置那个目标进行跳转 _self 当前页面 _blank 打开新页面 -->
-
7.5列表标签
无序列表 、 有序列表
ul 是无序列表 type 属性可以修改列表项前面的符号 li 是列表项
7.6img 标签
img 标签可以在 html 页面上显示图片。
<!--img标签是图片标签，用来显示图片 src属性可以设置图片的路径 width属性设置图片的宽度 height属性设置图片的高度 border属性设置图片边框大小 alt属性设置当指定路径找不到图片时，用来代替显示的文本内容 在JavaSE中路径分为相对路径和结对路径 相对路径：从工程名名开始算 绝对路径：盘符:/目录/文件名 web中路径分为相对路径和结对路径 相对路径： . 表示当前文件所在的目录 .. 表示当前文件所在的上一级目录 文件名 表示当前文件所在的目录的文件 绝对路径： http://ip:port/工程名/文件名
7.7表格标签（ ** 重点，必须掌握 * ）
<!-- table 标签是表格标签 border 设置表格边框 width 设置表格宽度 height 设置表格高度 align 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距 tr 行标签 th 表头标签 td 单元格标签 align 设置单元格文本对齐方法 b 加粗标签 -->
7.8跨行跨列表格 （* 次重点，必须掌握 ***）**
<!-- colspan 属性设置跨行 rowspan 属性设置跨列 -->
7.9了解 iframe 框架标签 (**内嵌窗口)**
ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.
<!-- iframe标签可以在页面上开辟一个小区域显示一个单独的页面 iframe和a标签组合使用的步骤 1 在iframe标签中使用name属性来定义一个名称 2 在a标签的target属性上设置iframe的name的属性值 -->
7.10表单标签 （ *** 重点 ，必须掌握 * ）
什么是表单? 表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
表单格式化：略
<!-- form标签是表单 input type="text" 是文本输入框 value设置默认显示内容 input type="password" 是密码输入框 value设置默认显示内容 input type="radio" 是单选框 name属性可以对其进行分组 checked="checked" 表示默认选中 input type="checkbox" 是复选框 checked="checked"可用多个 input type="reset" 是重置按钮 value属性修改按钮上的文本 input type="submit" 是提交按钮 value属性修改按钮上的文本 input type="button" 是按钮 value属性修改按钮上的文本 input type="file" 是文件上传域 input type="hidden" 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的 时候同时发送给服务器） select 标签是下拉表款 option 标签是下拉列表框中的选项，selected="selected" 设置默认选中 textarea 标签表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置可以显示几个字符的宽度 -->
表单提交细节**:**
form标签是表单 action属性设置提交的服务器地址 method属性设置提交的方式GET(默认值) 或POST 表单提交的时候，数据没有发给服务器的三种情况 1.表单项没有name属性值 2.单选，复选（下拉列表中option标签）都要添加value属性，以便发给服务器 3.表单项不在提交的form标签中 GET请求的提点 1.浏览器地址栏的地址是 ：action属性【+？+请求参数】 请求参数的格式是：name=value&name=val 2.不安全 3.有数据长度的限制 POST请求的提点 1.浏览器地址栏的地址是只有action属性 2.不安全 3.没有数据长度的限制 -->
7.11其他标签
<!-- div标签 默认独占一行 span标签 它的长度是封装数据的长度 p段落标签 默认在段落的上方或下方和空出一行来（已有不在空） -->
CSS 技术介绍
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
注：一般每行只描述一个属性 CSS 注释：/注释内容/
2.3 CSS 和 HTML 的结合方式
前两种不介绍了
样式三：把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
<!--link标签专门用来引入css样式代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1..css">
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
css文件
div{
border: 1px solid red;
}
span{
border: 1px solid black;
}
3CSS 选择器
1、标签名选择器**
标签名选择器的格式是：
标签名{
属性：值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式。
2、**id** 选择器
id 选择器的格式是：
#id 属性值{
属性：值;
}
id 选择器，可以让我们通过 id 属性选择性的去使用这个样式
3、class** 选择器（类选择器）
class 类型选择器的格式是：
.class 属性值{
属性：值;
}
class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。
4、组合选择器**
组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码
4.常用样式：
1、字体颜色
color：red； 颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必 须加#
2、宽度
width:19px; 宽度可以写像素值：19px； 也可以写百分比值：20%；
3、高度height:20px; 高度可以写像素值：19px； 也可以写百分比值：20%；
4、背景颜色 background-color:#0F2D4C
4、字体样式： color：#FF0000；字体颜色红色 font-size：20px; 字体大小
5、红色 1 像素实线边框 border：1px solid red;
7、DIV 居中
margin-left: auto; margin-right: auto;
8、文本居中：
text-align: center;
9、超连接去下划线
text-decoration: none;
10、表格细线
table {
border: 1px solid black; /设置边框/
border-collapse: collapse; /将边框合并/
}
td,th {
border: 1px solid black; /设置边框/
}
11、列表去除修饰
ul {
list-style: none;
}
扫一扫
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
