html入门

2020-08-19  本文已影响0人  哆啦A梦_ca52
<!DOCTYPE html>
#定义html5格式
<html lang="zh-CN">
<head>

         <meta charset="UTF-8">
<title>第一次练习</title>
标题
</head>
内容
<body>
欢迎来到html的时间
</body>
</html>
image.png 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    
    <h1>个人主页</h1>

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



</body>
</html>
image.png 
<!DOCTYPE html>
<html lang="zh-CN">
<head>

         <meta charset="UTF-8">
<title>第一次练习</title>
</head>
<body>
欢迎来到html的时间
<p>第一个段落
<br/>
换行后
</p>
<p>第二个段落
44&gt;7
#&gt是大于7
4&lt;9
#&lt;是小于9
</p>

</body>
</html>
image.png

26


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
    <p>

    HTML是 <span>HyperText Mark-upLanguage</span>的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，
    是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作
    就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑
    它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示
    的网页可以从一个网页链接跳转到另外一个网页。</p>

    <p>HTML是 <em>HyperText Mark-up Language</em> 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，
    是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作
    就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑
    它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示
    的网页可以从一个网页链接跳转到另外一个网页。</p>
    
    
    <div>HTML是 <i>HyperText Mark-up Language</i> 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，
    是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作
    就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑
    它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示
    的网页可以从一个网页链接跳转到另外一个网页。</div>


    <div>
        <h1>html概述</h1>
        <p>HTML是 <b>HyperText Mark-up Language</b> 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，
        是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作
        就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑
        它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示
        的网页可以从一个网页链接跳转到另外一个网页。</p>

    </div>

    <p><strong>HTML是 HyperText Mark-up Language的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，
        是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作
        就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑
        它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示
        的网页可以从一个网页链接跳转到另外一个网页。</strong></p>


    <div>
        <div>html概述</div>
        <div>HTML是 HyperText Mark-up Language</div>
    </div>



</body>
</html>
image.png 
网页插入图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页插入图片</title>
</head>
<body>
      <h1>图片</h1>
      <!-- 完整的写法是: src="./images/002.jpg"  ./表示当前目录，可以省略 -->
      <img src="images/timg.jpg" alt="图片" />
      <img src="images/timg.gif" alt="loading动画">
      <a href="008链接.html"> 去到网页8</a>
</body>
</html>
image.png 
008链接.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
<h1>网页的标题</h1>
<a href="006网页插入图片.html">去到图片的网页</a>
<a href="http://47.112.42.144" title="去到悟空编程的网站" target+"_blank">
#target+"_blank">新打开一个页面
#如果没有就直接在本页面切换了
<img src="images/logo.png" alt="悟空logo">
    </a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <a href="#">缺省的链接</a>
<body>
</html>



009列表标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<h1>有序列表</h1>
<!-- ol>li*3 -->
<ol>
 <li>html</li>
 <li>css</li>
 <li>javascript</li>
 </ol>
 <h1>无序列表</h1>
 <!-- ul>(li>a{新闻标题})*3 -->
 <ul>
 <li><a href="#">新闻一</a></li>
 <li><a href="#">新闻二</a></li>
 <li><a href="#">新闻三</a></li>
 </ul>
 <h1>定义列表</h1>
 <!-- dl>(dt+dd)*3 -->
 <dl>
     <dt>html</dt>
     <dd>负责页面结构</dd>
     <dt>css</dt>
     <dd>负责页面的表现</dd>
     <dt>javascript</dt>
     <dd>负责页面的行为</dd>
     </dl>
     </body>
     </html>
image.png

29
上一篇下一篇

猜你喜欢

热点阅读