美文网首页
前端笔记(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

    代码:

  • 前端笔记1

    HTML(Hypertext Markup Language)超文本编辑语言 基本的HTML页面:

  • 前端笔记(1)

    html概述 HTML是HyperText Mark-up Language的首字母简写,意思是超文本标记语言,超...

  • 前端笔记1

    JavaScript类型 js七种数据类型 1. Undefined、Null、Boolean、Number、St...

  • 【App开发笔记】1.2笔记目录

    未完待续 1.2.1 笔记目录 1 笔记简介1.1 写在前边1.2 笔记目录 2 前端2.1 Api...

  • 前端测试

    目录 目录 1. 前端基础1.1 布局1.1.1 grid布局 2. Vue 学习笔记2.1 Vue模板创建 前端...

  • 前端学习笔记_1

    安装软件:Vscode 使用编辑器: 新建文件、文件夹、 设置自动保存、字号大小 搜索、替换文件 搜索、安装插件:...

  • 前端学习笔记(1)

    现在已经接近六月份了,暑期实习还没找到= =作为一枚渣硕真的给母校丢脸啊T_T 好吧,回归正题,上周面试阿里校招,...

  • 前端题目笔记(1)

    1.location.href="/location.assign(") ,href与assign方法会产生历史记...

  • 四:前端笔记(1)

    1.ECMAScript理解 2.严格模式 3..Object扩展 4.Array扩展 5.Function扩展

网友评论

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

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