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样式表的定义与使用

定义

  1. 标签选择器: HTML标签定义
        p{background-color:blue;color:red}
  2. 类别选择器: class定义
        .cs1{font-family:yahei;font-size:15px}
  3. ID选择器: id定义
        #cs2{color:yellow}

使用

  1. 行内式(HTML标签的style属性内)
    <p style="color: blue;font-family:yahei"></p>

  1. 内嵌式(<head>内的<style>标签内)

     <style type="text/css">
     h1{color:blue;font-size:60px}
     .cls1{}
     #id1{}
 </style>

  2. 链接式(<head>内的<link>标签引入css文件)

    <link href="xx.css" type="text/css" rel="stylesheet"></link>
  1. 导入式
    <style type="text/css">
    @import url(*.css file)
    </style>

JavaScript脚本语言

JavaScript的基本语法

  1. 数据类型

整型int，浮点型float，字符串string，布尔型boolean，空类型null

  1. 变量

var 变量名[= 值];(变量声明可以忽略)

  1. 运算符

与Java语言中支持的运算符及其功能相同

  1. 控制语句

  2. 函数的定义和调用

  • 定义

    • 嵌入
    • 链接
function fun_name() {
    document.write("print");
}


var fun_name=function() {
    document.write("print");
}

  • 调用

    通过事件调用

JavaScript的事件

JavaScript的对象

  1. window

HTML内容在window对象中显示。同时window对象提供了用于控制浏览器窗口的方法。window对象属性的常用方法如下

方法 描述
alert() 弹出一个警告对话框
confirm() 显示一个确认对话框
prompt() 弹出一个提示对话框，并要求输入一个简单的字符串
setTimeout(timer) 在经过指定的时间后执行代码
clearTimeout() 取消对指定代码的延迟执行
setInterval() 周期性地执行指定的代码
clearInterval() 停止周期性地执行代码
  1. location

location对象实现网页的跳转。[^HTML中使用<a>标签，JavaScript中使用location对象]

  1. history
属性方法 描述
  1. document

获取Element对象

方法 描述
getElementById() id属性值一般唯一，返回对象
getElementByName() 返回数组
getElementByClassName() 返回数组
getElementByTagName() 返回数组

获取表单域对象

获取表单域的值

获取列表框的值