文章目录
- 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