初识HTML

chenxingjies

于 2020-12-21 17:03:35 发布

阅读量44

点赞数

文章标签： html

本文链接：https://blog.csdn.net/chenxingjies/article/details/111478815

版权

Day 1 HTML的基础

1、HTML概念

HTML=Hyper Text Markup Language(超本文标记语言)。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2、HTML标准格式

<!DOCTYPE html> --告诉浏览器使用什么规范
<html>
	<head>
		<meta charset="utf-8">--字符标准
		<title></title>--网页标题
	</head>
	<body>
	</body>--网页的主体内容
</html>

网页的基本标签

1、标题标签

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

代码：

<!DOCTYPE html>
<html>
                <head>
                                 <meta charsst="utf-8">
                                  <title>各种标题</title>
                </head>
                <body>
                <h1>标题1</h1>
                <h2>标题2</h2>
                <h3>标题3</h3>
                <h4>标题4</h4>
                <h5>标题5</h5>
                <h6>标题6</h6>
                </body>
</html>

网页展示的效果图：
在这里插入图片描述

2、段落标签

 <p>....</p>

代码：

<!DOCTYPE html>
<html>
             <head>
                             <meta charset="utf-8">
                                <title>p标签标示段落</title>
              </head>
              <body>
在p标签内：
               <p>我很帅！<br/>我很帅！
               </p>

没有在p标签内：
               <br/>我很帅！ <br/>我很帅！

网页展示效果图：
在这里插入图片描述
可以看出在p标签内的行距跟不在p标签的有一定区别

3、换行标签

   <br/>

没有换行标签的代码：

<!DOCTYPE html>
<html>
             <head>
                             <meta charset="utf-8">
                                <title>p标签标示段落</title>
              </head>
              <body>
               我很帅！我很帅！
               </body>
</html>

网页显示效果图：
在这里插入图片描述
有换行标签的代码：

<!DOCTYPE html>
<html>
             <head>
                             <meta charset="utf-8">
                                <title>p标签标示段落</title>
              </head>
              <body>
               我很帅！<br/>我很帅！
               </body>
</html>

网页显示的效果图：
在这里插入图片描述

4、水平线标签

<hr/>

代码：

<!DOCTYPE html>
<html>
     <head>
               <meta charset=“utf=8”>
                   <title>李清照--清平乐</title>
               <body>
                     <h3>清平乐</h3>
                     <hr/>
                     <p>
                     年年雪里，常插梅花醉， 挼尽梅花无好意，赢得满衣清泪！<br/>
                     今年海角天涯，萧萧两鬓生华。<br/>
                     看取晚来风势，故应难看梅花。
                     </p>         
               </body>
     </head>
</html>

网页显示效果图：
在这里插入图片描述
可以看到清平乐下面有水平线标签

chenxingjies

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

Day 1 HTML的基础1、HTML概念HTML=Hyper Text Markup Language(超本文标记语言)。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。2、HTML标准格式<!DOCTYPE html> --告诉浏览器使用什么规范<html> <head> <meta charset="utf-8">--字符标准 <title></title&g
复制链接

扫一扫