洛玖随笔
0%

【HTML5】 HTML5 学习笔记

发表于   |   更新于 分类于 ，
本文字数： 11k 阅读时长 ≈ 10 分钟 
HTML5 学习笔记

Html 概述

什么是Html

  • Html
    • Hyper Text Markup Language

Html5 的优势

  • 浏览器对html5的支持
    • 苹果
    • google
    • 苹果
    • opera
    • Mozilla
  • 市场的需求
  • 跨平台

W3C 标准

  • W3C
  • W3C标准包括
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(css)
    • 行为标准(DOM、ECMAScript )

HTML的基本结构

以下Html的基本结构

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>

一个html大体由以下两部分组成

  • 头部
1
2
3
4
5

<head>
    <meta charset="utf-8">
    <title></title>
</head>
  • 主体
1
2
3

<body>
</body>

其中、等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签如<hr/>; 意为用/来关闭空元素

网页的基本信息

DOCTYPE 声明

1
<!DOCTYPE html>

声明文档类型

title

1
<title>标题</title>

网页的标题

meta

1
2
3
4

<meta charset="UTF-8">
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="网站描述">

描述性标签，用来描述网页的一些信息，

页面结构分析

元素名 描 述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容（(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏)
nav 导航类辅助内容 
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<header>标题</header>
<section>主体</section>
<footer>脚部</footer>
</body>
</html>

网页基本标签

标题标签

1
2
3
4
5
6
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

1
2
3
4
<p>一段话，这里一段话。</p>
<p>一段话，这里 一段话。</p>
<p>一段话，这里 一段话。</p>
<p>一段话， 这里一段话。</p>

一段话，这里一段话。

一段话，这里 一段话。

一段话，这里 一段话。

一段话， 这里一段话。

换行标签

1
1231<br/>23123123<br/>123123<br/>1

1231
23123123
123123
1

水平线标签

1
2
3
123123
<hr/>
123123

123123

123123

字体样式标签

粗体

1
<strong>粗体</strong>

粗体

斜体

1
<em>斜体</em>

斜体

注释和特殊符号

注释

1
<!--注释-->

特殊符号

空格
1
空&nbsp;格
大于号
1
&gt;
小于号
1
&lt;
版权符号
1
&copy;

其他的现场查就好了

图像标签

常见的图像格式

  • jpg
  • png
  • gif
  • bmp

语法格式

1
<img src = "./git-pages.png" alt = "git pages" title ="git pages 图标">
git pages
属性 描述
src 图像地址
alt 图像的替代文字
title 图像悬停的文字
width 图像宽度
height 图像高度

链接标签

1
<a href="链接路径" target="目标窗口位置">链接文本或者图像</a>

文本链接

1
<a href="https://www.baidu.com/">跳转到百度</a>

跳转到百度

图像链接

1
2
3
<a href="https://www.baidu.com/">
    <img src="./git-pages.png" alt="git pages" title="git pages 图标">
</a>
git pages

链接属性

在新标签中打开

1
<a href="https://www.baidu.com/" target="_blank" >新标签中跳转到百度</a>

新标签中跳转到百度

在本标签中打开

1
<a href="https://www.baidu.com/" target="_self" >在本标签跳转到百度</a>

在本标签跳转到百度

锚链接 页面内跳转

1
<a href="#什么是Html">跳转到本界面的<strong>《什么是Html》</strong></a>

跳转到什么是Html

功能性链接

邮箱
1
<a href="maitto:wx.98@qq.com" >点击发邮件给wx.98@qq.com</a>

点击发邮件给wx.98@qq.com

QQ
1
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1262148122&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1262148122:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

点击这里给我发消息

行内元素 & 块元素

块元素

  • 无论内容多少，该元素独占一行
  • (p、h1-h6..))

行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排在一行
  • ( a . strong . em …)

一个标签会导致另起一行就为块元素

列表标签

有序列表

1
2
3
4
5
6
7
<ol>
    <li>aaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
    <li>eeee</li>
</ol>
  1. aaa
  2. bbbb
  3. cccc
  4. dddd
  5. eeee

无需列表

1
2
3
4
5
6
7
<ul>
    <li>aaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
    <li>eeee</li>
</ul>
  • aaa
  • bbbb
  • cccc
  • dddd
  • eeee

自定义列表

1
2
3
4
5
6
7
<dl>
    <dt>列表名称</dt>
    <dd>列表内容1</dd>
    <dd>列表内2容</dd>
    <dd>列表3内容</dd>
    <dd>列4表内容</dd>
</dl>
列表名称
列表内容1
列表内2容
列表3内容
列4表内容

表格标签

为什么使用表格

  • 简单通用
  • 结构稳定

基本结构

行 <tr> 列 <td>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
 <tr>
   <td>1.1</td>
   <td>1.2</td>
   <td>1.3</td>
 </tr>
 <tr>
   <td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
 </tr>
 <tr>
   <td>3.1</td>
   <td>3.2</td>
   <td>3.3</td>
 </tr>
 <tr>
   <td>4.1</td>
   <td>4.2</td>
   <td>4.3</td>
 </tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3
4.1 4.2 4.3

跨列 olspan=""

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
 <tr>
   <td colspan="3">1.1</td>
 </tr>
 <tr>
   <td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
 </tr>
 <tr>
   <td>3.1</td>
   <td>3.2</td>
   <td>3.3</td>
 </tr>
 <tr>
   <td>4.1</td>
   <td>4.2</td>
   <td>4.3</td>
 </tr>
</table>
1.1
2.1 2.2 2.3
3.1 3.2 3.3
4.1 4.2 4.3

跨行 rowspan=""

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
 <tr>
   <td rowspan="4">1.1</td>
   <td>1.2</td>
   <td>1.3</td>
 </tr>
 <tr>
   <td>2.2</td>
   <td>2.3</td>
 </tr>
 <tr>
   <td>3.2</td>
   <td>3.3</td>
 </tr>
 <tr>
   <td>4.2</td>
   <td>4.3</td>
 </tr>
</table>
1.1 1.2 1.3
2.2 2.3
3.2 3.3
4.2 4.3

媒体元素

视频

1
<video src = "Learn1.mp4" controls>  </video>

音频

1
<audio src = "洛天依、王朝 - 歌剧.mp3" controls>  </audio>

iframe 内联框架

1
2

<iframe src="引用页面的地址" name="框架标识名"></iframe>

表单

1
2
3
<form method="get/post" action="表单提交的位置">
    .......
</form>

其中的基础标签如下：

属性 说明
type 指定元素的类型。 text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type 为text或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或 password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中

文本框

1
2
3
<form method="get" action="./result.html">
    <input type="text" name="username">
</form>

密码框

1
2
3
<form method="get/post" action="./result.html">
    <input type="password" name="password">
</form>

单选框

1
2
3
4
<form method="get" action="./result.html">
    <input type="radio" name="sex" value="1" checked/>男
    <input type="radio" name="sex" value="2"/>女
</form>

多选框

1
2
3
4
5
6
<form method="get" action="./result.html">
    <input type="checkbox" value="1" name="tag">1
    <input type="checkbox" value="2" name="tag">2
    <input type="checkbox" value="3" name="tag" checked>3
    <input type="checkbox" value="4" name="tag">4
</form>
1 2 3 4

checked可以设置默认选中

普通按钮

1
2
3
<form method="get" action="./result.html">
    <input type="button" name="btn1" value="点击">
</form>

图片按钮

1
2
3
<form method="get" action="./result.html">
    <input type="image" src="./btn.png">
</form>

下拉框

1
2
3
4
5
6
7
8
9
<form method="get" action="./result.html">
    <select name="地区列表">
        <option value="1">陕西</option>
        <option value="2">河南</option>
        <option value="3">山东</option>
        <option value="4">北京</option>
        <option value="5" selected>上海</option>
    </select>
</form>

selected可以设置默认选中

文本域

1
2
3
<form method="get" action="./result.html">
    <textarea name="textarea" cols="40" rows="8"></textarea>
</form>

文件域

1
2
3
<form method="get" action="./result.html">
    <input type="file" name="files">
</form>

滑块

1
2
3
<form method="get" action="./result.html">
    <input type="range" name="range" min="0" max="100">
</form>

搜索

1
2
3
<form method="get" action="./result.html">
    <input type="search" name="search">
</form>

提交按钮

1
2
3
<form method="get" action="./result.html">
    <input type="submit" name="submit">
</form>

重置按钮

1
2
3
<form method="get" action="./result.html">
    <input type="reset" name="reset">
</form>

表单验证

默认提示信息

1
2
3
<form method="get" action="./result.html">
  <input type="text" name="username" placeholder="提示信息">
</form>

不能为空

1
2
3
4
<form method="get" action="./result.html">
  <input type="text" name="username" required>
  <input type="submit" name="submit">
</form>

正则表达式

1
2
3
4
<form method="get" action="./result.html">
  <input type="text" name="email" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
  <input type="submit" name="submit">
</form>

邮件验证

1
2
3
4
<form method="get" action="./result.html">
  <input type="email" name="youremail">
  <input type="submit" name="submit">
</form>

URL

1
2
3
4
<form method="get" action="./result.html">
  <input type="url" >
  <input type="submit" name="submit" >
</form>

数字

1
2
3
4
<form method="get" action="./result.html">
  <input type="number" name="num" min="10000" max="10000000" step="1000"/>
  <input type="submit" name="submit">
</form>

表单应用

隐藏 hidden

1
2
3
<form method="get" action="./result.html">
    input：<input type="text" name="username" hidden>
</form>
input：

只读 readonly

1
2
3
<form method="get" action="./result.html">
    <input type="text" name="username" value="只读文本框" readonly>
</form>

禁用 disabled

1
2
3
4
```html
<form method="get" action="./result.html">
    <input type="text" name="username" disabled>
</form>

结束，感谢查阅