第一章：HTML && CSS

最新推荐文章于 2022-11-25 11:29:25 发布

PCC.

最新推荐文章于 2022-11-25 11:29:25 发布

阅读量657

点赞数

分类专栏： JavaWeb项目实战-商城购物系统文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_44278828/article/details/121873002

版权

JavaWeb项目实战-商城购物系统专栏收录该内容

40 篇文章 3 订阅

订阅专栏

本文主要介绍了HTML和CSS的基础知识。HTML作为网页内容的结构，CSS用于表现，JavaScript则负责页面交互。HTML是一种超文本标记语言，通过标签来定义网页结构，并有单标签和双标签之分。内容涵盖了HTML的基本标签，如字体、链接、列表、图片、表格、表单等，为网页制作提供了基础。

摘要由CSDN通过智能技术生成

1.1HTML入门

网页的组成部分：分别是内容（结构）【HTML】、表现【CSS】、行为【JavaScript】
1、内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用 html 技术来展示
2、表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现
3、行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现

HTML简介
Hyper Text Markup Language （超文本标记语言）简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

HTML文件的书写规范

<!DOCTYPE html><!--表示约束和声明-->
<html lang=zh_CN><!--zh_CN表示使用的是中文-->
<head><!--这里是页面的头部-->
    <meta charset="UTF-8"><!--表示使用UTF-8进行编码-->
    <title>Hello</title><!--这里是页面的标题-->
</head>
<body>
<!--这里面放的是页面的主体内容-->
你好，我回来了！
</body>
</html>

HTML标签介绍
1、标签的格式:<标签名>封装的数据</标签名>
2、标签名大小写不敏感
3、标签拥有自己的属性
（1）分为基本属性：bgcolor=“red” ，可以修改简单的样式效果
（2）事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码
4、标签又分为，单标签和双标签
（1）单标签格式： <标签名 />，如：换行标签（br）、水平线标签（hr）
（2）双标签格式: <标签名> …封装的数据…</标签名>

HTML的一些常用标签：
1、font标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.font标签.html</title>
</head>
<body>
	
	<!-- 字体标签 -->
	需求 1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。<br/>
	<!--color:表示修改颜色，face：表示修改字体，size：表示修改字体的大小（size最大是7），这是使用HTML来修改字体的样式，一般不推荐使用-->
	<!--样式的修改一般使用CSS-->
	<font color="red" face="宋体" size="5">我是字体标签</font>
</body>
</html>

2、HTML的特殊字符
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.特殊字符.html</title>
</head>
<body>
	
	<!-- 特殊字符 -->
	需求 1：把换行标签 变成文本 转换成字符显示在页面上<br/>
	<!--
	在HTML中常用的特殊字符有：
	1、<      &lt:意思是less than
	2、>      &gt:意思是gradethan
	3、空格    &nbsp:意思是牛逼的space键
	-->
    我是就是&ltbr&gt标签
</body>
</html>

3、标题标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.标题标签.html</title>
</head>
<body>
	
	<!-- 标题标签 -->
	需求 1：演示标题 1到标题 6
<!--
    标题标签使用h1 - h6来表示，h1最大，h6最小
    还有一个常用的标签就是：algin（对齐标签）
    algin有三个属性：
    1、left：左对齐
    2、center：居中
    3、right：右对齐
-->
	<div align="center">标签默认是左对齐，现在让它居中对齐</div>
	<h1 align="center">我是标题一</h1><br/>
	<h2 align="center">我是标题二</h2><br/>
	<h3 align="center">我是标题三</h3><br/>
	<h4 align="center">我是标题四</h4><br/>
	<h5 align="center">我是标题五</h5><br/>
	<h6 align="center">我是标题六</h6><br/>
</body>
</html>

4、超链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>4.超链接.html</title>
</head>
<body>

<!-- 超链接 -->
<!--超链接的使用：从当前页面跳转到百度
超链接的实现是靠a标签来完成的，关于a标签，主要有以下的属性：
1、href属性：指定页面跳转的地址，例如下面的由当前页面跳转到百度页面
2、target属性：
	（1）_self:表示在当前页面进行跳转
	（2）_blank:表示打开新的页面进行跳转
-->
<button>
    <a href="http://www.baidu.com">我是一个可以跳转到百度的按钮，没有设置跳转方式的情况之下默认是在当前窗口进行跳转</a>
</button>
<br/>

<button>
    <a href="http://www.baidu.com" target="_self">我是一个可以跳转到百度的按钮，_self表示跳转方式是在当前页面进行跳转
        默认的就是_self
    </a>
</button>
<br/>

<button>
    <a href="http://www.baidu.com" target="_blank">我是一个可以跳转到百度的按钮，_blank表示跳转方式是打开新的窗口进行跳转
    </a>
</button>
<br/>

</body>
</html>

5、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.列表标签</title>
</head>
<body>
需求 1：使用无序列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
<!--
无序列表使用<ul>标签：表示unorder list
无序列表行的前面默认是小圆点，其实是可以进行修改的，使用type属性进行修改：
常用的是：type = none，表示去除行前面的小圆点，按照这样的思路，其实无序列表只要修改type中的属性值，就能变成有序列表了
-->
这是无序列表的默认样式：
<ul>
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>

这是无序列表去除小圆点后的样式：
<ul type="none">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>

需求 1：使用有序列表方式，把东北 F4，赵四，刘能，小沈阳，宋小宝，展示出来
<!--
有序列表使用<ol>标签：表示order list
有序列表和无序列表的区别就是在创建列表的时候，有序列表会在行的前面加上数字
-->
<ol>
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ol>
</body>
</html>

6、img标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>5.img标签.html</title>
</head>
<body>
<!--
img标签可以在页面之上显示图片，此时需要使用到一个src属性，src就是用来告诉你图片在哪个位置的
关于位置有两个概念：相对路径、绝对路径
在JavaSE中：
1、相对路径：是从当前的工程名开始算的
2、绝对路径：盘符:/文件名/目录名，也就是我们常见的C:/Java/project这种表示方法

在JavaWeb中会有所不同，比如我们现在正在做的JavaWeb项目
1、相对路径：（我们从下面可以看出，相对路径是以当前文件作为对照的）
    （1）. :表示当前文件所在的目录
    （2）.. :表示当前文件所在的上一级目录
    （3）文件名 :表示当前文件所在的目录的文件，相当于./文件名，只不过./省略掉了
2、绝对路径：http://ip:port/工程名/资源路径
    （1）ip：表示IP地址，可以用localHost来代替
    （2）port：表示端口号

在显示图片的时候，可以在后面设置width属性值来改变图片的宽度，设置height属性值来改变图片的高度
还可以给图片加上边框效果，通过设置border的属性值来完成
如果当前图片显示不了，就会显示alt属性中内容
-->
需求 1：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性<br/>
<img src="../imgs/1.jpg" width="100" height="128" border="1" alt="图片找不到了哦"><br/>
<img src="../imgs/10.jpg" alt="图片找不到了哦"><br/>
</body>
</html>

7、表格标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表格标签</title>
</head>
<body>
需求 1：做一个带表头的 ，三行，三列的表格，并显示边框<br/>
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距<br/>

<!--在HTML中创建表格使用的是：
1、table标签
2、tr标签表示一行
3、th是表头标签(th标签其实就是将td标签中的内容加粗并居中而形成的，因为这种样式放在表头比较常见，所以干脆就直接做成了th标签）
4、td标签表示一个小格

设置单元格的间距使用：cellspacing属性：一般将单元格的间距设置为0，值得注意的是，单元格间距为0，指的是两个单元格的边挨在一起，宽度是两个像素
而不是直接重叠在一起
-->

<table border="1" width="300" height="300" align="center" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>

    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>

    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
</body>
</html>

8、跨行跨列表格

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>7.表格的跨行跨列</title>
</head>
<body>
需求 1：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四
列的单元格跨两行两列<br/>
<!--
	设置表格跨列使用属性：colspan:后面加数字，表示跨多少列
	设置表格跨行使用属性：rowspan:后面加数字，表示跨多少行
	需要注意的是：完成跨行之后，要删除相应的已经合并掉的格子
-->
<table align="center" border="1" cellspacing="0" width="300" height="300">
    <tr>
        <th colspan="2">1.1</th>
        <th>1.3</th>
        <th>1.4</th>
        <th>1.5</th>
    </tr>

    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>

    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>

    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>

    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
9、iframe标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>8.iframe标签.html</title>
</head>
<body>
ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面<br/>
我是一个完成的页面，但是我现在里面还有一个小的页面了<br/>
<!--还可以给里面的小页面设置大小等-->
<iframe width="300" height="300" name="come"></iframe>

<!--下面完成一个小功能：那就是通过点击a标签提供的链接，来在小窗口中实现跳转
    实现的方法是：
    1、在iframe标签中设置一个name属性，并为name属性赋值
    2、在a标签中设置跳转方式（target），将跳转的目的地指向name
    这个实现方法的巧妙之处就在于，利用了a标签中target的跳转目的地，只要给iframe赋上一个名字，就可以将a标签的页面跳转指向它
-->
<ul>
    <li><a href="3.标题标签.html" target="come">3.标题标签.html</a></li>
    <li><a href="2.特殊字符.html" target="come">2.特殊字符.html</a></li>
    <li><a href="1.font标签.html" target="come">1.font标签.html</a></li>
</ul>
</body>
</html>

10、表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表单标签</title>
</head>
<body>
需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。<br/>
隐藏域，自我评价（多行文本域）。重置，提交。<br/>

<!--
关于表单的一些使用方法：创建表单使用<form>标签
1、input标签表示输入框，根据输入框的类型不同，里面输入的内容也会相应不同：
  （1）type = text表示：输入的是文本，value里面的内容是输入框的默认值；
       【用户名称：<input type="text" value = "默认值"><br/>】

  （2）type = password表示：输入框输入的内容是密码，输入的内容将会不可见，对外显示为小圆点，在value中设置默认值；
       【用户密码：<input type="password" value="123"><br/>】

  （3）type = radio表示：输入框是单选框，如果要实现的效果是，选择性别只能是二选一时，要将【男】和【女】设置为同一组，这样才能实现二选一
      通过checked = checked设置当前单选框是默认选中的
       【 选择性别：<input type="radio" name="sex" checked = checked>男<input type="radio" name="sex">女<br/>】

  （4）type = checkbox表示：输入框是多选框，可以进行多个选择，checked = checked，表示当前选项是默认选中的
       【选择爱好：<input type="checkbox" checked = checked>java<input type="checkbox">C语言<input type="checkbox">Python<br/>】

2、下拉框的实现：使用<select>标签，<select>标签里面有<option>标签，是用来实现下拉框中的选项的，使用selected = selected来表示默认选中
       【<select>
    <option selected = selected>>请选择你的国籍：</option>
    <option>中国</option>
    <option>俄罗斯</option>
    <option>加拿大</option>
    <option>美国</option>
  </select><br/>】

3、文本输入框的实现：使用<textarea>标签，标签中的rows属性表示显示的行数，cols属性表示显示的列数，默认值就是写在文本框中的内容
       【自我评价：<textarea rows="10" cols="20">我就是默认值</textarea><br/>】

4、重置按钮：
  （1）功能；可以将表单中的内容重置为默认值；
  （2）实现：使用input标签，并将type属性设置为：reset，重置按钮的名称通过value属性进行修改
       【<input type="reset" value="重置"><br/>】

5、提交按钮
  （1）功能：将表单的内容进行提交
  （2）实现：使用input标签，并将type属性设置为：submit，重置按钮的名称通过value属性进行修改
       【<input type="submit" value="提交"><br/>】

6、隐藏域
  (1)功能：只有在表单提交的时候会一起提交给服务器，平时在页面是不可见的
  (2)实现：使用input标签，并将type属性设置为：hidden，内容通过value属性进行修改
       【input type = "hidden" value = "我是隐藏域中的内容"】

表单的格式化：实质上就是创建一个表格，将表单放入其中，表格一行有两个格子，一个放表单的名称，一个放表单的输入内容
-->

<form>
    <h2>这是没有格式化的用户注册表：</h2>
    用户名称：<input type="text" value="默认值"><br/>
    用户密码：<input type="password" value="123"><br/>
    确认密码：<input type="password"><br/>
    选择性别：<input type="radio" name="sex" checked=checked>男<input type="radio" name="sex">女<br/>
    选择爱好：<input type="checkbox" checked=checked>java<input type="checkbox">C语言<input type="checkbox">Python<br/>
    <select>
        <option selected=selected>>请选择你的国籍：</option>
        <option>中国</option>
        <option>俄罗斯</option>
        <option>加拿大</option>
        <option>美国</option>
    </select><br/>
    自我评价：<textarea rows="10" cols="20">我就是默认值</textarea><br/>
    <input type="reset" value="重置">
    <input type="submit" value="提交"><br/>
</form>


<form>
    <table align="center">
        <h2 align="center">这是经过格式化过后的用户注册表：</h2>
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"></td>
        </tr>

        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="123"></td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td><input type="password"></td>
        </tr>

        <tr>
            <td>选择性别：</td>
            <td>
                <input type="radio" name="sex" checked=checked>男
                <input type="radio" name="sex">女
            </td>
        </tr>

        <tr>
            <td>选择爱好：</td>
            <td>
                <input type="checkbox" checked=checked>java
                <input type="checkbox">C语言
                <input type="checkbox">Python
            </td>
        </tr>

        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option selected=selected>>请选择你的国籍：</option>
                    <option>中国</option>
                    <option>俄罗斯</option>
                    <option>加拿大</option>
                    <option>美国</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">我就是默认值</textarea></td>
        </tr>

        <tr>
            <td><input type="reset" value="重置"></td>
            <td><input type="submit" value="提交" align="right"></td>
        </tr>
    </table>
</form>
</body>
</html>

11、表单标签提交的细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11.表单提交的细节</title>
</head>

<!--
表单提交的有关事项：
1、要实现表单的提交，要在form标签中添加action和method属性
  （1）action表示：表单要提交到的地址
  （2）method表示：表单提交的方式，主要有两种表单的提交方式，get和post
2、要实现表单的提交还要给每一个提交项设置name属性，如要在用户名标签中设置name = username，这样才能完成提交，除此之外单选、复选框中的
选项还要添加value属性，这样服务器才知道发送的内容是什么

两种提交方式的特点：
1、get：
  （1）不安全，提交的信息会对外显示
  （2）有长度显示，如果提交的长度超过100个字节，就需要使用post进行提交
2、post
  （1）安全，看不见提交的信息；
  （2）理论上没有长度的限制
-->
<body>
<form action="http://www.baidu.com" method="post">
    <table align="center">
        <h2 align="center">这是经过格式化过后的用户注册表：</h2>
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值" name="username"></td>
        </tr>

        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="123" name="password"></td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="password"></td>
        </tr>

        <tr>
            <td>选择性别：</td>
            <td>
                <input type="radio" name="sex" checked=checked value="boy">男
                <input type="radio" name="sex" value="girl">女
            </td>
        </tr>

        <tr>
            <td>选择爱好：</td>
            <td>
                <input type="checkbox" checked=checked name="hobby" value="java">java
                <input type="checkbox" name="hobby" value="C语言">C语言
                <input type="checkbox" name="hobby" value="Python">Python
            </td>
        </tr>

        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option selected=selected value="none">>请选择你的国籍：</option>
                    <option value="中国">中国</option>
                    <option value="俄罗斯">俄罗斯</option>
                    <option value="加拿大">加拿大</option>
                    <option value="美国">美国</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20" name="desc">我就是默认值</textarea></td>
        </tr>

        <tr>
            <td><input type="reset" value="重置"></td>
            <td><input type="submit" value="提交" align="right"></td>
        </tr>
    </table>
</form>
</body>
</html>

12、一些常用的其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12.一些常用的其他标签</title>
</head>
<body>
<!--
1、div标签：默认是独占一行，无需手动换行
-->
<div>我是div标签，我默认独占一行</div>
<div>你看我在不在同一行</div>

<!--
2、span标签：span标签的长度就是它所封装的数据的长度
-->
<span>我是一个span标签</span><span>我是下一个span标签</span>

<!--
3、p标签：段落标签，默认会在段落的上方和下方各空出一行，如果已经有空行了，就不会再空
-->
<p>我是段落一</p>
<p>我是段落二</p>
</body>
</html>

PCC.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一章：HTML && CSS

1.1HTML入门网页的组成部分：分别是内容（结构）【HTML】、表现【CSS】、行为【JavaScript】1、内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用 html 技术来展示2、表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现3、行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现HTML简介Hyper Text Markup Language （超文本标记语言）简写：H
复制链接

扫一扫