HTML

发表于 | 分类于

Web标准

网页的结构：(.html)负责网页的内容整理和分类

网页的样式：(.css)负责设计网页的板式、颜色、文字大小等

网页的行为：(.js)负责网页的动态交互

HTML

HTML的组成

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释。

  • 文字
  • 图片
  • 链接
  • 多媒体

标签

标签的关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 嵌套关系 -->
<html>
  <head>
    <title>标题</title>
  </head>
</html>

<!-- 并列关系 -->
<html>
  <head>
  </head>
  <body>
  </body>
</html>

标签的分类

单标签，功能性标签，不包裹内容

语法：<标签名 />

单标签一般作为功能性标签中间没有内容，单标签在新版本中可以不使用/，<br/>和<br>

1
<br>

双标签，一般用来包裹内容

语法：<开始标签> 标签内容 </结束标签>

双标签中间用来包裹内容。

1
<strong>字体加粗</strong>

标签语义化

标签语义化对标签其强调作用，做好SEO优化。

标签语义化对标签其强调作用，对于语义好的网页会更加受到搜索引擎的青睐，做好SEO优化。

优化的方式：

  1. 花钱买关键字 见效快，花钱多
  2. 让页面更加规范，语义更加明确（在合适的地方使用合适的标签）
  3. 制作静态页面
  4. 发外链

标题标签

1
2
<h1>标题标签</h1>
<!-- 标题标签分为1-6级，1级权重最大，6级最小 -->

标签属性

在写网页的时候，有的时候一个单独的标签不能提供比较完整的信息，这时候就可以借助于标签属性来完善。

语法：<标签名称 标签属性1=”标签属性值1” 标签属性2=”标签属性值2”>

标签属性通常以键值对的形式出现，当键和值相同时可直接写标签。

1
2
3
4
5
6
src 路径
alt 加载失败时替换文本
title 标题
width 宽度
height 高度
border 边框

格式化标签

在合适的地方使用语义化标签

1
2
3
4
5
6
7
8
9
10
11
<strong>字体加粗</strong>
<b>字体加粗<b>

<em>字体倾斜</em>
<i>字体倾斜</i>

<ins>下划线</ins>
<u>下划线</u>

<del>贯穿线</del>
<s>贯穿线</s>

【推荐使用strong、em、ins、del标签，让页面更加规范，语义更加明确（在合适的地方使用合适的标签）】

常用标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<p>段落标签</p>

<!-- 图片标签 -->
<img src=”图片地址” alt=”图片的替换文本” title=”图片的标题”>

<!--
src属性的作用：导入图片的路径
alt属性的作用：当图片加载（导入）失败的时候的替换文本
title属性的作用：当鼠标移入图片的时候显示的标题
-->

<!-- 链接标签 -->
<a href=”链接的地址” target=”链接的打开方式”>可以跳转的链接内容</a>

<!--
只要被a标签包裹就可以跳转
target=”blank”以新的窗口打开
target=”_self”覆盖当前的页面打开连接，不写此标签为默认值。
-->

链接跳转

链接跳转的分类：

  1. 站内跳转：href="本地路径"方法同图片地址跳转
  2. 站外跳转：href="http://www.baidu.com"
  3. 锚点跳转：href="#自定义名" a标签跳转属性 <a href=”#自定义名”>内容</a>

在需要跳转到的标签添加 id="自定义id名" <X标签 id=”自定义名”>内容</a>

路径分类

  • 相对路径：从当前文件出发去找目标文件的过程称之为相对路径查
    1. 当前文件和目标文件在同一个文件夹下，直接写目标文件名字即可 src="图片名.格式"
    2. 当前文件和目标前不在同一个文件夹下
      • 下级目录：从当前文件出发 先找到对应的文件夹 在找到对应的文件 如： 文件夹名字/文件夹名字/文件名字
      • 上级目录：从当前文件出发 往上找../ 如：../../文件名字或者../../文件夹名字/文件夹名字文件名字（每多一级目录加一个../）
  • 绝对路径：从盘符或者 http:// 出发去找目标文件的过程就是绝对路径，带有盘符或者 http:// 都是绝对路径；
  1. 盘符地址：从盘符开始出发去找文件 X:\路径\图片名称 Windows系统下\和/都可以
  2. 网络地址：在网络上获取图片地址以 http:// 开头的地址

列表标签

列表分为三种

  • 无序列表
1
2
3
4
5
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
  • 有序列表
1
2
3
4
5
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
  • 自定义列表
1
2
3
4
5
6
<dl>
<dt>列表标题</dt>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
<dd>列表标题的解释说明</dd>
</dl>

列表的注意

  1. <ul></ul>或者<ol></ol>中只能嵌套<li></li>，直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li>与</li>之间相当于一个容器，可以容纳所有元素。多级列表嵌套在<li></li>容器中。
  3. <dl></dl>中只能嵌套<dt></dt>和<dd></dd>，直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。
  4. <dd></dd>之间相当于一个容器，可以容纳所有元素。<dt></dt>一样。`

注释标签

浏览器不解析的标签，作用是用来提示开发人员或者便于开发人员理解和阅读。

sublime快捷生成注释的方式 选中需要注释的文本 ctrl + /

1
2
3
4
5
<!-- 注释文本 -->
<!--
  多行
  注释
-->

特殊字符

HTML中的预留字符必须被替换为字符实体。

在HTML中，某些字符是预留的。

在HTML中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体（character entities）。

1
2
3
4
5
6
7
8
9
10
11
12
13
  &nbsp; 空格
< &lt; 小于号
> &gt; 大于号
& &amp; 和号
¥ &yen; 人民币
© &copy; 版权
® &reg; 注册商标
° &deg; 摄氏度
± &plusmn; 正负号
× &times; 乘号
÷ &divide; 除号
² &sup2; 平方（上标2）
³ &sup3; 立方（上标3）
显示结果 描述 实体名称 实体编号
‘ ‘ 空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
“ 引号 &quot; &#34;
‘ 撇号 &apos; (IE不支持) &#39;
￠ 分（cent） &cent; &#162;
£ 镑（pound） &pound; &#163;
¥ 元（yen） &yen; &#165;
€ 欧元（euro） &euro; &#8364;
§ 小节 &sect; &#167;
© 版权（copyright） &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

表格标签

表格基本构成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>

表格由三个基本标签构成

  • table 表格
  • tr 表格行
  • td 单元格

注意事项：

  1. td必须嵌套在tr标签中，tr必须嵌套在table标签中。
  2. 有多少单元格td,就表示有几列表格。

表格常用的基本属性

  • width 表格的宽度
  • height 表格的高度
  • border 表格的边框
  • align 表格的对齐方式 align=”left center right”
  • cellspacing 单元格与单元格的间距
  • cellpadding 单元格与单元格内容的间距

表格标签，增强语义性的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
  • thead 表格的头部
  • th 标签相对 td 来说更有语义性,并且会将内部的文字加粗且居中
  • tbody 表格的身体

【注意：表格的结构不是一定需要的，但是添加上表格的结构会使表格的语义更明确】

合并单元格

  • 跨行合并 rowspan 上下合并单元格，rowspan写在上面的表格，向下合并，合并后删除多余的单元格。
  • 跨列合并 colspan 左右合并单元格，colspan写在左面的表格，向右合并，合并后删除多余的单元格。
  • 需要合并几个单元格，这个值就是几，合并了单元格，就必须删除多余的单元格。
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
<table border=”1” cellspacing=”0” cellpading=”20”>
<thead>
  <tr>
    <th>8</th>
    <th>8</th>
    <th>8</th>
    <th>8</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <td rowspan=”2”>8</td> <!-- 上下合并单元格 -->
    <td>8</td>
    <td colspan=”2”>8</td> <!— 左右合并单元格 —>
    <!— 被左右合并的单元格，合并后删除。 —>
    </tr>
    <tr>
    <!— 被上下合并的单元格，合并后删除。 —>
    <td>8</td>
    <td colspan=”2”>8</td> <!— 左右合并单元格 —>
    <!— 被左右合并的单元格，合并后删除。 —>
  </tr>
</tbody>
</table>

表单

【表单的作用：收集信息发送至后台】

表单由三大部分组成：

  1. 表单域（将内部的表单信息收集起来发送至后台）
  2. 提示文本（用来提示用户当前的输入信息）
  3. 表单（用来收集用户输入的信息）

表单域

<form action=”提交的后台地址”></form>

  • action 提交的后台地址
  • methods 提交的方法

【用户点击提交后，表单域包裹的区域，收集到的信息才会被收集。】

表单的分类

<input type="">

  • type的取值：
    • text 单行文本输入框，须具备name属性
    • password 密码框，须具备name属性
    • radio 单选框（在多个里面选择一个），单选框要生效必须具备name属性，并且同一种类型的单选框的name取值必须一样，想要后台知道用户选择的是什么，还须添加value属性
    • checkbox 复选框（在多个里面选择某几个），须具备name属性，想要后台知道用户选择的是什么，还须添加value属性
    • button 普通按钮，用来生成按钮
    • file 用户上传控件，用来生成上传控件按钮
    • submit 提交按钮，用来生成提交信息按钮
    • search 搜索框，在移动端使用search，会在弹出的键盘生成搜索按钮；
  • name 被提交的项目名称
  • vaule 被提交的属性
  • label标签是增加用户体验，被包裹的内容，鼠标点击都可以选中 <label></label>
  • radio 和 checkbox 默认选中项的属性 checked
  • select 框的默认选中项 selected
  • 键值对相同，只需写属性
  • textarea 多行文本输入框 <textarea></textarea>
  • select 下拉选项框
1
2
3
4
5
<select name=”xxx”>
  <option value=”1”>1</option>
  <option value=”2”>2</option>
  <option value=”3”>3</option>
</select>

完整表单代码示例

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
<form action=”demo.php”>
  <h1>超级大标题</h1>

  <label>用户名：<input name=”username” type=”text” placeholder=”请输入用户名” autofocus></label><br>
  <label>密码：<input name=”passwoord” type=”password” placeholder=”请输入密码”></label><br>

  性别：
  <label><input type=”radio” name=”gender” value=”male”>男</label>
  <label><input type=”radio” name=”gender” value=”female” checked=”cheched”> 女</label><br>

  爱好：
  <label><input type=”checkBox” value=”1” name=”jijie” checked> 春 </label>
  <label><input type=”checkbox” value=”2” name=”jijie” checked> 夏 </label>
  <label><input type=”checkbox” value=”3” name=”jijie” checked> 秋 </label>
  <label><input type=”checkbox” value=”4” name=”jijie” checked> 冬 </label><br>

  序号选择
  <select name=”序号”>
    <option value=”01” selected=”selected”>01</option>
    <option value=”02”>02</option>
    <option value=”03”>03</option>
  </select><br>

  <label><input type=”file”></label><br>

  <input type=”submit” value=”提交注册”>

  <br>
  <br>
  <br>
  <br>

  <label>
  你想说什么：
  <textarea name=”text”></textarea>
  </label><br>

  <button>我是按钮</button>
</form>

容器标签

  • <div>内容</div> 就是一个盒子，这个盒子没有任何的语义，div就是用来包裹其他标签，作为模块存在
  • <span>内容</span> 就是一个盒子，这个盒子没有任何的语义，span一般用来包裹文本

H5新增的标签及属性

H5新增的标签

header,nav,section,footer,aside,article 这些新增的标签不会带来任何视觉效果的改变，它的作用仅是增加了语义性

header 表示header里面包裹的东西是网站的头部区域

nav 表示nav里面包裹的东西是网站的导航

section 表示里面包裹的东西是网页的某一个模块

footer 表示footer标签里面包裹的东西是网页的页脚

aside 表示aside标签里面包裹的东西是网页的侧边栏

article 表示article标签里面包裹的东西是网页的文章页

H5新增的表单

1
2
3
<input type=”range”> 滑块
<input type=”date”> 日期控件
<input type=”number”> 唤醒数字键盘

H5新增的表单新属性

  • placeholder 占位文本，相对于value属性，让用户点击时，不需要删除文字
  • autofocus 自动获取焦点，鼠标光标自动在输入框

重要的语义性标签（H5新增标签）

1
2
3
4
5
6
<header>网站的头部</header>
<footer>网站的底部</footer>
<aside>网站的侧边栏</aside>
<nav>网站的导航</nav>
<article>文章页</article>
<section>区块</section>

多媒体标签

视频

视频标签一般分为两种：

  1. 将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可；
    • 优点：没有兼容性，不占硬盘
    • 缺点：有广告植入
  2. 使用H5新增的video方法 <video src=”视频路径”></video>;
    • 优点：没有广告
    • 缺点：有兼容性，一般运用在手机端

【在实际工作中，使用较多的还是第三方 ，如果是手机端，那么video使用较多】

1
2
3
4
5
6
7
8
9
10
11
12
video标签的常用属性 <video src=”media/mp4.mp4” autoplay controls loop ></video>
<!--
1.autoplay 自动播放
2.controls 播放控件
3.loop 循环播放
 -->

<!-- 第三方视频 -->
<iframe height=498 width=510 src=’http://player.youku.com/embed/XMTQyMjY4NTI4NA==‘ frameborder=0 ‘allowfullscreen’></iframe>

<!-- H5本地视频 -->
<video src=”media/mp4.mp4” autoplay controls loop ></video>

音频

1
2
3
4
5
6
audio标签的常用属性 <audio src=”media/mp3.mp3” autoplay controls loop ></audio>
<!--
1.autoplay 自动播放
2.controls 播放控件
3.loop 循环播放
-->

音频与视频的标签写法相同

多媒体兼容性语法

因为浏览器的不同对于很多格式的多媒体支持的种类也不一样。

视频兼容性写法

1
2
3
4
5
6
7
8
9
10
11
12
<video autoplay controls loop>
<source src=”media/mp4.mp4”>
<source src=”media/mp4.ogg”>
<source src=”media/mp4.webm”>
<a href=”http://www.baidu.com">你的浏览器太低端了，赶紧升级吧，点击升级</a&gt;
</video>

<audio autoplay controls loop>
<source src=”media/bgsound.mp3”>
<source src=”media/bgsound.ogg”>
<source src=”media/bgsound.wav”>
</audio>

【在多媒体标签中嵌套source标签，浏览器会对标签层层解析，直到能识别。】

分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多