HTML入门基础

最新推荐文章于 2022-08-11 13:53:26 发布

雾兮

最新推荐文章于 2022-08-11 13:53:26 发布

阅读量488

点赞数 2

分类专栏： Web 文章标签： html html5

本文链接：https://blog.csdn.net/wuxi1271022565/article/details/120796111

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

HTML入门！！
- 完结：html样式会在CSS中讲解，有问题请在评论区指出，我会及时修改。

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了。一般&***；例如：&copy；表示版权符号。

(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 标签。

完结：html样式会在CSS中讲解，有问题请在评论区指出，我会及时修改。

雾兮

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML入门基础

文章目录HTML入门！！一、什么是HTML1、简单介绍HTML 标签对大小写不敏感，但是一般人使用小写的标签。因为万维网联盟（W3C）在 HTML 4 中**推荐**使用小写，而在未来 (X)HTML 版本中**强制**使用小写。2、实例解析：3、编译器推荐：二、HTML 基础标签1、简单介绍：2、声明3、head标签4、body标签(1)、标题、段落和文字标签（常用）(2)、文本格式化标签（常用）(3)、页特殊符号(4)、自闭合标签5、HTML元素和属性6、HTML区块三、链接和图片1、链接2、图像四、
复制链接

扫一扫