美文网首页
前端笔记(1)

前端笔记(1)

作者: rtrhhthth | 来源:发表于2018-07-04 20:45 被阅读0次

    html概述

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

    html注释:

    html基本标签:

    1,文档声明:<!DOCTYPE html>是一个文档声明,表示这是一个HTML页面

    2,html标签:<html>...</html>这个页面是从<html>开始的,到</html>结束

    3,head标签:<head>....</head>为网页的页头

          在HTML中,一般来说,只有6个标签能放在head标签内
    
          title标签    meta标签   link标签   style标签    script标签    base标签
    

    4,title标签:唯一的作用就是定义网页标题

    5,body标签:<body>....</body>为网页的页身

    html基本结构代码如下:

    <!DOCTYPE html>

      <html>
    
          <head> 
    
                   <meta charset="UTF-8">
    
                  <title>网页标题</title>
    

    网页标题

          </head>
    
          <body>
    
                    网页内显示的内容
        </body>
    
     </html>
    

    html标签特点:

    html的标签大部分是成对出现的,少量是单个出现的,特定标签之间可以相互嵌套,嵌套就是指一个标签里面可以包含一个或多个其他的标签,包含的标签和父标签可以是同类型的,也可以是不同类型:

    成对出现的标签:

    <body>.....</body>

    <html>......</html>

    单个出现的标签:


    强制换行


    横界线

    标签之间的嵌套:

    <p>

         <span>.......</span>
    

    </p>

    html标题

    通过<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系,比如说:<h1>用作主标题(最重要的,一个页面只能有一个h1标签),其后是<h2>(次重要的),以此类推。搜索引擎会使用标题将网页的结构和内容编制索引,所以网页上使用标题是很重要的。

    <h1> 这是一级标题</h1>

    <h2>这是二级标题</h2>

    html段落标签

    1,在HTML中,可以用<p>....</p>来显示一段文字 2,换行标签:

    代码练习如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
    </html>
    

    输出结果:

    11.png

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>这是一个非常好的网页</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body>
    </html>
    

    输出结果:


    22.png

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <title>常用的标签</title>
    </head>
    <body>
        <h1>这是一个非常漂亮的网页</h1>
        <h2>这是一个非常漂亮的网页</h2>
        <h3>这是一个非常漂亮的网页</h3>
        <h4>这是一个非常漂亮的网页</h4>
        <h5>这是一个非常漂亮的网页</h5>
        <h6>这是一个非常漂亮的网页</h6>
        <p>李白乘舟将欲行</p>
        <p>忽闻岸上踏歌声</p>
        <p>
            故人西辞黄鹤楼<br/>
            烟花三月下扬州</br>
        </p>
        <hr/>
    
    </body>
    </html>
    

    输出结果:

    33.png

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>
    <body>
        <img src="../img/3.gif" alt="这是一张图片" width="200px" />
    </body>
    </html>
    

    输出结果:


    55.png

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keyworlds" content="HTML5,javascript"/>
        <meta name="description" content="发布H5"/>
        <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
        <title>meta标签</title>
    </head>
    <body>
        <h1>5秒以后跳转到百度</h1>
    </body>
    </html>
    

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>XHTML的语法规范</title>
    </head>
    <body>
        <!--
            1.HTML中不区分大小写
            2.HTML注释不能嵌套
            3.标签必须结构完整
            4.HTML标签可以嵌套但不能交叉嵌套
            5.标签中的属性必须有值,且值必须加引号
    
        -->
    </body>
    </html>
    

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内联框架</title>
    </head>
    <body>
        <h1>这是11</h1>
        <iframe src="007.html" name="tom"></iframe>
    </body>
    </html>
    

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>超链接</title>
    </head>
    <body>
        <h1>这是12.html</h1>
        <a href="http://www.baidu.com" target="_blank">我是一个超链接</a>
        <a href="http//:www.baidu.com" target="_blank">我是一个超链接</a>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:前端笔记(1)

          本文链接:https://www.haomeiwen.com/subject/pduyuftx.html