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>