HTML基础学习

最新推荐文章于 2024-10-04 06:11:34 发布

暄踽

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量203

点赞数 2

分类专栏： Web开发文章标签： html 学习 css

本文链接：https://blog.csdn.net/weixin_46003347/article/details/123159781

版权

Web开发专栏收录该内容

3 篇文章 2 订阅

订阅专栏

HTML基础

1.简介

超文本标记语言（HyperText Markup Language，HTML）是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。

2.简单的实例

注释语句格式：

<!DOCTYPE html>	<!-- 声明为 HTML5 文档 -->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--  meata描述性标签，它用来描述我们网站的一些信息-->
    <!--  meata一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML">
    <meta name="description" content="Study">
    <!-- title网页标题 -->
    <title>HTML基础学习</title>
</head>
<!--body标签代表网页主体-->
<body>
	Hello World!
</body>
</html>

注：在谷歌浏览器中使用键盘上的 F12 按键开启调试模式，就可以看到网页的组成标签。

3.排版标签

3.1 标题标签

标题标签的文字加粗，从h1至h6逐渐减小，且独占一行。

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

网页显示效果如下：

在这里插入图片描述

3.2 段落标签

段落标签的内容独占一行。如果段落内有多个空格，在网页上显示为一个空格。

<p>段落</p>

3.3 换行标签

让文字强制换行。

<br>

3.4 水平线标签

在页面中显示一条水平线。

<hr>

3.5 简单实践

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排版标签</title>
</head>

<body>
    <h1>一级标签</h1>
    <hr>
    <h2>二级标签</h2>
    <br>
    <h3>三级标签</h3>
    <hr>
    <h4>四级标签</h4>
    <br>
    <h5>五级标签</h5>
    <hr>
    <h6>六级标签</h6>
    <br>
</body>

</html>

展示效果如下：

在这里插入图片描述

4.文本格式化标签

给文字添加加粗、下划线、倾斜、~~删除线~~线等效果。

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>

<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>

5.超链接标签

点击之后，从一个页面跳转到另一个页面。

<a href="" target="_self/_blank"></a>

属性	说明
href	链接路径
target	链接在哪个窗口打开（`_self`在本网页打开,`_blank`在新网页打开）

显示特点：

a标签默认文字有下划线。
a标签从未点击过，默认文字显示蓝色。
a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）。

空链接的写法如下：

<a href="#">空链接</a>

6.媒体标签

6.1 图片标签

在网页中展示图片。

<img src="1.jpg" alt="text" title="text" width="x" height="y" />

属性	说明
src	图片的路径
alt	替换文本, 当图片不显示的时候显示的文字
title	鼠标悬停显示的文本（该属性可以用于多个标签）
width	图片的宽度
height	图片的长度

width和height属性只需要给出一个值, 另一个等比例缩放。

6.2 音频标签

在网页中插入音频。

<audio src="2.mp3" controls autoplay loop></audio>

属性	说明
src	音频的路径
controls	显示播放的组件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

6.3 视频标签

<video src="3.mp4" controls autoplay loop></video>

属性	说明
src	视频的路径
controls	显示播放的组件
autoplay	自动播放（谷歌浏览器可以让视频自动播放,但要配合muted属性实现自动静音播放）
loop	循环播放

7.列表标签

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类有无序列表、有序列表和自定义列表。

7.1 无序列表（unorder list）

在网页中表示一组无顺序之分的列表，如：新闻列表。列表的每一项前默认显示小圆点。

标签名	说明
ul	表示无序列表的整体，用于包裹标签
li	表示无序列表的每一项，用于包含每一行的内容

ul标签中只允许嵌套li标签；li标签中可以嵌套任意内容。

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
</ul>

显示效果如下：

在这里插入图片描述

7.2 有序列表（order list）

在网页中表示一组有顺序之分的列表，如：排行榜。列表的每一项前默认显示序号标识。

标签名	说明
ol	表示有序列表的整体，用于包裹标签
li	表示有序列表的每一项，用于包含每一行的内容

ol标签中只允许嵌套li标签；li标签中可以嵌套任意内容。

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
</ol>

显示效果如下：

在这里插入图片描述

7.3 自定义列表（definition list）

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

dl标签中只允许嵌套dt/dd标签；dt/dd标签中可以包含任意内容；dd前会默认显示缩进效果。

<dl>
    <dt>学科</dt>
    
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
</dl>

显示效果如下：

在这里插入图片描述

8.表格标签

在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表。

8.1 基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

标签的嵌套关系：table 包含 tr, tr包含td。

8.2 相关属性

设置表格基本展示效果。

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

实际开发时针对于样式效果推荐用CSS设置。

8.3 合并单元格

将水平或垂直多个单元格合并成一个单元格。

属性名	属性值	效果
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

左上原则：

上下合并：只保留最上的，删除其他
左右合并：只保留最左的，删除其他

8.4 简单实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>姓名</td>
            <td>班级</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td rowspan="3">1班</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>85</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

显示效果如下：

在这里插入图片描述

9.表单标签

9.1 input系列标签

在网页中显示收集用户信息的表单效果，如：登录页、注册页。input标签可以通过type属性值的不同，展示不同效果。

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，可以配合JavaScript添加功能

9.1.1 占位符

placeholder：提示用户输入内容

<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">

9.1.2 单选框和多选框

属性名	说明
name	分组。有相同name属性的单选框为一组，一组中同时只能有一个被选中
checked	默认选中，可用于单选框和多选框

性别: <input type="radio" name="sex">男
	<input type="radio" name="sex" checked>女
爱好: <input type="checkbox" name="hobby">运动 
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby">摄影
    <input type="checkbox" name="hobby">读书

9.1.3 文件上传

multiple：多文件选择

<input type="file" multiple>

9.1.4 按钮

在网页中显示不同功能的按钮表单控件。

标签名	type属性值	说明
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，可以配合JavaScript添加功能

可以配合form标签使用。

9.2 button按钮标签

谷歌浏览器中button默认是提交按钮；button标签是双标签，便于包裹其他内容：文字、图片等。

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮，默认无功能，可配合JavaScript添加功能

<button>按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

9.3 select下拉菜单标签

标签名	说明
select	下拉菜单的整体
option	下拉菜单的每一项

属性selected：下拉菜单的默认选中

<select name="" id="">
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>深圳</option>
</select>

9.4 textarea文本域标签

textarea：文本域整体

属性名	说明
cols	文本域可见宽度
rows	文本域可见行数

文本域效果的右下角可以拖拽改变大小。

<textarea cols="30" rows="10"></textarea>

9.5 简单实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <h1>注册页面</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称"><br>
        密码：<input type="password" placeholder="请输入密码">
        <br>
        <br>
        性别: 
        <input type="radio" name="sex" checked> 男
        <input type="radio" name="sex"> 女
        <br>
        <br>

        所在城市:
        <select>
            <option>北京</option>
            <option selected>上海</option>
            <option>广州</option>
        </select>
        <br>
        <br>
        爱好:
        <input type="checkbox" checked> 运动
        <input type="checkbox" checked> 摄影
        <input type="checkbox"> 读书
        <br>
        <br>
        个人介绍: 
        <br>
        <textarea name="" id="" cols="60" rows="10"></textarea>
        <br>
        <!-- 上传文件 -->
        <input type="file" multiple>
        <br>
        <br>
        <!-- 按钮: input button -->
        <input type="submit" value="注册">
        <button type="reset">重置</button>
    </form>
</body>
</html>

显示效果如下：

在这里插入图片描述

10.布局标签

10.1 无语义化的布局标签

实际开发网页时会大量频繁使用div和span这两个无语义的布局标签。

标签名	说明
div	一行只显示一个（独占一行）
span	一行可以显示多个

<div>这是div标签</div>
<div>这是div标签</div>
<br>
<span>这是span标签</span>
<span>这是span标签</span>

显示效果如下：

在这里插入图片描述

10.2 有语义的布局标签

在HTML5新版本中，推出了一些有语义的布局标签供开发者使用，可用于手机端页面。

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

在这里插入图片描述

11.块元素和行内元素

块元素：无论内容多少，该元素独占一行，例如p、h1-h6…
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，例如a、strong、em…

CSS可将块元素切换为行内元素。

12. 字符实体

如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格。

在网页中展示特殊符号效果时，需要使用字符实体代替

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
'	撇号	`'`（IE不支持）
¢	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyrigh）	`©`

暄踽

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
'	撇号	`'`（IE不支持）
¢	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyrigh）	`©`

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
'	撇号	`'`（IE不支持）
¢	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyrigh）	`©`

HTML基础学习

HTML基础

文章目录

1.简介

2.简单的实例

3.排版标签

3.1 标题标签

3.2 段落标签

3.3 换行标签

3.4 水平线标签

3.5 简单实践

4.文本格式化标签

5.超链接标签

6.媒体标签

6.1 图片标签

6.2 音频标签

6.3 视频标签

7.列表标签

7.1 无序列表（unorder list）

7.2 有序列表（order list）

7.3 自定义列表（definition list）

8.表格标签

8.1 基本标签

8.2 相关属性

8.3 合并单元格

8.4 简单实践

9.表单标签

9.1 input系列标签

9.1.1 占位符

9.1.2 单选框和多选框

9.1.3 文件上传

9.1.4 按钮

9.2 button按钮标签

9.3 select下拉菜单标签

9.4 textarea文本域标签

9.5 简单实践

10.布局标签

10.1 无语义化的布局标签

10.2 有语义的布局标签

11.块元素和行内元素

12. 字符实体

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
'	撇号	`'`（IE不支持）
¢	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyrigh）	`©`