HTML(超文本标记语言)
HTML基本结构与语法
HTML的基本结构
<html>
<head>
<title>This is title </title>
</head>
<body>
This is webpage
</body>
</html>
HTML的基本语法
标签: 分单标签(如:
<br/> <hr/>
)和双标签(如:<html> </html>
)属性:
注释:
<!-- 这里是注释! -->
基本标签与使用
基本控制标签
<html>,<head>,<body>
`<body>`标签常用属性如下:
bgcolor 网页背景颜色
background 网页背景图片
text 文本颜色
文本与段落标签
标签 | 描述 |
---|---|
<h#> | 标题 |
<b> |
加粗 |
<i> |
斜体 |
<strong> |
加粗斜体 |
<p> |
段落 |
<hr/> |
水平分割线 |
<br/> |
换行 |
<font> |
字体标签(html5已不支持) |
列表标签
+ 有序列表
<ol>
<li>a</li>
<li>b</li>
</ol>
type:阿拉伯数字1(缺省),罗马数字i,英文字母a
+ 无序列表
<ul type="square">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
type:实心圆disc(缺省),空心圆circle,方块square
超链接标签
<a href="地址" target="目标框架值">超链接名称或图片</a>
地址:可以是相对路径也可以是绝对路径
目标框架值:`_self`同窗口打开(缺省)、`_parent`父框架、`_blank`新建窗口、`_top`整页
图片和动画标签
<img src="" height="" width="" alt="" border="" align=""/>
定时刷新或跳转
定时自动刷新
<meta http-equiv="refresh" content"1" />
定时自动跳转
<meta http-equiv="refresh" content"3;url="https://zhenwu.xyz" />
表格
<table> <tr> <th> <td>
CSS样式表
CSS样式表的定义与使用
定义
- 标签选择器: HTML标签定义
p{background-color:blue;color:red}
- 类别选择器: class定义
.cs1{font-family:yahei;font-size:15px}
- ID选择器: id定义
#cs2{color:yellow}
使用
- 行内式(HTML标签的style属性内)
<p style="color: blue;font-family:yahei"></p>
内嵌式(
<head>
内的<style>
标签内)<style type="text/css"> h1{color:blue;font-size:60px} .cls1{} #id1{} </style>
链接式(
<head>
内的<link>
标签引入css文件)
<link href="xx.css" type="text/css" rel="stylesheet"></link>
- 导入式
<style type="text/css">
@import url(*.css file)
</style>
JavaScript脚本语言
JavaScript的基本语法
- 数据类型
整型int,浮点型float,字符串string,布尔型boolean,空类型null
- 变量
var 变量名[= 值];(变量声明可以忽略)
- 运算符
与Java语言中支持的运算符及其功能相同
控制语句
函数的定义和调用
定义
- 嵌入
- 链接
function fun_name() {
document.write("print");
}
var fun_name=function() {
document.write("print");
}
调用
通过事件调用
JavaScript的事件
JavaScript的对象
- window
HTML内容在window对象中显示。同时window对象提供了用于控制浏览器窗口的方法。window对象属性的常用方法如下
方法 | 描述 |
---|---|
alert() | 弹出一个警告对话框 |
confirm() | 显示一个确认对话框 |
prompt() | 弹出一个提示对话框,并要求输入一个简单的字符串 |
setTimeout(timer) | 在经过指定的时间后执行代码 |
clearTimeout() | 取消对指定代码的延迟执行 |
setInterval() | 周期性地执行指定的代码 |
clearInterval() | 停止周期性地执行代码 |
- location
location对象实现网页的跳转。[^HTML中使用<a>
标签,JavaScript中使用location对象]
- history
属性方法 | 描述 |
---|---|
- document
获取Element对象
方法 | 描述 |
---|---|
getElementById() | id属性值一般唯一,返回对象 |
getElementByName() | 返回数组 |
getElementByClassName() | 返回数组 |
getElementByTagName() | 返回数组 |
获取表单域对象
获取表单域的值
获取列表框的值