HTML学习笔记01(标题,注释,段落,文本格式化,链接,换行,分割线,头部信息,插入图片,表格)

最新推荐文章于 2024-08-05 17:15:24 发布

数据攻城小狮子

最新推荐文章于 2024-08-05 17:15:24 发布

阅读量868

点赞数 3

分类专栏： HTML+CSS+JavaScript 文章标签： html css html5 css3 前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/weixin_46322367/article/details/105751460

版权

HTML+CSS+JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
这是一个系列，会持续更新

1.标题

HTML5共有6个级别的标题，h1定义最大标题，h6定义最小标题。

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>    
<h1>一级标题</h1>    
<h2>二级标题</h2>    
<h3>三级标题</h3>    
<h4>四级标题</h4>    
<h5>五级标题</h5>    
<h6>六级标题</h6>
</body>
</html>

在这里插入图片描述

2.注释

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<!--这是一个    注释-->
</body>
</html>

3.段落

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<p>这是一个段落</p>    
<p>这是另一个段落</p>
</body>
</html>

在这里插入图片描述

4.文本格式化

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<b>粗体</b>    
<em>着重文字</em>    
<i>斜体</i>    
<small>小号字</small>    
<strong>加重语气</strong>    
<sub>下标字</sub>    
<sup>上标字</sup>    
<ins>插入字</ins>    
<del>删除字</del>
</body>
</html>

在这里插入图片描述

5.链接

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<a href="https://www.baidu.com">百度</a>
</body>
</html>

6.换行、分割线

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<p>第一行<br>第二行</p>    
<p>分割线</p><hr>    
<p>分割线</p>
</body>
</html>

在这里插入图片描述

7.头部信息

<head> 元素包含了所有的头部标签元素。在
<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, 
<meta>, <link>,  
<script>, <noscript>, and <base>.

<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

8.插入图片

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>
</head>
<body>    
<p>插入的图片</p>    
<img src="加油.gif" alt="come on!">
</body>
</html>

在这里插入图片描述

9.表格

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<style>        
table{            
height: 5cm;            
width: 10cm;            
text-align: center;            
color: blue;            
border-color: aquamarine;        
}    
</style><!--设置表格大小,文字位置,颜色-->
</head>
<body>        
<table border="1">        
<caption>student data</caption><!--表格名称-->        
<tr><th>name</th><th>age</th></tr><!--表头-->        
<tr><td>tom</td><td>18</td></tr>    
</table>
</body>
</html>

在这里插入图片描述
align可以设置位置，left:居左；right:居右；center:居中
height:高度；width:宽度
在stytle中可以设置相关属性。

数据攻城小狮子

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习笔记01(标题,注释,段落,文本格式化,链接,换行,分割线,头部信息,插入图片,表格)

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。这是一个系列，会持续更新文章目录1.标题2.注释3.段落4.文本格式化5.链接6.换行、分割线7.头部信息8.插入图片9.表格1.标题HTML5共有6个级别的标题，h1定义最大标题，h6定义最小标题。<!DOCTYPE html><html la...
复制链接

扫一扫