啊啊嗯嗯
啊啊嗯嗯

（万字总结）JavaWeb零基础入门之HTML5、CSS3

引言

  1. B/S 软件的结构

    JavaSE C/S Client➡️Server

    B/S Browser➡️Server

    JavaEE项目 客户端：浏览器 服务器端：WEB浏览器

  2. 视频链接：https://www.bilibili.com/video/BV1Y7411K7zz?p=1

  3. 参考手册：https://www.w3school.com.cn/html5/index.asp

  4. 学完时候学习Java Web零基础入门之JavaScript

HTML

一、网页的组成部分

  1. 内容：网页中可以看到的数据，使用HTML技术实现
  2. 表现：内容在页面上的展示形式，如布局、颜色等，使用CSS技术实现
  3. 行为：页面中元素与输入设备交互的响应，使用javascript 技术实现

二、HTML简介

  1. 名称：Hyper Text Markup Language (超文本标记语言)
  2. 简介：HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通 过在文本文件中添加标签，可以告诉浏览器如何显示其中的内容

三、创建HTML文件

  1. 创建一个Web工程（静态的Web工程）

    File➡️new➡️Project➡️Static Web➡️Finish

  2. 在工程下创建html页面

    File➡️new➡️HTML File

  3. 选择浏览器运行

    注意：java文件需要先编译，再由java虚拟机跑起来，而HTML文件无需编译，直接由浏览器进行解析执行

四、HTML文件的书写规范

  1. HTML中注释的写法：

  2. HTML文件最基本的要素：

     
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    head>
<body>
		<h1>这是身体h1>
body>
html>

  3. 要素详解：

    1. 告诉浏览器当前HTML是用什么版本编写的，html标签表示HTML的开始

    2.向搜索引擎表示该页面是html语言，并且语言为英文网站，其lang的 意思就是“language”的意思，而en即表示english，如果需要的是中文页面，可将其改为zh_CN

    3.表示头部信息，一般包含三部分内容：title标签，css样式，js代码

    4.表示当前页面使用UTF-8字符集

    5.表示浏览器标签页的标题

    6.表示头部信息结束

    7.标签中的内容是整个html页面显示的主体内容

    9.主体内容结束

    10.表示整个HTML页面结束

五、HTML标签介绍

  1. 标签的格式：<标签名>标签中的内容

  2. 标签名不区分大小写

  3. 标签可以拥有自己的属性

    • 基本属性：可以修改简单的样式效果
  • 事件属性：可以设置事件响应后的代码

  1. 标签分为单标签和双标签，单标签中
    代表换行，

    代表水平线
    （万字总结）JavaWeb零基础入门之HTML5、CSS3_第1张图片

  2. 标签的语法(HTML代码有时标签不闭合也不报错)：

    1.标签不能交叉嵌套
正确:<div><span>早安span>div>
错误:<div><span>早安div>span>

2.标签必须正确关闭
i.有文本内容的标签:
正确:<div>早安div>
错误:<div>早安
ii.没有文本内容的标签:
正确:<br/>
错误:<br>

3.属性必须有值且属性值必须加双引号
正确:<font color="blue">早安font>
错误:<font color=blue>早安font>
错误:<font color>早安font>

4.注释不能嵌套
正确:
错误:

    代码演示：基本的HTML要素的使用

    
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页title>
head>
<body bgcolor="#deb887"> 
    hello!这是我的第一个网页！
    <hr/>
    有一个按钮
    <br/>
    <button onclick="alert('提示！')">按钮button>
    
body>
html>

六、常用标签介绍

1.font字体标签

可以用来修改文本的字体、颜色、大小等，常用的属性：

  • color属性：修改字体颜色
  • face属性：修改字体
  • size属性：修改字体大小

代码示例：在网页上显示：我是字体标签，并修改字体为宋体，颜色为红色


<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>字体标签的测试title>
head>
<body>
    我是字体标签font>
body>
html>

2.特殊字符：

字符实体有三部分：一个和号 (&)，一个实体名称(或者 # 和一个实体编号)，以及一个分号

最常用的字符实体

显示结果 描述 实体名称 实体编号
空格    
< 小于号 < <
> 大于号 > B
& 和号 & &
" 引号 " "
’ 撇号 &apos (IE不支持) '

其他的一些常用的字符实体

显示结果 描述 实体名称 实体编号
¢ 分 ¢ ¢
£ 镑 £ £
¥ 日圆 ¥ ¥
§ 节 § §
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷

代码示例：把换行单标签以文本的形式输出在页面中，并演示空格的使用

				    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符的使用title>
head>
<body>							
    < br >
body>
html>

注意：如果未使用特殊字符则HTML对于连续的空白字符（如回车、制表等）只保留一个空格

3.

to

标题标签:

标题标签是从h1到h6，h1最大，h6最小，其中的属性：

  • align属性是对齐属性，其值：
    • left 左对齐(默认)
    • center居中对齐
    • right右对齐

注意：HTML会自动的在标题上下添加一个空行

代码示例：演示标题的不同等级


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签title>
head>						
<body>
    <h1 align="left">标题1h1>
    <h2 align="right">标题2h2>
    <h3 align="center">标题3h3>
    <h4 >标题4h4>
    <h5 >标题5h5>
    <h6 >标题6h6>
body>
html>

4.超链接标签：

网页中点击之后可以跳转的内容，a标签代表超链接，其中的属性：

  • href属性设置链接的地址
  • target属性可以定义被链接的内容在何处显示：
    • _self 属性值表示链接在当前页面中打开(默认)
    • _blank属性值表示链接在新页面中打开

代码示例：演示超链接的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的测试title>
head>
<body>
    <a href="http://www.google.com">谷歌a><br/>
    谷歌_selfa><br/>
    谷歌_targeta><br/>
body>
html>

5.
  • 列表标签

  • ul标签是无序列表，ol标签是有序列表
    type属性可以修改列表前面的符号
  • li标签是列表项

代码示例：演示列表标签的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签的使用title>
head>
<body>
    <ol type="none">
        <li>周杰伦li>
        <li>昆凌li>
        <li>海瑟薇li>
    ol>						  
    <ul type="none">
        <li>周杰伦li>
        <li>昆凌li>
        <li>海瑟薇li>
    ul>
body>
html>

6.图片标签(单标签)：

可以在html页面上显示图片

  1. src属性可以设置图片的路径：
    • 相对路径：
      • . 表示当前文件所在的目录
      • …表示当前文件所在的上一级目录
      • /表示进入目录或打开文件
    • 绝对路径：
      http://ip:端口号/工程名/资源路径
  2. width属性可以设置图片的宽度
  3. height属性可以设置图片的高度
  4. border属性可以设置图片边框大小
  5. alt属性可以设置当指定路径找不到图片时，用来代替图片显示的文本内容

代码示例：演示img标签的使用
5.jpg在My Test文件夹下的photo文件夹下
19.jpg在My Test文件夹下
17.jpg在MyTest文件夹的上层目录下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片代码演示title>
head>
<body>
    <img src="19.jpg" border="1" height="200" width="200"/>
    <img src="./photo/5.jpg" alt="图片找不到"/>
    <img src="../17.jpg" alt="图片找不到"/>
body>
html>

7. 表格标签
  1. table标签是表格标签
    • border属性设置表格最外层边框的大小，如果不设置或值为0则无表格外层边框，亦无单元格边框，仅有数据，且按照表格方式排列
    • width属性设置表格宽度
    • height属性设置表格高度
    • align属性设置表格相对于页面的对齐方式
    • cellspacing属性设置单元格间距，设置为0单元格的边重叠，会加粗
    • cellpadding属性设置单元格内容距离单元格边框的距离大小
  2. tr标签是行标签，其中的内容都在一行
  3. th标签是表头标签，其中的内容在单元格中(自动的加粗并居中)
  4. td标签是单元格标签，其中的内容在单元格中，写几个td标签一行中就有几个单元格
  5. align属性设置单元格文本对齐方式
  6. b标签是加粗标签

代码示例：演示制作一个两行三列的表格


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签测试title>
head>
<body>
    
    <table align="center" border="10" width="30" height="30" cellspacing="5">
        <tr>
            <th>1.1th>
            <th>1.2th>
            <th>1.3th>
        tr>					    
        <tr>
            <td><b>2.1b>td>
            <td align="center">2.2td>
            <td>2.3td>
        tr>
    table>
body>
html>

8. 跨行跨列表格

单元格的 colspan属性设置跨几列rowspan属性设置跨几行

代码示例：演示表格跨行跨列


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列测试title>
head>
<body>
    <table border="1">
        <tr>
            <td colspan="2">1.1td>
            <td>1.3td>
        tr>
        <tr>
            <td rowspan="2">2.1td>
            <td>2.2td>
            <td>2.3td>			  
        tr>
        <tr>
            <td>3.2td>
            <td>3.3td>
        tr>
    table>
body>
html>

9.