文章目录
HTML入门!!
一、什么是HTML
1、简单介绍
-
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
-
可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
-
HTML文档也叫做 web 页面
-
HTML文档的后缀名为.html 和.htm
-
HTML 标签对大小写不敏感,但是一般人使用小写的标签。因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
2、实例解析:
文章目录
<!DOCTYPE html>
声明为 HTML5 文档<html>
元素是 HTML 页面的根元素head>
元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。<title>
元素描述了文档的标题<body>
元素包含了可见的页面内容<h1>
元素定义一个大标题<p>
元素定义一个段落
3、编译器推荐:
- HbuliderX(免费) : 下载官网
- 进去download后,压缩包下载好了直接解压就可以。
- WebStorm(需要自行破解,不会也可以私聊我):下载官网
- IntelliJ IDEA : 也可以写html,不过上面两个更好一些。
二、HTML 基础标签
1、简单介绍:
- HTML 标记标签通常被称为 HTML 标签,是由尖括号包围的关键词,比如
<p></p>
- HTML 标签通常是成对出现的标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。
- 只有一个的又被称为自闭和标签。
2、<!DOCTYPE> 声明
-
<!DOCTYPE>
声明位于文档中的最前面的位置,处于<html>
标签之前,它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。 -
HTML 5:
<!DOCTYPE html>
-
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
具体版本的声明:菜鸟
-
对于中文网页需要使用
<meta charset="utf-8">
声明编码,否则会出现乱码
3、head标签
-
head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。
-
在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为:
,
<head> 内部标签 | 说明 |
---|---|
定义网页的标题,显示在搜索引擎结果页面的标题 | |
定义网页的基本信息(供搜索引擎) | |
4、body标签
- body标签是文档的主体
(1)、标题、段落和文字标签(常用)
-
<h1>~<h6>
标签来定义标题 -
段落是通过
标签定义的。
标签 | 语义 | 说明 |
---|---|---|
<h1>~<h6> | header | 标题 |
<p> | paragraph | 段落 |
<br> | break | 换行 |
<hr> | horizontal rule | 水平线 |
<div> | division | 分割(块元素) |
<span> | span | 区域(行内元素) |
<!-- --> | 无 | 注释 |
(2)、文本格式化标签(常用)
标签 | 语义 | 说明 |
---|---|---|
<strong> | strong(加强) | 加粗 |
<em> | emphasized(强调) | 斜体 |
<cite> | cite(引用) | 斜体 |
<sup> | superscripted(上标) | 上标 |
<sub> | subscripted(下标) | 下标 |
(3)、页特殊符号
网页特殊符号只需要记忆一个就行了,就是HTML空格“ ”,其他的特殊符号我们不需要记忆,当我们需要的时候再回来查找一下特殊符号表就OK了。一般&***;例如:©;表示版权符号。
(4)、自闭合标签
HTML标签分为2种,一种是“一般标签”,另外一种是“自闭合标签”。一般标签有开始符号和结束符号,自闭合标签只有开始符号没有结束符号。
-
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
-
自闭合标签由于没有结束符号,不能插入其他标签或文字,只能定义自身的属性。
(1)、一般标签
举例:<body></body>
(2)、自闭合标签
举例:<br/>
、<hr/>
5、HTML元素和属性
- HTML 元素以开始标签起始,以结束标签终止,之间的内容及元素的内容。
- HTML空元素:没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
- HTML 元素可以设置属性,属性可以在元素中添加附加信息
- 属性一般描述于开始标签,以名称/值对的形式出现,比如:name=“value”。
- 最常用的两种属性
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
6、HTML区块
-
HTML 可以通过
和 将元素组合起来。 -
块元素和行内元素
HTML元素根据浏览器表现形式分为两类:①块元素;②行内元素;
块元素特点:
(1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
(2)块元素内部可以容纳其他块元素或行元素;常见块元素有:h1~h6、p、hr、div等。
-
行内元素特点:
(1)可以与其他行内元素位于同一行;
(2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;
常见行内元素有:strong、em、span等。
-
-
大多数网站可以使用
或者 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。div 元素是用于分组 HTML 元素的块级元素。
三、链接和图片
1、链接
-
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
-
如何在HTML文档中创建链接。具体实现:
<a href="链接地址" target="目标窗口的打开方式">
-
<a>
标签target属性 :
target属性值 | 说明 |
---|---|
_self | 默认方式,即在当前窗口打开链接 |
_blank | 在一个全新的空白窗口中打开链接 |
_top | 在顶层框架中打开链接 |
_parent | 在当前框架的上一层里打开链接 |
-
锚点链接,就是点击某一个超链接,它就会跳到当前页面的某一部分。
-
功能性链接
邮箱: <a href="mailto:1271022565">点击联系我</a> QQ推广: <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1271022565&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1271022565:53" alt="点击联系我" title="点击联系我"/></a>
2、图像
-
定义图像的语法是:
<img src="url" alt="some_text">
-
设置图片大小:
<img src="" alt="加载错误" width="304" height="228">
属性 | 说明 |
---|---|
map | 定义图像地图 |
area | 定义图像地图中的可点击区域 |
src | 图像的文件地址 |
alt | 图片显示不出来时的提示文字 |
title | 鼠标移到图片上的提示文字 |
- map和area标签的使用:测试
- 不同图片的区别:
- JPG可以很好处理大面积色调的图像,如相片、网页一般的图片。
- PNG格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
- GIF格式图片图像效果很差,但是可以制作动画。
四、列表
- HTML 支持有序、无序和定义列表:
标签 | 描述 |
---|---|
ol | 定义有序列表 |
ul | 定义无序列表 |
li | 定义列表项 |
dl | 定义列表 |
dt | 自定义列表项目 |
dd | 定义自定列表项的描述 |
-
有序列表演示:
代码: <ol> <li>Coffee</li> <li>Milk</li> </ol>
结果:
- Coffee
- Milk
-
无序列表演示:
代码: <ul> <li>Coffee</li> <li>Milk</li> </ul>
结果:
- Coffee
- Milk
-
定义列表演示:
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
结果:
-
Coffee
- - black hot drink Milk
- - white cold drink
五、表格
1、HTML表格:
-
表格由
标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由<td>
标签定义) -
案例:
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
演示:
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
2、表格语义记忆
通过语义化记忆表格标签:
标签 | 语义 | 说明 |
---|---|---|
table | table(表格) | 表格 |
tr | table row(表格行) | 行 |
td | table data cell(表格单元格) | 单元格 |
标签 | 语义 | 说明 |
---|---|---|
thead | table head | 表头 |
tbody | table body | 表身 |
tfoot | table foot | 表脚 |
th | table header | 表头单元格 |
3、表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签,其他标题标签<caption>、表头单元格<th>可以没有,但是这3者必须要有。
基本语法:
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
4、表格完整结构
表格完整结构应该包括表格标题(caption)、表头(thead)、表身(tbody)和表脚(tfoot)4部分。
语法:
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
5、合并行和合并列
-
合并行使用td标签的rowspan属性,而合并列则用到td标签的colspan属性。
-
合并行:
<td rowspan = "跨越的行数"></td>
<table> <tr> <td>姓名:</td> <td>小明</td> </tr> <tr> <td rowspan="2">喜欢水果:</td> <td>苹果</td> </tr> <tr> <td>香蕉</td> </tr> </table>
演示:
姓名: 小明 喜欢水果: 苹果 香蕉 -
合并列:
<td colspan = "跨越的列数"></td>
<table> <tr> <td colspan="2">前端开发技术</td> </tr> <tr> <td>HTML</td> <td>CSS</td> </tr> <tr> <td>JavaScript</td> <td>jQuery</td> </tr> </table>
演示:
前端开发技术 HTML CSS JavaScript jQuery
六、表单
-
表单使用表单标签 来设置:
-
表单元素有:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
1、input标签表单
-
大部分表单都是用input标签完成的
-
语法:
<input type="表单类型" />
-
input是自闭合标签,它是没有结束符号的。其中type属性取值如下表所示。
-
- 文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
- 密码字段通过标签 来定义:
- 标签定义了表单单选框选项
- 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
- 定义了提交按钮.
2、textarea标签表单(多行文本框)
-
语法:
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
-
案例:
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>
-
结果展示:
3、select和option
-
下拉列表由标签和标签配合使用。
-
语法:
<select multiple="mutiple" size="可见列表项的数目">
<option value="选项值" selected="selected">选项显示的内容</option>
……
<option value="选项值">选项显示的内容</option>
</select>
-
案例:
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
-
结果展示:
java html css js
七、HTML 框架
-
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
-
iframe语法:
<iframe src="URL"></iframe>
-
Iframe - 设置高度与宽度:
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
-
Iframe - 移除边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
-
使用iframe来显示目标链接页面:
-
实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
-
八、多媒体
-
Web 上的多媒体指的是音效、音乐、视频和动画。
-
什么是多媒体?
多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。
1、HTML 音频(Audio)
- 声音在HTML中可以以不同的方式播放,插件可以使用 标签 或者 标签添加在页面上.。
(1)使用<embed>
元素
<embed>
标签定义外部(非 HTML)内容的容器。(这是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效)。- 语法:
<embed height="50" width="100" src="***.mp3">
- 注意:
<embed>
标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证,不同的浏览器对音频格式的支持也不同。- 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
- 如果用户的计算机未安装插件,无法播放音频。
- 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。
(2)使用 <object>
元素
- 语法:
<object height="50" width="100" data="***.mp3"></object>
(3)使用 HTML5 元素
-
HTML5 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在所有浏览器中都有效。
-
<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>
-
<source src=https://gitee.com/li-lele/repo/blob/master/MP3/1.mp3" type=“audio/mpeg”>
2、HTML 视频(Video)
(1)使用 <embed>
标签
<embed>
标签的作用是在 HTML 页面中嵌入多媒体元素。- 语法:
<embed src="intro.swf" height="200" width="200">
(2)使用 <object>
标签
<object>
标签的作用是在 HTML 页面中嵌入多媒体元素。<object data="intro.swf" height="200" width="200"></object>
(3)使用 HTML5 <video>
元素
-
HTML5
<video>
标签定义了一个视频或者影片,<video>
元素在所有现代浏览器中都支持。 -
<video width="320" height="240" controls> <source src="https://gitee.com/li-lele/repo/blob/master/viedo/1.mp4" type="video/mp4"> <source src="***.ogg" type="video/ogg"> <source src="***.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
- 您的浏览器不支持 video 标签。