本文档详细介绍了HTML的基础知识，包括字体标签、图像、表格和超链接，接着深入讲解了CSS的行内、内嵌和外部样式，以及JavaScript的基本理解、语法、流程控制和实际应用，如图片更新、浮动效果和鼠标交互。
文章目录
- HTML/CSS/JavaScript
- HTML
- Html HyperText Markup Language内容
- font标签
- font-01
- font-011
- 图象
- image-01
- 表格
- table-03
- 超链接标签：<a>
- href-04
- 表单标签：<form>
- form-05
- form-table-06
- CSS
- 行内样式
- 内嵌样式
- 外部样式
- div:
- JavaScript
- js小结
- 基本理解
- 基本语法
- 流程控制语句和函数
- 图片自动更新
- 实例
- 漂浮的图片
- 鼠标获取
- js中的数组
- 生成随机验证码
- 统计字数
- 标签与js分离
- js的工具类
- HTML
HTML/CSS/JavaScript
HTML
Html HyperText Markup Language内容
- Html就是超文本标记语言的简写，是最基础的网页语言。
- Html是通过标签来定义的语言，代码都是由标签所组成。
- Html代码不用区分大小写。
- Html代码由开始结束。里面由头部分和体部分两部分组成。
- 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
- 体部分是真正存放页面数据的地方。
-
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
-
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
-
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
-
格式：<标签名 属性名=‘属性值’> 数据内容 </标签名>
<标签名 属性名=‘属性值’ /> -
操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。
font标签
- 字体标签：
例：<font size=5 color=red>字体标签示例</font>
注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。 - 标题标签：
……
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。 - 特殊字符：
如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。
| header 1 | header 2 |
|---|---|
| & lt; | < |
| & quot; | “ |
| & trade; | ™ |
| & gt; | > |
| & reg; | ® |
| & nbsp; | 空格 |
| & amp; | & |
| & copy; | © |
- 列表标签：<dl>
<dt>：上层项目
<dd>：下层项目
例：
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
列表中项目符号对应的标签
<ol>：数字标签（a A 1 i I）
<ul>：符号标签（○●■）
<li>：具体项目内容标签。此标签只在
-
- 中有效。
通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。
- 中有效。
font-01
<html>
<head>
</head>
<body>
<font color='red' size="50">冰冰</font>
</body>
</html>
font-011
<!DOCTYPE html> <!-- 说明当前是html的文档 -->
<html><!-- html文件的根标签 -->
<head><!-- html的头标签,内部放的是属性相关 -->
<meta charset="UTF-8"><!-- 指明编码 -->
<title>font_01</title><!-- 设置当前文档的标题 -->
</head>
<body><!-- 体标签,放到是设置的内容 -->
<!-- font标签 可以通过16进制的数设置颜色(RGBA模式)
R:red G:green B:blue A:alpha(透明度)
[0,255] [0,255] [0,255] [0,1]
-->
<font color="#8E888E" size=60>冰冰</font>
<!-- 标题标签专门用来设置标题的,字号是固定,字体默认是加粗的 -->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!-- 特殊字符 -->
<font> <晨晨> </font>
</body>
</html>
图象
- 图像标签：<img>
例：
<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>
align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件
2. 图像地图：
应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。
map标签要和img标签联合使用。Href是超连接
<img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<map >
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>
image-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img_02</title>
</head>
<body>
<!--
src:是图片的路径
height:图片的高度
width:图片的宽度
默认的单位是像素(px),注意:以后最好所有的地方都将单位加上
通过绝对路径获取图片
注意:如果使用绝对路径访问资源无法获取资源,可以将file:///协议加上
-->
<img src="file:///C:\Users\Administrator\Desktop\BigData1715资料\JAVAWEB\day01\课程资料\今天资料1\图片\bingbing.jpg" height=100px width=100px/>美女
<!-- 工程内的图片可以通过相对路径找.
..代表向上一层
src=两部分 第一部分:..\..\..\..\ 找当前工程的目录
第二部分:images\120.jpg 图片的相对路径
-->
<img src="..\..\..\..\images\120.jpg" />美图
</body>
</html>
表格
-
表格标签：<table>
组成：标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr> -
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
格式：
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>张三</td>
<td>23</td>
</tr>
</table>
效果：
| 姓名 | 年龄 |
|---|---|
| 张三 | 23 |
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
<caption>表格标题</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>张三</td>
<td>23</td>
</tr>
</ta
最低0.47元/天 解锁文章
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
