0100 | HTML | 基础笔记

最新推荐文章于 2020-07-24 10:09:40 发布
最新推荐文章于 2020-07-24 10:09:40 发布
阅读量393 收藏
点赞数
分类专栏： 01 HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShiningChow7/article/details/79338382
版权
第一章：WEB 前端开发基础

1.1 WEB 系统基础

1.1.1 网络体系结构

三种主要的系统架构
  • B/S 架构（Browser/Server）：浏览器端和服务器端，如 Google、淘宝网等；
  • C/S 架构（Client/Server）：客户端和服务器端，如 QQ、网易云等；
  • P2P 架构（Point-to-Point）：点对点系统，客户端与客户端之间彼此直接通信。

典型的网络服务系统由三层组成：
  • 客户端：用于与用户的交互和数据的展现等（浏览器也可看作客户端）；
  • 服务器：处理来自客户端的请求，并将处理完成后的响应发送给客户端；
  • 数据库：数据的存储和查询。

1.1.2 B/S 和 C/S 的对比

  1. 浏览器规范标准；
  2. 浏览器部署更加方便；
  3. 系统的设计与开发方面 B/S 有先天优势；
  4. 系统性能方面 C/S 更加优秀；
结论：以浏览为主、录入简单的应用程序，B/S 有很大的优势；对于交互复杂的企业级应用或者大型游戏系统，C/S 更加可以胜任

1.1.3 WEB 系统的特点

  1. WEB 是图形化和易于导航的；
  2. WEB 与平台无关；
  3. WEB 是分布式的：信息可放在不同的站点上，只需一个链接即可；
  4. WEB 是动态的：便于更新，而客户端更新则需要重新安装客户端；
  5. WEB 是可交互的；

1.1.4 WEB 客户端技术（浏览器）

  1. Trident 页面渲染引擎：IE 等
  2. Gecko 页面渲染引擎：Firefox 等
  3. KHTML 页面渲染引擎或 WebKit 框架：Safari、Chrome等
  4. Presto 页面渲染引擎：Opera等
  5. 其他

1.1.5 WEB 服务器端技术

    1 . WEB 服务器
  • 监听客户端请求
  • 处理客户端请求
  • 客户端与数据库之间的屏障

    2 . 应用服务器
  • Java EE 应用服务器
  • IIS 

    3 . 脚本引擎
  • ASP：Active Server Page，现已升级到 ASP.NET
  • PHP：Personal Home Page，超文本预处理语言
  • JSP：Java Server Page，一种动态网页技术标准
  • Ruby：一种脚本语言

    4 . 集群环境
    将很多服务器集中起来一起进行同一种服务，在客户端看来就像是只有一个服务器。

    优点：
  • 多个计算机并行计算，可获得很高的计算速度
  • 多个计算机备份，任何机器出问题，整个系统都可正常运行

    集群环境的多种实现方式：
  • 硬件集群：直接使用大规模硬件完成，根据来访者 IP 地址进行负载的分配和转移并实时监听，故障转移；
  • 操作系统集群：操作系统之间直接集群，通过集群算法实现；
  • 应用服务器集群：应用服务器之间直接集群，根据应用服务器之间的性能指标进行负载的均衡和故障转移；
  • 数据库集群：数据库系统直接集群，如 Orcle RAC。

    5 . 数据库
  • 文件型数据库：将数据保存在文件中。不太适用于大型的应用；
  • 关系型数据库：将数据以二维表的形式保存，并且建立表与表或者列与列的各种关系，便于进行业务逻辑处理与数据展现。应用较为广泛；
  • 内存型数据库：将所有数据库文件置于内存中（因为内存的读写速度远高于硬盘）；
  • 非关系型数据库。

1.2 HTML 核心基础

1.2.1 HTML 简介

    HTML 不是一种编程语言，而是一种标记语言。HTML 文档包含 HTML 标签和文本内容

    HTML 特点：
  • 简易性
  • 可扩展性
  • 平台无关性
  • 通用性

    HTML 标签：
  • 由尖括号包围的关键词，比如<html>
  • HTML 标签通常都是成对出现的
  • 标签对中第一个标签是开始标签，第二个标签是结束标签

基本格式：

<标签> 内容 <标签>

1.2.2 第一个HTML 页面

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 这是第一个HTML页面 </title>
</head>
<body>
    你好，欢迎进入 HTML 的学习！
    <!-- 这是一个注释，不会被解析-->
</body>
</html>

    标签说明：
  1. <!DOCTYPE> 声明：有助于浏览器正确显示网页；
  2. <html> 标签：描述了文档类型，表明这是一个按照 HTML 规范来书写的 HTML 文档；
  3. <head> 标签：描述页面的头部信息，包括但不限于页面设置、标题、CSS 样式属性、JavaScript 代码等；
  4. <meta> 标签：用于设置页面的基础元信息，比如此处设置页面的编码格式为 UTF-8。<meta> 标签也可以设置很多其他的属性，这是后话；
  5. <title> 标签：只用于设置页面标题；
  6. <body> 标签：网页中最重要的标签，用于展示网页内容；
  7. <!-- --> 标记：特殊标记，网页注释

1.2.3 WebStorm 开发工具

  1. 下载安装：JetBrains 全家桶，安装过程略。账号：zqm1994@gmail.com，密码略；
  2. License 服务器；
  3. 创建一个 HTML 项目：File -> New Project -> Empty Project；
  4. 创建项目目录结构：我们在项目根目录下继续再创建几个目录用于后续开发，New -> Directory 创建目录，共需创建六个目录，分别是 animation（动画），basic（基础），css（层叠样式），image（图片），js（JavaScript）和project（项目）；
  5. 创建 HTML 文件：在 basic 目录下，新建 html 源文件；
  6. 在页面的基本结构上填充内容；
  7. 运行 HTML 页面；
  8. 修改编辑区格式（非必要）。

1.2.4 文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 这是我的第一个 HTML 页面 </title>
</head>
<body>
    <font size = "5" face = " 微软雅黑 "> 你好，欢迎来到 HTML 的世界 ! 大号字体 </font>><br/>    
    <font size = "4" color = "blue"> 你好，欢迎来到 HTML 的世界 ! 带颜色的字体 </font>><br/>
    <h1> 你好，欢迎来到 HTML 的世界 ! 1 号标题 </h1>
    <h2> 你好，欢迎来到 HTML 的世界 ! 2 号标题 </h2>
    <h3> 你好，欢迎来到 HTML 的世界 ! 3 号标题 </h3>
    <h4> 你好，欢迎来到 HTML 的世界 ! 4 号标题 </h4>
    <h5> 你好，欢迎来到 HTML 的世界 ! 5 号标题 </h5>
    <h6> 你好，欢迎来到 HTML 的世界 ! 6 号标题 </h6>
    <i> 你好，欢迎来到 HTML 的世界 ! 斜体 </i><br/>
    <strong> 你好，欢迎来到 HTML 的世界 ! 强调，也是粗体 </strong><br/>
    <font color = "#eaeaea"><b> 你好，欢迎来到 HTML 的世界 ! 标签嵌套 </b></font><br/>
    <p> 你好，欢迎来到 HTML 的世界 ! 这是一个段落 </p>
    <span> 你好，欢迎来到 HTML 的世界 ! 行内标记，无格式 </span><br/>
    <!-- 这是 HTML 注释，不会被解析 -->
</body>
</html>

    标签说明：
  1. <font> 标签：字体，其中的 size 属性表示字体大小，face 属性表示字体名称（例如“微软雅黑”等），color 属性表示颜色（两种方式，直接颜色英文如 green 或者6位16进制代码表示法如 #000000 等）；
  2. <h1>~<h6> 标签：表示文本内容标题，依次从大到小（headline）；
  3. <i> 标签：斜体（italic）；
  4. <b> 标签：粗体（bold）；
  5. <strong> 标签：粗体；
  6. <p> 标签：段落，会换行（paragraph）；
  7. <span> 标签：行内标记，无格式（ ？）
  8. <br/> 标签：特殊标签，使浏览器显示内容时换行；

运行结果如图所示：



1.2.5 超链接

使用 <a> 标签设置超链接，使用 href 属性来描述链接的地址。超链接可以是文字也可以是图片等。

格式：

<a href = "url" > 链接文本 </a>

举例说明：

<!DOCTYPE html >
< lang="en">
<head>
    <meta charset= "UTF-8" >
    <title> 页面超链接应用 </title>
</head>
<body>
    <a href = "HTML-文本.html" ></a><br/>
    <a href = "/Users/apple/WebstormProjects/HTML-learn/image/picture.jpg" > 打开一张图片 </a><br/>
    <a href = " https://www.baidu.com/bd_logo1.png " > 打开一张图片 </a><br/>
    <a href = " https://www.baidu.com/ " target = "_blank" > 百度 </a><br/>
</body>
</html>

两种方式链接页面地址：
  • 相对路径：相对于当前页面所在的目录；
  • 绝对路径：通过 http:// 开头的绝对路径，无论源文件在哪个地方都可以直接打开。

此外还可以使用超链接发送邮件、发短信或打电话等

<a href = " mailto:zqm1994@gamil.com " > 给周启明发邮件 </a><br/>
<a href = "15881074125" > 给周启明打电话 </a><br/>
<a href = "sms:15881074125?body = 你好很高兴认识你！" > 给周启明发短信 </a><br/>

超链接还可以直接链接到页面当中的某个具备ID属性的标签上，这个叫做“锚点”，后面加 “#” 号即可（ ？）。

<a href = " http://www.woniuxy.com/train/#culture " > 学院文化 </a><br/>

1.2.6 图像

使用 <img> 标签定义图像，使用 src（source）源属性显示图像，源属性的值即为图像的 URL 地址（即存储图像的位置）；alt 属性用来为图像定义一串预备的可替换的文本，当浏览器无法载入图像时，替换文本告诉用户他们失去的信息。

<img src = "URL" alt = "some_text" >

height （height， [haɪt]，高度）和 width（width， [wɪdθ]，宽度） 属性用于设置图像的高度和宽度。指定图像的高度和宽度是一个很好的习惯，如果需要缩放，建议只指定宽度或指指定高度，否则会发生变形。

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 图像的应用 </title>
</head>
<body>
    <img src = " https://www.baidu.com/bd_logo1.png " />
    <img src = " https://www.baidu.com/bd_logo1.png " width = "300" />
    <img src = " https://www.baidu.com/bd_logo1.png " alt = "这是百度的logo" />
    <a href = " https://www.baidu.com " >
        <img src = " https://www.baidu.com/bd_logo1.png " >
    </a>
</body>
</html>

上文中我们给予了背景图片一个超链接，只需将 <img> 标签嵌套在 <a> 标签中即可。当然，图像也常用于页面背景，比如我们可以为 body 标签设置background 属性指定其背景图片：

<body background = ".../image/picture.jpg" > <!--这一句并不在 body 内，而是在 body 标签第一次出现的这一行-->

接下来看图文混排的问题：

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 图文混排 </title>
</head>
<body>
    <img src = ".../image/java-icon.png" /> Java开发
    <img src = ".../image/test-icon.png" /> 软件测试
    <img src = ".../image/android-icon.png" /> Android开发
</body>
</html>

这种方式会导致文字和图片的排版不能和我们心目中的那样居中对齐。所以我们一般不推荐（如何图文混排是后话），如果必须要使用，可以用图片的附加属性 align（align，  [ə’laɪn] ，排列，排成一行）。

align 属性包含如下取值：

值描述
left把图像对齐到左边
right
把图像对齐到右边
middle
把图像与中央对齐
top
把图像与顶部对齐
bottom
把图像与底部对齐
因为不同的浏览器或者统一浏览器的不同版本对 align 属性的某些值的处理方式不一致，我们不建议使用该属性。

实例：

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 关于 HTML 图片的处理 </title>
</head>
<body background= "image/black-star.jpg" >
    <!--图片的大小，要么修改宽度，要么只修改高度，保持纵横比例-->
    <img src = "image/woniufamily.png" width = "400" height = "220" /><p></p>
    <img src = "image/woniufamily.png" width = "400" alt = "这是一张图片" align = "middle" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!--九个空格-->
    <font color = "white" > 欢迎来到 HTML 的世界！ </font>
    <hr/>
</body>
</html>

说明：
  • 第一张图片设置了高度和宽度，如果不符合原始比例，则会造成拉伸和变形；
  • 第二张图片只设置了宽度，则高度会等比例缩放，align = “middle”使文本和图片保持了居中对齐；
  • &nbsp; 是空格。HTML 中无法使用 space 键直接加空格；
  • <hr/> 是添加一条水平线。

1.2.7 表格

在 HTML 中，表格非常重要，非常便于布局。
表格（table，n，表格）由 <table> 标签定义，表格的“行”由 <tr> 标签（table row）（row  [ro] ，n，行）定义，每行被分为的单元格用 <td> 标签（table data）定义，即数据单元格的内容。

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 表格应用 </title>
</head>
<body>
<table border = "1" cellspacing= "0" cellpadding= "10" >

    <tr>
        <td> 第 1 行第 1 列 </td>
        <td> 第 1 行第 2 列 </td>
    </tr>
    <tr>
        <td> 第 2 行第 1 列 </td>
        <td> 第 2 行第 2 列 </td>
    </tr>
</table>
</body>
</html>

其中 border （border，  [‘bɔrdɚ]，n，边界）属性是“边框宽度”，cellspacing （cell，细胞，单元格；spacing，空间，距离）属性为“单元格间距”，cellpadding （padding， [‘pædɪŋ]，内边距）属性为“单元格边距”。运行结果如下图：



我们可以继续美化：

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 表格应用 </title>
</head>
<body>
<table border = "1" cellspacing= "0" cellpadding= "10" >
    <thead>
    <th bgcolor = "black" ><font color= "white" > 标题栏一 </font></th>
    <th bgcolor = "black" ><font color= "white" > 标题栏二 </font></th>
    </thead>
    <tr>
        <td> 第 1 行第 1 列 </td>
        <td> 第 1 行第 2 列 </td>
    </tr>
    <tr>
        <td> 第 2 行第 1 列 </td>
        <td> 第 2 行第 2 列 </td>
    </tr>
</table>
</body>
</html>

其中，<thead> 标签和 <th> 标签是表格的特殊标签，用于表格的标题栏加粗，bgcolor 属性为背景颜色。效果如下：


继续设置单元格的高度和宽度。只需对第一行和第一列设置高度和宽度即可，其他部分会自动保持一致。单元格的元素默认为居中。

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title> 表格应用 </title>
</head>
<body>
<table border = "1" cellspacing= "0" cellpadding= "10" width = "400" > <!--边框宽度 1 像素，单元格间距 0 像素，单元格与文字的间距 10 像素，宽度 400 像素-->
    <thead>
    <th bgcolor = "black" width = "40%" ><font color= "white" > 标题栏一 </font></th> <!--标题背景色黑色，宽度 40%，标题颜色 白色-->
    <th bgcolor = "black" width = "60%" ><font color= "white" > 标题栏二 </font></th> <!--标题背景色黑色，宽度 60%，标题颜色 白色-->
    </thead>
    <tr>
        <td height= "40" align= "center" > 第 1 行第 1 列 </td> <!--边框高度 40 像素，内容居中-->
        <td align= "left" > 第 1 行第 2 列 </td> <!--内容对齐到左边-->
    </tr>
    <tr>
        <td height = "40" align= "center" > 第 2 行第 1 列 </td> <!--边框高度 40 像素，内容居中-->
        <td align= "right" align = "top" > 第 2 行第 2 列 </td> <!--内容对齐到右边，内容对齐到顶部-->
    </tr>
</table>
</body>
</html>

效果如图：

HTML 合并单元格：    

<!DOCTYPE html >
<html lang= "en" >
<head>
    <meta charset= "UTF-8" >
    <title>图像的应用2 </title>
</head>
<body>
<h4>单元格横跨两格： </h4>
<table border= "1" >
    <tr>
        <th>Name </th>
        <th colspan= "2" > Telephone </th>
    </tr>
    <tr>
        <td>Bill Gates </td>
        <td>555 77 854 </td>
        <td>555 77 855 </td>
    </tr>
</table>

<h4>单元格横跨两列： </h4>
<table border= "1" >
    <tr>
        <th>First Name: </th>
        <td>Bill Gates </td>
    </tr>
    <tr>
        <th rowspan= "2" > Telephone </th>
        <td>555 77 854 </td>
    </tr>
    <tr>
        <td>555 77 855 </td>
    </tr>
</table>
</body>
</html>


在 <th> 或 <td> 标签内部可以加 colspan （column，  [‘kɑləm]，列，纵队；span， [spæn]，跨度，跨距，范围）属性和 rowspan （row， [ro]，行；span，[spæn]，跨度，跨距，范围）属性。colspan 为“（在同一行中）合并列属性”，rowspan 为“（在一列中）合并行属性”。

这里要注意 <th> 和 <td> 标签的区别。<th> 为标题标签，标题栏可以是横着的标题，也可以是竖着的标题；<td>为内容标签。绝大部分网页都可以拆分为一格一格的内容。

1.2.8 表单元素

  1. 文本框

    <input type= "text" value= "admin" id= "username" maxlength= "20" />

type：类型 （文本框类型？和 id 的区别？）；value：值；id：该元素在网页的唯一识别符（比如这个网页只有这一个“用户名框”）；maxlength：文本框最多允许输入字符数。

  1. 密码框

    <input type= "password" value= "123456" id= "password" name= "password" >

type：类型（ 密码框类型？和 id 以及 name 的区别？）；value：值；id：该元素在网页的唯一识别符（比如这个网页只有这一个“密码框”）；name：

  1. 按钮

<input type= "button" value= "按钮名称" οnclick= " alert( 'hi') ; " />

或者

<button οnclick= " alert ( 'hello' ) ; " > 点击我 </button>

alert 为 JavaScript 中的一个函数弹出对话框。

    4 . 单选框（只能选择一项）

<input type= "radio" name= "sex" /> 男
<input type= "radio" name= "sex" /> 女


    5 . 复选框（可选择多项）

<input type= "checkbox" value= "car" /> 汽车
<input type= "checkox" value= "game" /> 游戏
<input type= "checkbox" value= "travel" /> 旅游

    6 . 下拉框

<select id= "city" >
    <option value= "成都" > 成都 </option>
    <option value= "绵阳" > 绵阳 </option>
    <option value= "德阳" > 德阳 </option>
    <option value= "资阳" > 资阳 </option>
</select>

    7 . 文本域

<textarea cols= "50" rows= "40" > 这是一段文本，可换行 </textarea> <!--文本域与文本框不同，可输入任意多行-->

textarea 结合 CSS 属性：resize：none，可以禁止用户拉伸文本框的大小。   

 8 . 提交和重置表单

<form id= "myform" action= " http://192.168.1.1 " method= "post" >
    <input type= "text" value= " " />
    <input type= "reset" value= "重置" />
    <input type= "submit" value= "提交" />
</form>

重置按钮会将表单内元素生成默认值，提交按钮会将内容提交给服务器端地址，用于交互。（现在大部分使用 AJAX 提交请求，form 非必须）

最终效果：



1.2.9 其他常用标签

    1 . 水平线

<hr align= "center" width= "100%" size= "1" />

默认水平线可贯穿父容器，用于分格

    2 . 有序列表

<ol>
    <li> 这是第一项 </li>
    <li> 这是第二项 </li>
    <li> 这是第三项 </li>
    <li> 这是第四项 </li>
    <li> 这是第五项 </li>
    <li> 这是第六项 </li>
</ol>

<ol>， ordered list，有序列表。

效果：
    

3 . 无序列表

<ul>
    <li> 这是第一项 </li>
    <li> 这是第二项 </li>
    <li> 这是第三项 </li>
    <li> 这是第四项 </li>
    <li> 这是第五项 </li>
    <li> 这是第六项 </li>
</ul>

<ul>， unordered list，无序列表

效果：


    4 . iframe

iframe 主要用于在当前页面嵌入显示另外一个页面的要求。

<iframe width= "680" height= "300" frameborder= "1" src= " http://36kr.com " />

    5 . 滚动字幕

标签 <marquee>（   marquee， [mɑr’ki]，移动字幕效果）为滚动字幕功能标签。

<marquee>你好，欢迎进入 HTML 的世界 </marquee>
<marquee><img src= "/Users/apple/Pictures/图片 1.png" </marquee>

<marquee> 标签主要包含如下属性：

    （1）align 对齐属性，有如下值：
    absbottom（absolutely ，绝对的）：绝对底部对齐（与 g、q 的最下端对齐）；
    absmuddle：绝对中央对齐；
    baseline：底线对齐；
    bottom：默认底部对齐；
    left：左对齐；
    texttop：顶线对齐；
    top：顶部对齐；
    这些对齐方式的取值也适用于其它标签。

<marquee align= "absbottom" > abdbottom：qwertyuiopasdfghjkl绝对底部对齐 </marquee> <!--其他值均以此表示，不再赘述-->

可是这里没有绝对底部对齐（ ？）

    （2）behavior 属性，设定滚动方式，有如下值：
    alternate（alternate ， [ˈɔltɚˌnet;(for adj.)ˈɔ:ltərnət]，v，交替，来回）：两端之间来回滚动；
    scroll（scroll，  [skrol]，n，卷轴）：由一段滚动到另一端，会重复；
    slide（slide，  [slaɪd]，n，v，滚动滑动）：由一段滚动到另一端，不会重复；

<marquee behavior= "alternate" > alternate：两端之间来回滚动 </marquee> <!--其他值均以此表示，不再赘述-->

    （3）bgcolor 属性，设定字幕背景颜色：
    16进制值；
    RGB数值（CMYK为印刷品的格式）；
    颜色名称英文单词；

<marquee bgcolor= "#006699" >设定活动字幕背景颜色：16进制值表示 </marquee>
<marquee bgcolor= "RGB(10%,20%,30%)" >设定活动字幕背景颜色：RGB数值表示 </marquee>
<marquee bgcolor= "red" >设定活动字幕背景颜色：颜色名称表示 </marquee>

    （4）direction （direction，n，方向）属性，设定活动字幕滚动方向。有如下值：
    up（向上）；down（向下）；left（向左）；right（向右）

<marquee direction= "down" > 字幕滚动方向：向下 </marquee> <!--其他值均以此表示，不再赘述-->

    （5）height 属性，设定活动字幕的高度；width 属性，设置活动字幕的宽度（一般只设置高度或宽度中的一个）。

<marquee height= "500" direction= "down" bgcolor= "#cccccc" > 设定活动字幕的高度 </marquee> <!--其他值均以此表示，不再赘述-->

    （6）hspace 属性，设定活动字幕所在的位置距离父容器水平边框的距离；vspace 属性，设置活动字幕所在的位置距离父容器竖直边框的距离。

<marquee height= "500" direction= "down" bgcolor= "#cccccc" > 设定活动字幕的高度 </marquee> <!--其他值均以此表示，不再赘述-->

    （7）loop 属性，设定滚动的次数。当 loop = -1表示会一直滚动下去，默认值为 -1。

<marquee loop= "-1" bgcolor= "#CCCCCC" > 我会不停地走 </marquee>
<marquee loop= "2" bgcolor= "#CCCCCC" > 我只会走两次 </marquee>

    （8）scrollamount 属性，设定活动字幕滚动速度，单位：pixels（像素）

<marquee scrollamount= "10" > 字幕滚动速度为10pixels </marquee>

    （9）scrolldelay 属性，设定活动字幕滚动两次之间的延迟时间，单位：ms（毫秒），设置值较大时会有一顿一顿的效果。

<marquee scrolldelay= "10" > scrolldelay="10" </marquee>

此外，有两个事件经常用到：onMouseOut = “this.start()”：用来设置鼠标移出该区域时继续滚动；onMouseOver = “this.stop()”：用来设置鼠标移入该区域时停止滚动；


<marquee onMouseOut= " this . start () " onMouseOver= " this . stop () " </marquee>

综上所述，我们来完成一个完整的滚动字幕属性设置：

<marquee id= "affiche" align= "left" behavior= "scroll" bgcolor= "#34C749" direction= "up" height= "300" width= "200" hspace= "50" vspace= "20" loop= "-1" scrollamount= "10" scrolldelay= "100" onMouseOut= " this . start () " onMouseOver= " this . stop () " ><span style= " color : white ; font-size : 20 px" > 这是一个完整的滚动字幕 </span></marquee>

其他详细 HTML 标签及属性见：W3School   http://www.w3school.com.cn/tags/index.asp 中的全部 HTML 标签。



ShiningChow7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ARM原理与应用基于OLED显示屏的设计①
m0_47259499的博客
06-26 867
目录设计目的代码 设计目的 此次设计是为了完成本学期的期末作业，通过了一个学期的学习，也想检验一下自己学习到的知识，今天我们先来完成一个简单的功能，那就是让屏幕显示学号和姓名，同时点亮两个红灯（本次设计的代码是在老师教学的实验板上实现功能的），希望可以通过在这里分享代码跟大家一起学习，也欢迎各位前辈前来指导。 代码 #include "derivative.h" /* include peripheral declarations */ #define uchar unsigned char #defin
HTML基础笔记01
小小鹏的小小博客
04-27 123
HTML基础笔记01 现在多用Sublime VScode等轻量级编辑器进行代码编写，在网上有不少推荐的扩展插件，可以根据相关教程进行下载安装，实现快速开发。 可以用 “! + tab”键的方式生成基本信息，如以下代码 &lt;!DOCTYPE html&gt; &lt;html lang="CN-zh"&gt; &lt;head&gt; &lt;meta charset="UT...
0x100表示十进制是多少？
热门推荐
秦亚伟的专栏-金蝶 EAS BOS、苍穹平台技术
10-22 3万+
这是一个十六进制数,换算十进制的方法如下:0x100=1*16*16+0*16+0*1=2560x1234=1*16*16*16+2*16*16+3*16+4*1=4096+512+48+4=4660
canvas学习笔记|基础学习资料
qq_37419449的博客
07-24 4868
canvas学习笔记 画基本图形 1.矩形 const canvas = document.getElementById('canvas');//画布 if (canvas.getContext) { // alert("ok"); const ctx = canvas.getContext('2d');//画笔 ctx.fillStyle = 'rgb(200,0,0)';//填充样式 ctx.fillRe
HTML基础笔记
FAST_13469ND的博客
10-02 2278
学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 typora-copy-images-to: media 自我介绍 传智讲师 刘晓强 江湖人称 强哥 但是不是 也不是： 其实这是我： 前端基础 html +css 基础班 ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
python基础笔记html.rar
10-14
"python基础笔记html"这个压缩包文件显然是一个关于Python基础知识的学习资料，包含了HTML格式的笔记，可能涵盖了变量、数据类型、控制结构、函数、模块等核心概念。 1. **Python简介**：Python是由Guido van ...
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
基础html笔记
04-29
这是黑马程序员讲的asp。net中提到的html基础。写成笔记用于爬虫，基本够用了。但是js之类的还要自己去找资源。
html+css基础笔记
04-02
html+css基础笔记
顶尖电子称条码秤LS系列称固件，最新固件，固件
08-28
顶尖电子称条码秤LS系列称固件，最新固件，固件
爬取淘宝热销(热门)咖啡商品信息数据集
08-28
本资源旨在收集淘宝平台上热销咖啡商品的相关信息，包括但不限于：店铺所在省份、城市位置、商品名称、销售价格、销量数据、单价（以人民币计）、付款人数、是否提供包邮服务、是否来自天猫平台以及满减优惠的详细信息。这些信息均来源于淘宝平台的公开透明数据，可供学习参考之用。请注意，本资源仅用于学术研究和个人学习目的，不得用于商业用途或其他非法活动。
爬取的淘宝新品推荐男装商品信息公开透明数据集
08-28
本资源专注于收集淘宝平台最新推荐的男装商品信息，内容涵盖商品的店铺所在省份、城市位置、商品的名称、销售价格、累积销量、单价（以人民币计价）、付款的顾客人数、是否提供包邮服务、是否为天猫平台的商品，以及相关的满减优惠情况。这些详细的数据点均来源于淘宝平台的公开透明信息，经过精确抓取和整理，旨在为分析电商平台上的新品推荐策略和消费者购买行为提供实用数据。 这些数据严格遵循淘宝平台的公开政策和隐私保护原则获取，确保了信息的合法性与合规性。然而，本资源仅作为学习参考之用，意在帮助研究人员、市场分析师或学生等理解电商领域的商品推荐机制、销售动态及市场趋势。 任何将此数据用于商业目的或其他未授权的活动都是不恰当的，甚至可能触犯相关法律条款。 在使用这些数据进行学术研究或个人学习时，用户应自觉遵守相关法律法规，尊重数据来源和版权，正确引用数据源，并不得用于任何形式的商业盈利。
STM32F4的环境配置，可直接运行STM32F4系列的芯片
08-28
STM32F4的环境配置，可直接运行STM32F4系列的芯片
技术资料PCB资料模拟电子技术资料03j.zip
08-28
技术资料PCB资料模拟电子技术资料03j.zip
全国大学生电子设计大赛项目合集射频无线资料雷达接收机灵敏度自动测试方案设计
08-28
全国大学生电子设计大赛项目合集射频无线资料雷达接收机灵敏度自动测试方案设计提取方式是百度网盘分享地址
da_1724814826825 (1)
08-28
da_1724814826825 (1)
单片机实现的超声波测距与显示模块.md
最新发布
08-28
如何利用单片机实现超声波测距与显示模块，包括从硬件设计到软件编程的全方位内容。首先，介绍了超声波测距的基本原理，使用超声波模块（如HC-SR04）通过发射和接收超声波信号来测量距离，并通过公式计算距离。接着，阐述了单片机（如STC89C52、ATmega328）如何与超声波模块连接，以及电路设计细节。软件部分涵盖了如何编写单片机程序以触发超声波发射、测量回波时间，并计算距离。代码示例展示了如何使用计时器测量回波时间，并通过LCD显示距离。最后，文章还包括了调试与优化建议，如硬件连接检查、软件调试方法及性能优化策略，以确保系统的准确性和稳定性。
HTML基础教程：韩顺平笔记
"韩顺平的HTML笔记涵盖了HTML的基础知识，包括HTML的定义、历史、运行原理、基本结构，以及一些常见的HTML元素和符号实体。笔记还提到了HTML文件的两种运行方式，本地运行和远程访问，以及HTTP协议在远程访问中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值