HTML学习

最新推荐文章于 2022-11-14 20:37:24 发布

小脸猫爱吃鱼

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量290

点赞数

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

本文链接：https://blog.csdn.net/qq_41402786/article/details/114984284

版权

1.1HTML是什么

HTML,HTML全程"Hyper Text Markup Language"超文本标记语言，简单来说网页就是用HTML来制作的。HTML是一种描述性语言，是一门非常容易入门的语言。

1.2HTML的基本结构

在这里插入图片描述

DOCTYPE:告诉浏览器我们要使用什么规范
head：表示网页的头部
title：网页标题
meta:描述性标签，用来描述我们网站的一些信息
body:代表网页主体

1.3HTML的基本标签

（1）HTML标签

整个网页是从 < html> 这里开始的，然后到< /html>结束。

（2）head标签

head标签代表页面的头，定义一些特殊内容，这些内容往往都是不可见的。（在浏览器不可见）。

（3）body标签

body标签代表页面的身，定义网页展示内容，这些内容往往都是可见内容（在浏览器可见）。

1.4段落与文字

（1）段落与文字标签

标签	语意	说明
< h1>~< h6>	header	标题标签
< p>< /p>	paragraph	段落标签
< hr/>	horizontal rule	水平线标签
< br/>	break	换行标签
< div/>	division	分割（块元素）
< span>	span	区域（行内元素）

< h1>一级标签< /h1>
~
< h6>一级标签< /h6>

< p>两只老虎，两只老虎，< /p>
< p>跑得快，< /p>
< p>跑得快，< /p>
< p>一只没有眼睛一只没有尾巴，< /p>
< p>真奇怪，真奇怪，< /p>
< p>两只老虎，两只老虎，跑得快，跑得快，< /p>
< p>一只没有眼睛，一只没有尾巴，真奇怪，真奇怪。< /p>

内容
< hr/>
内容

两只老虎< br/>
两只老虎< br/>

（1）文本格式化标签

标签	语意	说明
< strong>	strong加强	加粗
< em>	emphasized(强调)	斜体
< cite>	cite(引用)	斜体

（2)特殊符号

空格：& nbsp;
大于号：& gt
小于号：&lt
版权符号:&copy
特殊符号记忆方式： &：

1.5图像标签

图像格式：JPG\GIF\PNG\BMP

< img src="…/resources/image/1.jpg" alt:=“头像” title=“张真人”,width="300"height=“300”>
注意：图片地址必填，建议采用相对地址…/–为上一级目录
图片名字必填（鼠标放到图片处时会显示title名字）

1.6链接标签

< a href=“链接地址” target=“目标窗口的打开方式”>

<a href=“1.我的第一个网页.html"target=”_blank">点击我跳转到页面< /a>

< a href=“http://www.baidu.com” target="_self">点击我跳转到百度< /a>

< a href=“http://www.baidu.com”>< img src="…/resources/image/1.jpg" alt=“头像” title=“张沈若” width=“300” height=“300”>< /a>

< !–使用name作为标记–>
< a name=“top”>顶部< /a>
< a herf="#top">回到顶部< /a>

a标签

href:必填，表示要跳转到哪个页面

target:表示窗口在哪里打开

_blank 在新标签中打开

_self在自己的网页中打开

功能性标签
邮件标签：mailto

< a href=“mailto:1432904378@qq.com”>点击联系我-< /a>

1.7列表

列表就是信息资源的一种展示形式
共有三种列表：
无序列表：ordered list
有序列表:unordered list
定义列表:definition list
有序列表：

在这里插入图片描述
无序列表：

在这里插入图片描述
自定义列表：
dl:标签
dt:列表名称
dd:列表内容

1.8表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!-- 表格Table
行 tr(table rows)
列 td
表格加边框border属性
-->
<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--跨行rowspan-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

</body>
</html>

表格练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table border="2px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr<

最低0.47元/天解锁文章

小脸猫爱吃鱼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

1.1HTML是什么HTML,HTML全程"Hyper Text Markup Language"超文本标记语言，简单来说网页就是用HTML来制作的。HTML是一种描述性语言，是一门非常容易入门的语言。1.2HTML的基本结构DOCTYPE:告诉浏览器我们要使用什么规范head：表示网页的头部title：网页标题meta:描述性标签，用来描述我们网站的一些信息body:代表网页主体1.3HTML的基本标签（1）HTML标签整个网页是从 < html> 这里开始的，然后到
复制链接

扫一扫