从零开始学html(1)

最新推荐文章于 2024-06-14 14:36:26 发布

azraelxuemo

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量346

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/azraelxuemo/article/details/106493641

版权

html页面是由标签组成，标签是由尖括号包围的关键词，比如 <html>
标签通常是成对出现的，比如 <html> 和 </html>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

html基本结构

<!DOCTYPE html> //声明为 HTML5 文档
<html> // 页面的根元素
  <head> //包含文档的元（meta）数据
 </head>
 <body> //包含可见的页面内容
 </body>
</html>

在这些结构里面插入元素进而形成了我们的丰富多彩的页面
一般就是在head头部之间，和body之间插入元素

<!DOCTYPE html>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。doctype html声明是不区分大小写的，大小写都可以

head是指浏览器显示的头部,就是这个东西
在这里插入图片描述
这个显示的就是浏览器的标签<title>
打开记事本,输入

<!doctype html>
<html>
<head>
<title>hello world</title>
</head>
</html>

title里插入的内容就是我们可以看到的标签
写完了保存，保存为test.html,点击该文件就会在浏览器中打开
在这里插入图片描述
body里面就可以写我们在页面上显示的内容

<h1>-<h6>是标题，1是最大的标题，6是最小的标题
<p> 定义一个段落
每一个完整的<h></h>或者是<p></p>会自动换行

<!doctype html>
<html>
<body>
<h1>这是大标题</h1>
<h6>这是小标题</h6>
 <p>这是一个段落</p>
</body>
</html>

在这里插入图片描述
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK
所以最好这样写，在头部添加声明，头部不仅是用来显示标签，还可以用来配置整体的页面环境

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>这是大标题</h1>
<h6>这是小标题</h6>
 <p>这是一个段落</p>
</body>
</html>

<br>换行,也可以写成<br/>不需要成对出行

<hr> HTML 页面中创建水平线。可用于分隔内容。也可以写成

不需要成对出行
上面两个可以出现在 <h>或者 <p>内部，也可以出现在外部

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>这是<br>换行<br/>换行</h1>
<br/>
<hr />
 <p>这是<hr >分割<hr />分割</p>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="https://www.baidu.com">这是一个链接</a>
</body>
</html>

在这里插入图片描述这个时候是在本地跳转

这种是新窗口打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="https://www.baidu.com/" target="_blank" >这是新窗口打开的链接</a>
</body>
</html>

在这里插入图片描述双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，如：name=‘John “ShotGun” Nelson’，如果还使用双以后会出现错误

注释写法如下:

<!-- 这是一个注释 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

这个时候什么也显示不出来

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>我爱学习</li>
<li>学习爱我</li>
</ul> 
</body>
</html>

在这里插入图片描述
同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>我爱学习</li>
<li>学习爱我</li>
</ol>
</body>
</html>

在这里插入图片描述
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<dl>
<dt>我</dt>
<dd>超级爱学习</dd>
<dt>学习</dt>
<dd>----却不爱我</dd>
</dl>
</body>
</html>

在这里插入图片描述

azraelxuemo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始学html(1)

html页面是由标签组成，标签是由尖括号包围的关键词，比如标签通常是成对出现的，比如和标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签html基本结构<!DOCTYPE html> //声明为 HTML5 文档<html> // 页面的根元素 <head> //包含文档的元（meta）数据 </head> <body> //包含可见的页面内容 </body>&l
复制链接

扫一扫