Lzone

always be doing

0%

HTML5总结

发表于 更新于 分类于
本文字数： 4.4k 阅读时长 ≈ 4 分钟
前端基础学习，网页开发的起始

HTML概念

静态网页

超链接

指向另一个地址<a href="地址" traget="">名称</a>地址#可以跳转自身

target 内涵
_blank 另开页面
_self 自身页面
_parent 上级页面
_top 顶级页面

创建文档内链接<a name="tips"></a>
另一个超链接可以跳转至该位置
<a href="#tips">跳转</a>

图片<img src="图片地址">

三种样式表插入方法

外部样式表:

其他文件中插入

<link rel="stylesheet" type="text/css" href=“mystyle.css">
内部样式表:

head中插入

1
2
3
4
<style type=“text/css">
    body {background-color: red}
    p {margin-left: 20px}
</style>

内联样式表:

body中插入

<p style="color: red>

表格&列表

标签 描述
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<Col> 定义表格的列属性
标签 描述
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述

HTML块

1、HTML块元素
块元素在显示时，通常会以新行开始
如: <h1>、<p>、<ul>
2、HTML内联元素
内联元素通常不会以新行开始
如:<b>、<a>、<img>
3、HTML<div>元素

<div>元素也被称为块元素，其主要是组合HTML元素的容器，内部元素自动换行

4、HTML<span>元素
`元素是内联元素，可作为文本的容器，内部元素只在一行显示

布局

div布局(单元前#div可删除)

在head中插入 实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
    #div body{
        margin: 0px;
    }
    #div container{.
        width: 100%
        height: 950px;
        background-color: blue;
    }
    #div heading{
        width:100%;
        height: 10%;
        background-color: blue;
    }
    #div menu{
        width:30%;
        height: 90%;
        background-color: blue;
    }
    #div body{
        width:70%;
        height: 90%;
        background-color: blue;
    }
</style>

table布局

在body中插入 实例：

1
2
3
4
5
6
7
8
9
<table width="100%" height="950px" style="background-color: darkgray">
    <tr>
        <td colspan="2" width="100%" height="10%" style="background-color: aqua">头部</td>
    </tr>
    <tr>
        <td width="30%" height="90%" style="background-color: blue">左菜单</td>
        <td width="70%" height="90%" style="background-color: blue">主体</td>
    </tr>
</table>

表单

使用实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form>
    用户名;
    <input type="text"">
    <br/>
    密码;
    <input type="password">
    <br/>
    你喜欢的水果有?
    <br/>
    苹果<input type="checkbox">
    西红柿<input type="checkbox">
    香蕉<input type="checkbox">
    <br/>
    请选择您的性别;
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
    <br/>
    <select>
        <option>网址1</option>
        <option>网址1</option>
        <option>网址3</option>
    </select>
    <input type="button" value="内容">
    <input type="submit">
</form>
<textarea cols="30" rows="30">默认信息</textarea>

按钮可直接在表单外用<button onclick=""></button>引用

表单与PHP交互

PHP环境搭建暂略

method:

get会将表单内容与地址结合

post则不会且更安全

1
2
3
<form action="php地址" method="">
    表单
</form>

框架与背景

常用框架<iframe>

背景图片:<background>

背景颜色:<bgcolor>

字符转实体

有些字符无法直接显示在网页上，如< > &等

当需要特定字符时上网搜索

XHTML书写规范

  1. 元素语法
    • 正确嵌套
    • 始终关闭
    • 必须小写
    • 文档必须有根元素
  2. 属性语法
    • 必须小写
    • 必须引号包围
    • 禁止最小化

插入多媒体

  1. audio播放音频格式：mp3 ogg wav

    1
    2
    3
    4
    5
    6
    src:文件路径
    autoplay:自动播放
    loop:循环
    controls:控制条
    muted:静音
    preload:预加载（不能与autoplay共用）

  2. video播放视频格式：mpa ogg webm

    1
    2
    3
    部分属性同音频
    width/height:宽高
    poster:海报（播放之前）

  3. embed嵌入内容加载插件

    1
    2
    部分属性同视频
    type:类型

引入其他的Html

需要JQuery依赖

  • 如果是springboot项目，需要提前配好Controller映射，否则是不能直接访问到template下的html资源的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    @Controller
    @RequestMapping("/html")
    public class HtmlController {
        @RequestMapping("/head.html")
        public String head() {
            return "html/particle/head";
        }
        
        @RequestMapping("/foot.html")
        public String foot() {
            return "html/particle/foot";
        }
        
        @RequestMapping("/layout.html")
        public String layout() {
            return "html/particle/layout";
        }
        
        @RequestMapping("/side.html")
        public String side() {
            return "html/particle/side";
        }
    }

  • html代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    <!-- 头部 -->
    <div id="head"></div>
    <!-- 底部 -->
    <div id="foot"></div>
    <!-- 侧边导航 -->
    <div id="side"></div>

    <!-- 引用公共资源 -->
    <script type="text/javascript">
        $(document).ready(function() {
            $("#foot").load("/html/foot.html");
            $("#head").load("/html/head.html");
            $("#side").load("/html/side.html");
        });
    </script>