【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

常用的html标签、认识浏览器

一、常用的html标签

1.0在此我们先简单了解一下HTML及HTML5

HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

HTML5是最新的HTML标准

• HTML5 是最新的 HTML 标准。
• HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
• HTML5 拥有新的语义、图形以及多媒体元素。
• HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
• HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

1.1、什么是标签

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如：

标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签

但也有单独呈现的标签比如：

1.2、html文档的结构

1.3、标签的分类

• 文字
• 布局
• 列表
• 表格
• 表单
• 超链接
• 图像和音频

1.4、标签的简单介绍

文字
文字容器

文字修饰
（这仅是我找到的一些常用标签，敬请参考）
另 关于注释标签

布局

<div	定义文档中的分区或节
< nav	导航栏
<span	内联

对于标签<div简介-----块级元素
它的内容自动地开始一个新行。实际上，换行是 <div固有的唯一格式表现。可以通过 <div 的 class 或 id 应用额外的样式。
div可选属性

<span标签简介----用来组合文档的行内元素

• 请使用 来组合行内元素，以便通过样式来格式化它们。
• span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
  例子
  
  列表

<ul	无序列表
<ol	有序列表
<dl	自定义列表

标签<ul简介—
在这里我们用了type属性改变了默认的列表项目符号
标签<ol简介----
用法和<ul相似，在type属性中的值发生了简单的变化

标签<dl简单举例----
dl 标签（定义了定义列表）用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。
表格
涉及到标签

在此我们以一个简单的实例介绍一下：

对于表格更细致的美化，我们可以借助以下属性（仅是一些常用属性）：

boder	表格边框宽度
cellspacing	表格间距
cellpadding	表格填充
width	表格宽度

表单（<form）

<input	定义输入控件
<button	定义按钮
<select	定义选择列表(下拉列表）
<option	定义选择列表中的选项

关于input标签-----
<input type=“text” name=" " value=" "

type类型	对应效果
text	定义常规文本输入
radio	定义单选按钮输入（选择多个选择之一)
submit	定义提交按钮

value中的值于表单中内容有关。
关于button标签-----
标签定义一个按钮。

在 button 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。
关于select标签----可创建单选或多选菜单
<option标签用于定义列表中的可用选项,无结束标签

超链接

<a	定义锚
<link	定义文档与外部资源关系

关于标签<a----
在此举一例：

href：超链接指向

1. URL：统一资源定位符 http://www.w3school.com
2. 文件路径 ./l.html
   target：指向的链接的打开方式
   
   除去framename,其余四个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
   图像和音频

<img	定义图像
<audio	定义声音内容
<video	定义视频

关于标签<imag----
必须属性

属性	值	描述
src	URL	规定显示图像的URL
alt	text	规定图像的替代文本

src的URL分为相对路径、绝对路径

• 绝对路径：由根目录到当前文件的地址
  例 C://xx/xxx.jpg

• 相对路径：由当前文件到需要的文件的地址

                 当前目录： ./
                 上级目录： ../
  

一个简单的实例

关于标签<audio----
它也有src属性和<img中相同

注：Internet Explorer 8 以及更早的版本不支持 标签。

关于标签<video

注：Internet Explorer 8 以及更早的版本不支持 标签。
如要对上述几种标签在网页中的显示做规定可以借助以下属性

二、认识浏览器

2.1、什么是浏览器

• 浏览器，是安装在电脑里的能够让网页内容呈现给用户，同时能实现与用户交互的一种软件。
• 网页浏览器，是显示网站服务器或文件系统内的文件，且可以与用户交互的一种应用软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为HTML格式，有些网页需特定浏览器才能正确显示。

浏览器的内核

浏览器的内核也就是浏览器所采用的渲染殷勤，它决定了浏览器如何显示网页的内容，以及页面的格式信息。也正以为内核不同，所以浏览器有兼容问题。
IE内核 Trident
谷歌内核 Webkit/Blink
火狐内核 Gecko
Safarri内核 Webkit
欧朋内核 Presto
注：我们在前端工作中要留意不同浏览器的格式信息，注意兼容问题

2.2、 常见主流浏览器

在前端开发工作中，浏览器就是我们前端开发者的承载体，处理的所有的页面都需要浏览器中表现。而浏览器也确实不如它表面那样简单，它也有多层的结构以更好的实现与用户的交互，这些结构分工明确，也让我们前端的工作更好的实现！

想要对浏览器有更多了解请转入这篇文档

总结

以上就是我本周的预习博客，在本周的预习学习中，我对HTML标签有了一些更深的了解，同时对浏览器的工作机制和效果也有了更深的认识。但对一些地方仍怀有疑惑，对有些标签的使用仍不够清晰，期待下周的课程！。