HTML基础之简介、结构、常见标签
文章目录
- HTML简介
-
- 常用浏览器及内核
- Web标准
- HTML、CSS、JavaScript的关系
- HTML标签
-
- 标签的结构
- 标签的类型
- 常用标签
-
- 标题标签
- 段落标签
- 换行标签
- 水平分割线标签
- 字体标签
- 文本格式化标签
- 图像标签
- 超链接标签
- 特殊字符
- 下标标签
- 语义标签
- 文本语义标签
- 背景标签
- 滚动标签
HTML简介
- 超文本标记语言(Hyper Text Markup Language，简称HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
- HTML被用来结构化信息，也可用来在一定程度上描述文档的外观和语义。它是通向WEB技术世界的钥匙。
- HTML是用来描述网页的一种语言。它不是一种编程语言，而是一种标记语言(markup language)，标记语言是一套标记标签(markup tag)，它使用标记标签来描述网页。
常用浏览器及内核
目前可称为五大浏览器四大内核
内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chorme/Opera | Blink | chrome/opera浏览器内核 Blink是Webkit的分支 |
目前国内一般浏览器都会采用Webkit/Blink内核。如360、UC、QQ、搜狗等
Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C（万维网联盟）是国际著名的标准化组织。
Web标准的构成：主要包括结构（HTML）、表现（CSS）和行为(JavaScript)。
最佳标准：结构、样式、行为相分离。分别写在HTML文件、CSS文件、JavaScript文件中
HTML、CSS、JavaScript的关系
- HTML 用于构建网页结构，展示页面内容
- CSS 用于美化网页，布局页面，设置网页元素
- JavaScript 用于控制页面元素，与后端数据交互
HTML标签
标签的结构
：表示当前的html文件是html5的文档(html5的规范)
： lang表示开发语言
：charset表示使用的字符集，UTF-8支持中文
: 页面的根标签
：头部标签，页面的常规信息
：主体标签，页面的主体信息
标签的类型
- 单表签：<标签名/>
- 双标签：<标签名>
常用标签
标题标签
<hn>内容hn> n的取值从1到6，数字越小字体越大，并且自动加粗、自动换行
段落标签
<p>内容p>
换行标签
<br/>
水平分割线标签
<hr/> <hr color="颜色" size="粗细" width="宽度"/>
字体标签
<font size="字体大小" color="字体颜色" face="字形"> 内容 font>
文本格式化标签
<b>内容b> / <strong>内容strong>（推荐） 字体加粗
<i>内容i> / <em>内容em>（推荐） 斜体
<u>内容u> / <ins>内容ins>（推荐） 下划线
<s>内容s> / <del>内容del>（推荐） 删除线
图像标签
<img src="图像名" alt="图像加载异常提示信息" width="宽度" height="宽度"/>
关于路径：
- 绝对路径：从根目录开始的路径
- 相对路径：从当前目录开始的路径
路径的使用：
- ’ . /’ : 表示当前目录
- ’ … /’ :表示当前目录的上一级目录
注意：
- 反斜杠(’ \ ‘)：在windows操作系统中以双反斜杠(’\’)作为路径分隔符
- 斜杠(’ / ')：是Linux操作系统下的路径分隔符
超链接标签
<a>a> 实现页面跳转
（1）文字超链接
<a href="URL(页面地址)" target="网页显示的位置"> 文字 a>
（2）图像超链接
<a href="URL(页面地址)" target="网页显示的位置">
<img src="图像名称"/>
a>
特殊字符
（1）空格：
（2）大于：>
（3）小于：<
（4）版权符号：©
（5）注册符号：®
（6）摄氏温度：°
（7）乘号：×
（8）除号：÷
（9）平方上标：²
（10）立方上标：³
下标标签
<sub>下标 sub>
语义标签
<thead>thead> 表格头部
<tbody>tbody> 表格主体
文本语义标签
<mark>内容mark> 文本高亮显示
<cite>内容cite> 应用标签
背景标签
<body bgcolor="颜色值"> 设置页面背景颜色
<body background="图像名"> 设置背景图像
滚动标签
（1）图像滚动
<marquee behavior=" " direction=" ">
<img src="图像路径" width=" " height=" ">
marquee>
- direction属性表示滚动方向，取值有4个：left、right、up、down
- behavior属性表示滚动的速度，数字越小速度越快
（2）文字滚动
<marquee behavior="" direction="">
<font color="" size="" face="">滚动的文字font>
marquee>