Web-HTML基础

发表于 更新于 分类于 ， Waline： 阅读次数： 本文字数： 11k 阅读时长 ≈ 10 分钟

声明

指定确切的HTML版本

  • HTML5：
    1
    <!DOCTYPE html>
  • HTML4.01：
    1
    2
    3
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <!-- 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 -->
  • XHTML1.0：
    1
    2
    3
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <!-- 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。 -->
  • 更多可以到W3school查看。

基础标签

html：所有内容皆包含在内
head：头
body：身

标题

<h1>...<h6>等标签进行定义等。

段落

<p>段落，一段文字。（自动换行，<br/>手动换行）

链接

<a>标签定义链接。

图像

<img>标签定义图像。

属性

  • 标签可以拥有属性为元素提供更多的信息。
  • 属性以键/值对的形式出现。（如 href=”www.baidu.com"）
  • 标签的常用属性：
    1
    2
    3
    <h1>：align 对齐方式
    <body>：background-color 背景颜色，background 背景图片
    <a>：target 规定在何处打开链接
  • 通用属性
    class：规定元素的类名
    id：规定元素的唯一ID
    style：规定元素的样式
    title：规定元素的额外信息

格式化

1
2
3
4
5
6
7
8
9
10
11
<b>：粗体文字
<big>：大号字
<em>：着重文字，强调
<i>：斜体字
<small>：小号字
<strong>：加重语气
<sub>：下标字
<sup>：上标字
<ins>：插入字
<del>：删除字
<u>：下划线

样式

标签：
<style>：样式定义
<link>：资源引用
属性：
rel=”stylesheet”：外部样式表
type=”text/css”：引入文档的类型
三种样式表插入方法：
外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表：

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

链接

链接数据、文本链接、图片链接。
属性：
href 属性：指向另一个文档的链接。
name 属性：创建文档内的链接。
img 标签属性：
alt：替换文本属性（当图片无法正常显示时，所提示的内容）
width：宽
height：高
示例：

1
2
3
4
5
6
7
<a href="www.baidu.com">点击</a>  // 文本链接
<a href="www.baidu.com">   // 图片链接
  <img src="html.png" width="200px" height="200px" alt="html5logo">
</a>
// 文档内链接
<a name="tips">hello</a>
<a href="#tips">跳转到 hello</a>

表格

表格 描述
<table> 表格
<caption> 表格标题
<th> 表格的表头
<tr> 行
<td> 单元
<thead> 页眉
<tbody> 主体
<tfoot> 页脚
<col> 列属性

1、没有边框的表格：<table border="1">
2、表格中的表头：<tr><th>1</th><th>2</th></tr>
3、空单元格
4、带有标题的表格：
居左：<p>表格</p> (<table>上)
居中：<caption>表格</caption> (<table>下)
5、表格内的标签：<td><ul><li>1</li><li>2</li></ul></td>
6、单元格边距：<table cellpadding="10">
7、单元格间距：<table cellspacing="10">
8、表格内的背景颜色和图像：<table bgcolor="#d2691e" background="html.png">
9、单元格内容排列
10、跨行和跨列单元格

列表

标签 描述
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述

无序列表：
使用标签：<ul>、<li>、<ul type="disc">
属性：disc、circle、square （实体圆，空心圆，实体方块）
有序列表：
使用标签：<ol>、<li>、<ol type="A">、<ol start="10">
属性：A、a、1、I、i、start （start，从数字几开始有序）
嵌套列表：
使用标签：<ul>、<ol>、<li>
自定义列表：
使用标签：<dl>、<dt>、<dd>

1
2
3
4
5
6
<dl>
  <dt>hh</dt>
    <dd>打印</dd>
  <dt>gg</dt>
    <dd>打印</dd
</dl>

display:inline-block （横向排列）
list-style:none （去除前面的点）
text-align:center（文本对齐）
line-height:40px（文本高度）

块

HTML块元素
块元素显示时，通常会以新行开始。如：<h1>、<p>、<ul>
HTML内联元素
内联元素通常不会以新行开始。如：<b>、<a>、<img>
HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器。
HTML<span>元素
<span>元素是内联元素，可作为文本的容器，通常与<div>一起使用。

布局

<div>布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
  body{
    margin: 0px;    // 消除外边距
  }
  <!-- class 定义类名。以 . 引用 -->
  <!-- id 定义 ID 名，以 # 引用 -->
  #id{
    width: 100%;   // 可以百分比，也可以是具体数值。
    height: 950px;    // 主体容器的高必须是数值，子容器可以是百分比。
    background-color: aqua;
    float: left;	// 浮动，以左边对齐排列。
    clear: both;	// 消除浮动，以免容器被覆盖。
  }
</style>

<table>布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
  <table width="100%" height="950px" style="background-color: darkgray;">
    <tr>
      <!-- colspan：合并单元框 -->
      <!-- rowspan：跨行、纵向 -->
      <!-- colspan：跨列、横向 -->
      <td colspan="2" width="100%" height="10%" style="background-color: red;">一</td>
    </tr>
    <tr>
      <td  width="30%" height="80%" style="background-color: blue;">
        <ul>
          <li>ios</li>
          <li>android</li>
        </ul>
      </td>
      <td width="70%" height="80%" style="background-color: aqua;">二</td>
    </tr>
    <tr>
      <td width="100%" height="10%" style="background-color: black;">三</td>
    </tr>
  </table>
</body>

H5 新标签（语义化标签）
header：头部
nav：导航
footer：底部（address：地址）
article：一段有意义的内容，独立的
aside：侧边栏
time：定义日期或时间（会有推送。<time datetime="2016-05-01">）
ruby：加注释

1
2
3
4
5
<ruby>
    汉
    <rt>han</rt>
    <rp>内容</rp>
  </ruby>

mark：标记
details：描述细节

1
2
3
4
5
6
<details>
  一段描述
  <summary>
    标题
  </summary>
</details>

表单

表单用于获取不同类型的用户输入
常用表单类型：

1
2
3
4
5
6
7
8
9
10
<form>：表单
<input>：输入域
<textarea>：文本域
<label>：控制标签
<fieldset>：定义域
<legend>：域的标签
<select>：选择标签
<optground>：选项组
<option>：下拉列表中的选项
<button>：按钮

示例：

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<form>
  用户名：
  <input type="text" />	// 单行文本域
  <br />
  密码：
  <input type="password" />	// 密码框
  <br />
  
  喜欢的水果有：	// 多选
  苹果<input type="checkbox" />
  西红柿<input type="checkbox" />
  <br />
  
  请选择性别：	// 单选（checked="checked" 默认选中）
  男<input type="radio" name="sex" />
  女<input type="radio" name="sex" />
  <br />
  
  请选择选项：	// 下拉列表
  <select>
    <option>选项一</option>
    <option>选项二</option>
  </select>
  <br />
  
  // disabled="disabled"：禁用列表或列表项
  // name：列表名称
  // size：可见选项的数组（显示几列）
  // selected：选中（或 selected="selected"）
  <select name="ar" disabled="disabled" size="2">
    <option value="1" selected>嗯？</option>
  </select>
  <br />
  
  // 使用 optgroup 为 option 分组，label 指定分组名称。
  <select>
    <optgroup label="分组1">
      <option value="1">列1</option>
    </optgroup>
  </select>
</form>


// cols：宽度。rows：高度。。但通常都不用，使用css来定义。
// 多行文本可拖动改变大小，可使用css控制不变。style="resize:none;"。开始标签与结束标签不要有空格。
// placeholder：提示信息
// readonly：文本区只读
// required：文本区必填，不能与readonly同用。
<textarea cols="30" rows="30" >请输入</textarea>  // 多行文本域
<form>
  <input type="button" value="按钮" />		// 按钮
  <input type="submit" />		// 提交
  <input type="submit" value="确认" />		// 提交
</form>

form 表单的属性：
action=”URL”：一个URL地址，指定form表单向何处发送数据。
name：给表单起名，方便操作，并且表单提交，必须有name属性。
enctype=”string”：发送表单数据之前，如何编码。（enctype=”multipart/form-data”，以二进制。）
method=”get/post”：提交的方法。
表单提交默认 get 方式。

1
2
3
4
// 如果 <input> 以 file 的方式，以二进制传输最好。
<input type="button" />   // 需要结合js来使用
<input type="image" src="..." />  // 也具有提交效果，但不推荐使用，因为有时会提交两次。
<input type="reset" /> 重置按钮，清除表单信息。

元素集

1
2
3
4
5
6
<form>
<!-- 元素集，带外边框的 form 表单。 -->
  <fieldset>
    <legend>这是标题</legend>
  <fieldset/>
</form>

<label>标签为 input 元素定义标注，一般和 radio，checkbox 一起使用。
本身没什么效果，但可以绑定到 input 标签，使不用非点击按钮，点击文字也有效果。
通过 for 指向按钮的 id 来绑定。
示例:

1
2
3
4
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
</form>

隐藏域：<input type="hidden">，使用 name 和 value 来规定参数值和参数名。
定义隐藏的输入字段，通常用于想提交一些数据，但又不希望用户看到。

去除 button 的默认点击效果（边框）：outline:none；

框架

内联框架（iframe）
示例：

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
27
28
// frameborder：去除外边框
<iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe>


// 使用内联框架可以达到叠层的效果。
// framec.html
<body bgcolor="blue">
  FrameC
  <br/>
  <iframe src="frameb.html" width="600px" height="600px"></iframe>
</body>
// frameb.html
<body bgcolor="red">
  FrameB
  <br/>
  <iframe src="framea.html" width="400px" height="400px"></iframe>
</body>
// framea.html
<body bgcolor="black">
  FrameA
  <br/>
  <!-- target;_self 自身打开，_blank 新页面,_parent 父布局，top 顶 -->
  <a href="https://www.baidu.com/">百度</a>
</body>
// index.html
<body>
  <iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe>
</body>

示例：

1
2
3
4
5
6
7
8
9
10
// 切换 content
<div class="header">
  <ul>
    <li><a href="html.html" target="iframe">内容1</a></li>
    <li><a href="htm2.html" target="iframe">内容2</a></li>
  </ul>
</div>
<div id="content">
  <iframe id="iframe" name="iframe" src="html.html" frameborder="0" scrolling="no"></iframe>
</div>

背景

背景标签：background
背景颜色：bgcolor
颜色：
颜色是由一个十六进制符号来定义，这个符号由红色，绿色，蓝色的值组成（RGB）。
颜色最小值：0（#00）
颜色最大值：255（#FF）
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF
黑色：#000000
白色：#FFFFFF

实体

如 <, >。特殊符号无法直接显示，需要转换一下。（网上搜）

HTML5新增

input 类型：
email：适用于包含email类型，会自动验证email域的值。
url类型：会自动验证url域的值。（完整的地址）
number类型：包含数值的输入域，可以用min=”1”或max=”10”限制范围。（整型）
range类型：显示为滑动条，包含一定范围内数字值的输入域，min与max限定范围，value当前值。
Date类型：日期。
search类型：搜索域。（一般手机内使用）
color类型：提供一个面板，供选择颜色值。

新增标签：
progress：进度标签

1
2
3
<!-- value：当前值 -->
<!-- max：最大值 -->
<progress value="22.5" max="50"></progress>

section：

  • 定义文档节（和 div 类似）
  • 定义文章，这时一般带标题。

video：定义视频

1
2
3
4
5
6
7
8
9
10
11
<video src="my.mp4" controls="controls">如果不支持标签，给的提示。</video>


<video controls="controls">
  <!-- 多列出几种格式，以匹配浏览器 -->
  <!-- 从上向下依次尝试，如果都不支持，即提示信息。 -->
  <source src="1.ogg" type="video/ogg"></source>
  <source src="2.mp4" type="video/mp4"></source>
  <source src="3.webm" type="video/webm"></source>
  浏览器不支持
</video>

audio：音频

1
2
<!-- 与视频相似的使用方法 -->
<audio src="1.mp3" controls="controls"></audio>

datalist：提示可能值

1
2
3
4
5
<input list="cars" />
  <datalist id="cars">
    <option value="BMW"></option>
    <option value="volvo"></option>
  </datalist>

embed：引入 flash 等资源

1
<embed src="res/demo.swf" type="application/x-shockware-flash">这里不用写内容</embed>

canvas：画布，一般结合 js 使用。

HTML5 Web Storage

在 HTML5 中，除 Canvas 元素外，另一新增的重要功能，它可以在客户端本地保存数据，之前使用 Cookies，但有缺点。
1.大小：Cookies 的大小被限制在 4KB
2.宽带：Coolies 是随 HTTP 事务一起被发送，会浪费一部分发送 Cookies 时使用的宽带。
3.复杂性：要正确的操纵 Cookies 是很困难的。

Web Storage 功能是在 Web 上存储数据的功能，针对客户端本地而言，分两种：
1.session storage：将数据保存到 session 对象中，session 是指用户浏览网页所花费的时间，session 对象可以用来保存在这段时间内所要求保存的任何数据。
2.local storage：将数据保存到硬件设备（硬盘）中。

XHTML

  • 什么是 XHTML ：
    指的是可扩展超文本标记语言
    与 HTML4.01 几乎是相同的
    是更严格更纯净的 HTML 版本
    是以 XML 应用的方式定义的 HTML
    得到所有主流浏览器的支持
  • 为什么使用 XHTML：
    为了代码的完整性和良好性
  • 文档声明
    DTD：规定了使用通用标记语言的网页语法。
  • 三种 XHTML文档类型
    STRICT：严格类型
    TRANSITIONAL：过渡类型
    FRAMESET：框架类型
  • XHTML 元素
    必须正确嵌套
    必须关闭，即使是空标签。
    必须小写
    必须有根元素
  • XHTML 属性
    必须小写
    必须用双引号
    不能简写