前端-HTML

poixao

已于 2022-10-21 17:37:48 修改

阅读量1.1k

点赞数 3

分类专栏： Java Web 文章标签： java 开发语言后端

于 2022-03-02 22:41:42 首次发布

本文链接：https://blog.csdn.net/zyy130988/article/details/123217949

版权

Java Web 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML文件不需要编译，直接由浏览器进行解析执行
在这里插入图片描述
HTML的标签说明

HTML标签用两个尖括号"<>"括起来
HTML标签一般是双标签，如<b>和/<b/>前一个标签是起始标签,后一个标签为结束标签
两个标签之间的文本是html元素的内容
某些标签称为"单标签"",因为它只需单独使用就能完整地表达意思,如<br/> <hr/>
HTML元素指的是从开始标签到结束标签的所有代码。

HTML标签使用细节

标签不能交叉嵌套
标签必须正确关闭
注释不能嵌套
html语法不严谨。有时候标签不闭合，属性值不带""也不报错

常用的标签

字体标签

color属性修改颜色
face属性修改字体
size 属性修改文本大小

<font color="#dc143c" size="7" face="宋体">北京</font>

字符实体
常用的特殊字符:
5. < : <
6. > : >
7. 空格:  

标签标题

h1 - h6都是标题标签 h1 :最大h6 :最小
align:属性是对齐属性
left:左对齐(默认)
center :居中
right : 右对齐

超链接标题

a标签是超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
- _self :表示当前页面(默认值) 即使用当前页替换跳转页
- _blank :表示打开新页面来进行跳转
在跳转时，如果触发了事件或函数，返回的是false就会放弃跳转

无序列表
ul/li基本语法

<body>
<!--
    ul :表示无序列表
    li :列表项
    type属性:指定列表项前的符号
-->
<ul type="属性值">
    <li><列表内容</li>
   	<li><列表内容</li>
   	......
</ul>
</body>

有序列表
ol/li基本语法

<body>
<!--
    ol :表示有序列表
    li :列表项
    type属性:指定列表项前排序方式
    type设定数目款式，其值有五种，默认为start="1”
    i可以取以下值中的任意一个:
    1 阿拉伯数字1，2，3,...
    a 小写字母a,b,C,.….
    A 大写字母A，B，C,...
    i 小写罗马数字i, ii, iii, ...
    I 大写罗马数字Ⅰ，II，III, ...
-->
<ol type="属性值">
    <li></li>
    <li></li>
    ......
</ol>
</body>

图像标签

<body>
<!--
    img:标签是图片标签,用来显示图片
    src:属性可以设置图片的路径
    width:属性设置图片的宽度
    height:属性设置图片的高度
    border:属性设置图片边框大小
    alt:属性设置当指定路径找不到图片时,用来代替显示的文本内容
-->
<img src="图片路径" width="100"></br>

表格标签

<body>
<!--
说明:
    table: 标签是表格标签
    border: 设置表格标签(表格线粗度)
    bordercolor:  表格线颜色
    cellspacing: 设置单元格间距
    bgcolor: 背景颜色
    align: 设置表格相对于页面的对齐方式
    width: 设置表格宽度
    height: 设置表格高度
    tr: 是行标签  th: 是表头标签  td: 是单元格标签
    align: 设置单元格文本对齐方式  b: 是加粗标签
    px: 表示像素
-->
<table border="1" cellspacing="1" bgcolor="#f0f8ff" bordercolor="blue">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        ...
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        ...
    </tr>
    <tr>
   		 ...
    </tr>
</table>
</body>

跨行跨列标签

<body>
<!--
说明:
    合并列: colspan="列数"
    合并行: rowspan="行数"
    cellspacing :指定单元格间的空隙大小:0表示没有空隙
    bordercolor:指定表格边框的演示
    border:表格边框
    width:表格的宽度
-->
<table>
    <tr>
    	<!--合并前3列-->
        <td colspan="3">第1行第1列</td>  
    </tr>
    <tr>
    	<!--合并前2行-->
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>

表单标签

action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST
表单提交的时候，数据没有发送给服务器的三种情况:
(1)表单项没有name属性值
(2)单选、复选（下拉列表中的option标签）都需要添加 value属性，以便发送给服务器
(3)表单项不在提交的form标签中

Get 和Post 的区别简述

Get请求数据是显示在浏览器地址栏
Get请求不安全的，而且数据是有长度限制的，建议有重要信息，不要使用Get
Post请求数据是和http传输的，在http体中，相对安全
Post传输的数据长度理论上没有限制，但是在实际的应用中，也不能太大

注意

表单所有标签必须带上name属性，否则后端接收不到提交的数据
radio、checkbox、select 提交的数据是 value 属性
text、password 提交的数据是 value 属性，可以通过 value 属性设置默认值
submit、reset 提交的数据是 value 属性，可以通过 value 属性设置按钮文本
textarea 不用设置 value 属性
单选: request.getParameter("name属性"); 返回字符串
多选: request.getParameterValues("name属性"); 返回字符串数组

输入框
<input type="text" name="username" > 输入的内容保存在value中
密码框
<input type="password" name="pwd"> 输入的内容保存在value中
单选框
<input type="radio" name="gender" value="male">
多选框
<input type="checkbox" name="sport" value="lq">

5.下拉列表框  <select name="city">
        <option>--请选中--</option>
        <option value="wh">武汉</option>
        </select>

多行文本输入框
<textarea name="comment" rows="4" cols="25">
文件上传按钮
<input type="file" name="myfile>
隐藏域
<input type="hidden"name="add " value="hoge@hoge.jp">
提交按钮
<input type="submit" value="登录> 不管是submit还是button，如果触发了事件或函数，返回的是false就会放弃提交
重置按钮
<input type="reset" value="重新填写">

<!--
<body>
<!--
    1. form表示表单
    2. action:提交到哪个页面
    3. method:提交方式 ,常用get 和 post
    4. input type=text 输入框
    5. input type=password 密码框
    6. input type=submit 提交按钮
    7. input type=reset 重置按钮

    为了个汉字对齐，输入全角的空格即可
    多说一句: method 不写默认是get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
    用户名:<input type="text" name="username"> <br/>
    <!--把输入法切换成全角，然后中间打空格，就可以对齐-->
    密　码:<input type="password" name="password"> <br/>
    <input type="submit" value="登录">
    <input type="reset" value="重新填写">
</form>
</body>
-->

一定要给input元素设置name属性，否则，数据提交不到服务器
注意: checkbox是复选框，如果希望是同一组，保证name属性一致
注意: radio是单选框,如果希望是用一组，保证name属性一致
注意:在checkbox select radio提交数据的时候是value属性的值

<!--
    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属性设置每行可以显示几个字符宽度
-->
   <select name="city">
        <option>--请选中--</option>
        <option value="wh">武汉</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="gg">广州</option>
    </select><br/>
  
    自我介绍
    <textarea name="comment" rows="4" cols="25"></textarea><br/>

div标签

<!--
    1. <div>标签可以把文档分割为独立的、不同的部分
    2. <div>是一个块级元素。它的内容自动地开始一个新行，不需要写<br/>
    style :样式
    在实际的前端开发中，会存在很多div标签,div标签包含div标签
-->
hello wrold
<div>
    <h3 style="color: blue"> this is a h3</h3>
    <a href="http://www.baidu.com">goto baidu</a>
</div>

p标签

<body>
<!--
    1.<p>标签定义段落
    2. p元素会自动在其前后创建一些空白
-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>

span标签

<!--
    1. span标签是内联元素，不像块级元素（如: div标签、p标签等）有换行的效果。
    2．如果不对span应用样式，span标签没有任何的显示效果
    3．语法:<span>内容</span>

    (1) span标签是内联元素(内嵌元素，行内元素)，没有换行效果
    (2)如果不对span应用样式，span标签没有任何的显示效果
    (3)往往是为了单独的去控制某个关键的内容

-->
您的购物车有<span style="color: crimson;font-size: 40px" >10</span>件商品

网页的组成

在这里插入图片描述

浏览器访问http://localhost/hello.html 通过 http请求向后端访问，后端接收到请求后，将请求到的html文件发送回浏览器，浏览器此时解析html文件，才能判断返回的html文件是否存在问题

后端不会解析前端文件，对于后端来说，前端文件只是一个文件，后端是无法检测前端文件是对是错，并且对后端来说前端文件是对是错都无所谓
在这里插入图片描述

创建

在这里插入图片描述

HTML快捷键

项目	Value

HTML文档类型说明

在这里插入图片描述

HTML常用标签

HTML标签说明

在这里插入图片描述

HTML标签使用细节

在这里插入图片描述

字体标签

在这里插入图片描述

<body>
<!--字体标签
    应用实例1:在网页上显示北京，并修改字体为微软雅黑，颜色为蓝色。
    font标签是字体标签,它可以用来修改文本的字体,颜色，大小(尺寸)
    (1)color属性修改颜色
    (2)face 属性修改字体
    (3)size属性修改文本大小
-->
    <font color="#dc143c" size="7" face="宋体">北京</font>
</body>

字符实体

在网页上显示一些特殊的符号，称为字符实体(也叫符号实体)。
在这里插入图片描述

<!--特殊字符应用实例;
    把<hr/>变成文本 显示在页面上
    常用的特殊字符:
    < : &lt;
    > : &gt;空格: &nbsp;
-->
<hr/>
&lt;hr/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;zyy
</body>

在这里插入图片描述

标签标题

标题使用<h1> - <h6>标签进行定义。
<h1>定义最大的标题。<h6>定义最小的标题

<body>
    <!--标题标签-->
    <!--应用实例;演示标题 1 到标题 6 的-->
    <!--h1 - h6都是标题标签h1 :最大h6 :最小-->
    <!--align:属性是对齐属性-->
    <!--left:左对齐(默认)-->
    <!--center :居中-->
    <!--right : 右对齐-->

<h1>Java</h1>
<h1 align="left">Java</h1>
<h1 align="center">Java</h1>
<h6 align="right">Java</h6>
<h6>Web</h6>
</body>

在这里插入图片描述

超链接标签

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<body>
<!--a标签是超链接-->
<!--href属性设置连接的地址-->
<!--target属性设置哪个目标进行跳转-->
<!--_self :表示当前页面(默认值) 即使用当前页替换跳转页-->
<!--_blank :表示打开新页面来进行跳转-->
<a href="http://bilibili.com">bilibili</a>
<br/>
<a href="http://bilibili.com" target="_self">bilibili</a>
<br/>
<a href="http://bilibili.com" target="_blank">哔哩哔哩</a>
<br/>
<!--发送邮件-->
<a href="mailto:1412634436@qq.com">联系管理员</a>
</body>

无序列表

在这里插入图片描述

<body>
<!--
    ul :表示无序列表
    li :列表项
    type属性:指定列表项前的符号
-->
<ul type="circle">
    <li><a href="http://www.bilibili.com">张飞</a></li>
    <li>关羽</li>
    <li>刘备</li>
    <li>曹操</li>
    <li>赵云</li>
</ul>
</body>

在这里插入图片描述

有序列表

在这里插入图片描述

<body>
<!--
    ol :表示有序列表
    li :列表项
    type属性:指定列表项前排序方式
    type设定数目款式，其值有五种，默认为start="1”
    i可以取以下值中的任意一个:
    1 阿拉伯数字1，2，3,...
    a 小写字母a,b,C,.….
    A 大写字母A，B，C,...
    i 小写罗马数字i, ii, iii, ...
    I 大写罗马数字Ⅰ，II，III, ...
-->
<ol type="a">
    <li><a href="http://www.bilibili.com">张飞</a></li>
    <li>关羽</li>
    <li>刘备</li>
    <li>曹操</li>
    <li>赵云</li>
</ol>
</body>

在这里插入图片描述

图像标签

img标签可以在html页面上显示图片

<body>
<!--
    img:标签是图片标签,用来显示图片
    src:属性可以设置图片的路径
    width:属性设置图片的宽度
    height:属性设置图片的高度
    border:属性设置图片边框大小
    alt:属性设置当指定路径找不到图片时,用来代替显示的文本内容
    相对路径:从工程名开始算
    绝对路径:盘符:目录文件名

    在web 中路径分为相对路径和绝对路径两种
    相对路径:  . 表示当前文件所在的目录
             .. 表示当前文件所在的上一级目录
    文件名∶表示当前文件所在目录的文件,相当于./文件名./可以省略
    绝对路径:正确格式是: http://IP地址:port/工程名/资源路径
    错误格式是:盘符:/目录文件名
-->
<h1>图片标签</h1>
<!--./imgs/1.png表示当前路径下的imgs文件夹下的1.png-->
<!--在进行图片缩放时，建议指定 width 或者 height即可，浏览器会按照比例显示-->
<img src="./imgs/1.png"></br>
<img src="./imgs/1.png" width="100"></br>
<img src="./imgs/1.png" height="50" border="10"></br>
<img src="./imgs/2.png" alt="图片不见了"></br>
</body>

在这里插入图片描述

http://localhost:63342/html/imgs/1.png

在这里插入图片描述

表格标签

<body>
<!--
说明:
    table: 标签是表格标签
    border: 设置表格标签
    width: 设置表格宽度
    height: 设置表格高度
    align: 设置表格相对于页面的对齐方式
    cellspacing: 设置单元格间距
    tr: 是行标签  th: 是表头标签  td: 是单元格标签
    align: 设置单元格文本对齐方式  b: 是加粗标签
    px: 表示像素
-->
<h1 align="center">表格标签</h1>
<!--不指定高度和宽度，会根据内容自适应-->
<table width="500" border="1" align="center">
    <tr>
        <th align="left">姓名</th>
        <th>电话</th>
        <th>住址</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>
</body>

在这里插入图片描述

跨行跨列标签

<body>
<!--
说明:
    合并列: colspan="列数"
    合并行: rowspan="行数"
    cellspacing :指定单元格间的空隙大小:0表示没有空隙
    bordercolor:指定表格边框的演示
    border:表格边框
    width:表格的宽度
    
    思路:
    1，先把整个表格的完整的行和列，展示出来5*3
    2．在使用合并的技术，来处理
    3．如果是16进制的颜色，前面#

-->
<table border="1" cellspacing="0" bordercolor="#E87EFA" height="200" width="500">
    <tr>
        <td colspan="3" align="center">第1行第1列</td>
    </tr>
    <tr>
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
    <tr>
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
    </tr>
    <tr>
        <td>第5行第2列<img src="./imgs/2.png" height="70"></td>
        <td>第5行第3列</td>
    </tr>
</table>
</body>

在这里插入图片描述

表单标签

url: 表示定位一个web资源的路径
method 主要有两种 post和get

在这里插入图片描述

基本使用

<body>
<!--
    1. form表示表单
    2. action:提交到哪个页面
    3. method:提交方式 ,常用get 和 post
    4. input type=text 输入框
    5. input type=password 密码框
    6. input type=submit 提交按钮
    7. input type=reset 重置按钮

    为了个汉字对齐，输入全角的空格即可
    多说一句: method 不写默认是get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
    用户名:<input type="text" name="username"> <br/>
    <!--把输入法切换成全角，然后中间打空格，就可以对齐-->
    密　码:<input type="password" name="password"> <br/>
    <input type="submit" value="登录">
    <input type="reset" value="重新填写">
</form>
</body>

<body>
<h1 align="center">登录成功</h1>
</body>

在这里插入图片描述

Input标签

在这里插入图片描述

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建用户</title>
</head>
<body>
<!--
    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属性设置每行可以显示几个字符宽度

    一定要给input元素设置name属性，否则，数据提交不到服务器
    注意: checkbox是复选框，如果希望是同一组保证name属性一致
    注意:在checkbox select radio提交数据的时候是value属性的值

-->
<form action="ok.html" method="get">
    <h3>1.请完成如下界面</h3>
    <h5>用户注册信息</h5>
    用户名称: <input type="text" name="username" value="默认值"><br/>
    用户密码: <input type="password" name="pwd1"><br/>
    确认密码: <input type="password" name="pwd2"><br/>
    请选中你喜欢的运动项目:
    <input type="checkbox" name="sport" value="lq">篮球<br/>
    <input type="checkbox" name="sport" value="zq" checked>足球<br/>
    <input type="checkbox" name="sport" value="sq" checked>手球<br/>
    请选中你的性别
    <input type="radio" name="gender" value="male">男<br/>
    <input type="radio" name="gender" value="female" checked>女<br/>
    请选中你喜欢的城市:
    <select name="city">
        <option>--请选中--</option>
        <option value="wh">武汉</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
        <option value="gg">广州</option>
    </select><br/>
    自我介绍
    <textarea name="comment" rows="4" cols="25"></textarea><br/>
    请选中你喜欢的文件<input type="file" name="myfile"><br/>
    <input type="submit" value="登录">
   <input type="reset" value="重新填写">
</form>
</body>
</html>

在这里插入图片描述

表单格式化

把各个选项填入到一个表中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
<!--
    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属性设置每行可以显示几个字符宽度

    一定要给input元素设置name属性，否则，数据提交不到服务器
    注意: checkbox是复选框，如果希望是同一组保证name属性一致
    注意:在checkbox select radio提交数据的时候是value属性的值

-->
<form>
    <h1>用户注册信息</h1>
    <table>
        <tr>
            <td>用户名称: </td>
            <td><input type="text" name="username" value="默认值"></td>
        </tr>
        <tr>
            <td>用户密码: </td>
            <td><input type="password" pwd="pwd1"></td>
        </tr>
        <tr>
            <td>确认密码: </td>
            <td><input type="password" pwd="pwd2"></td>
        </tr>
        <tr>
            <td>请选中你喜欢的运动项目:</td>
            <td><input type="checkbox" name="sport" value="lq">篮球  <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球</td>
        </tr>
        <tr>
            <td>请选中你的性别</td>
            <td><input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女</td>
        </tr>
        <tr>
            <td>请选中你喜欢的城市:</td>
            <td><select name="city">
                <option>--请选中--</option>
                <option value="wh">武汉</option>
                <option value="sh">上海</option>
                <option value="bj">北京</option>
                <option value="gg">广州</option>
            </select></td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea name="comment" rows="4" cols="25"></textarea></td>
        </tr>
        <tr>
            <td>请选中你喜欢的文件</td>
            <td><input type="file"><br/></td>
        </tr>
        <tr>
            <td><input type="submit" value="登录"> </td>
            <td><input type="reset" value="重新填写"></td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

表单提交注意事项

在这里插入图片描述

action表示将form表单的数据提交给哪个url，即服务器的哪个资源(servlet)
method表示提交的方式主要是get / post，默认是get
如果form表单的元素，没有写name属性，则数据不会提交
对应select checkbox radio标签，提交的数据是value指定的值
对应checkbox 复选框，可以提交多个字，但是name是统一的，都是sport sprot=xx&sport=yy
提交的数据，一定要放在form标签内，否则数据不会提交

POST藏在请求体里面
Get 和Post 的区别简述
1. Get请求数据是显示在浏览器地址栏
2. Get请求不安全的，而且数据是有长度限制的，建议有重要信息，不要使用Get
3. Post请求数据是和http传输的，在http体中，相对安全
4. Post传输的数据长度理论上没有限制，但是在实际的应用中，也不能太大

div标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1. <div>标签可以把文档分割为独立的、不同的部分
    2. <div>是一个块级元素。它的内容自动地开始一个新行，不需要写<br/>
    style :样式
    在实际的前端开发中，会存在很多div标签,div标签包含div标签
-->
hello wrold
<div>
    <h3 style="color: blue"> this is a h3</h3>
    <a href="http://www.baidu.com">goto baidu</a>
</div>
</body>
</html>

在这里插入图片描述

p标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.<p>标签定义段落
    2. p元素会自动在其前后创建一些空白
-->
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

在这里插入图片描述

span标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1. span标签是内联元素，不像块级元素（如: div标签、p标签等）有换行的效果。
    2．如果不对span应用样式，span标签没有任何的显示效果
    3．语法:<span>内容</span>

    (1) span标签是内联元素(内嵌元素，行内元素)，没有换行效果
    (2)如果不对span应用样式，span标签没有任何的显示效果
    (3)往往是为了单独的去控制某个关键的内容

-->
您的购物车有<span style="color: crimson;font-size: 40px" >10</span>件商品
</body>
</html>