HTML 和 CSS
网页的组成部分
页面由三部分内容组成！
分别是内容（结构）、表现、行为。
内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现。
行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。
HTML简介
Hyper Text Markup Language （超文本标记语言）
简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件， 通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画 面如何安排，图片如何显示等）
创建HTML文件
1.创建一个静态web项目
2、在工程下创建 html 页面
- 第一个HTML示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
hello
</body>
</html>
注意：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。
HTML文件的书写规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
页面主题内容
</body>
</html>
HTML 标签介绍
- 常用的标签介绍
标签的语法
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早上好</span></div>
错误：<div><span>早上好</div></span> <hr />
<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<div>早安，尚硅谷</div>
错误：<div>早安，尚硅谷 <hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />
错误：<br> <hr />
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">上午好</font>
错误：<font color=blue>上午好</font>
错误：<font color>上午好</font> <hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!-- <!-- 这是错误的 html 注释 --> --> <hr />
注意事项：
- html 代码不是很严谨。有时候标签不闭合，也不会报错。
8、常用标签介绍
8.1 标题标签
标题标签是 h1 到 h6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 标题标签
需求 1：演示标题 1 到 标题 6
h1 - h6 都是标题标签
h1 最大 h6 最小
align 属性是对齐属性
left 左对齐(默认)
center 居中
right 右对齐 -->
<h1 align="left">标题 1</h1>
<h2 align="center">标题 2</h2>
<h3 align="right">标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<h7>标题 7</h7>
</body>
</html>
8.2 超链接（重 点）
在网页中所有点击之后可以跳转的内容都是超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- a 标签是 超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转 -->
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度_self</a><br/>
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/>
</body>
</html>
8.3 列表标签
列表标签有：无序列表 和 有序列表
- 需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：使用无序，列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
ul 是无序列表
type 属性可以修改列表项前面的符号
li 是列表项 -->
<ul type="none">
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
</body>
</html>
8.4 img 标签
img 标签可以在 html 页面上显示图片
需求 1：使用 img 标签显示一张照片。并修改宽高，和边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：使用 img 标签显示一张照片。并修改宽高，和边框属性
img 标签是图片标签,用来显示图片
src 属性可以设置图片的路径
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容
在 JavaSE 中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在 web 中路径分为相对路径和绝对路径两种
相对路径: . 表示当前文件所在的目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
绝对路径:
正确格式是: http://ip:port/工程名/资源路径
错误格式是:
盘符:/目录/文件名 -->
<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>
</html>
版权声明：本文为weixin_46113888原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。